B061-ES6 NodeJS npm Vue

这篇具有很好参考价值的文章主要介绍了B061-ES6 NodeJS npm Vue。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

ECMAScript6

什么是ECMAScript

web1.0时代:

最初的网页以HTML为主,是纯静态的网页。网页是只读的,信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。

web2.0时代:

  • 1995年,网景工程师Brendan Eich 花了10天时间设计了JavaScript语言。
  • 1996年,微软发布了JScript,其实是JavaScript的逆向工程实现。
  • 1997年,为了统一各种不同script脚本语言,ECMA(欧洲计算机制造商协会)以JavaScript为基础,制定了ECMAscript标准规范。JavaScript和JScript都是ECMAScript的标准实现者,随后各大浏览器厂商纷纷实现了ECMAScript标准。

所以,ECMAScript是浏览器脚本语言的规范,javascript实现了该规范的一种前端脚本语言。

ECMAScript历史

2009年12月,ECMAScript 5 发布。
2011年6月,ECMAScript 5.1 发布。
2015年6月,ECMAScript 6,也就是 ECMAScript 2015 发布了。 并且从 ECMAScript 6 开始,开始采用年号来做版本。即 ECMAScript 2015,就是ECMAScript6。

ES6其实就是ECMAScript 6的版本,是规范,这种规范被javascript实现了。

tips:
之前学的都是ES5,

为什么要学ES6:
99%公司都是ES6的语法,
ES6可少些JS,但不匹配IE,但webpack打包工具可转换ES6为ES5后匹配所有浏览器。

语法
申明变量
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">

    //es5申明变量
    var a = 3;
    //es6申明变量
    let b = 2;

    //es6申明常量,声明后不能再修改
    const d = 5;

    /**
     * var 函数级别的变量  只有某函数内部生效或整个js作为一个函数生效
     * let 块级别的变量  在代码块内生效  即只在花括号作用范围内生效
     */

    for(let i=1;i<2;i++){
        console.log("===="+i);
    }

    // console.log("ddddd"+i);      //i用var声明这里可以打印,用let不行

    function show() {
        var c=3;
        console.log("-----"+c);
    }

    // console.log("-----"+c);      //不能打印

    console.log(a,b);

</script>

</body>
</html>
解构表达式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    let arry = ["好","o","大","you"];
    //es5方式使用
    console.log(arry[0],arry[1],arry[2],arry[3]);
    //es6使用数组   解构表达式   相当于用一组变量接收上面的数组元素
    let [a,b,c,d,e,f] = arry;
    console.log(a,b,c,d,f);

    let person={
        name:"王天霸",
        age:1,
        show:function () {
            console.log("show  show  show  show")
        }
    }

    //es5 使用对象
    //console.log(person.name);
    //person.show();

    //es6解构对象   变量明必须和对象中的属性名保持一致   相当于用一组变量接收上面的对象属性
    let {name,age,show} = person;

    console.log(name);
    show();

</script>
</body>
</html>
箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    let  person={
        //es5定义函数
        show1:function () {
            console.log("AAAAAAAA")
        },
        //es6  箭头函数  作用也是定义函数  一个参数也可以省略括号  箭头也可以省略
        show2:(a)=>{
            console.log("BBBBBB"+a)
        },
        show3(b){
            console.log("CCCCCCCC"+b)
        }
    }

    person.show1();
    person.show2("李寻欢");
    person.show3("时光鸡");

</script>
</body>
</html>
模块化

B061-ES6 NodeJS npm Vue,笔记总结,es6,npm,vue.js
b.js

// 导出一个
export const util = {
    show(){
        console.log("AAAA");
    }
}

// 导出多个
const util1 = {
    show1() {
        console.log("AAAA");
    }
}

const util2 = {
    show2() {
        console.log("AAAA");
    }
}

export {util1,util2}

// 导出默认
export default {
    show3(){
        console.log("AAAAA");
    }
}

a.js

import {util} from "./b";	// .js可加可不加
util.show();

import {util1,util2} from "./b";
util1.show1();
util2.show2();

import xxx from "./b.js"    // 名称可随便取
xxx.show3();

页面引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/a.js"></script>
</head>
<body>
<script type="text/javascript">
    /**
     * 模块化:将碎片化的js文件整合成一个
     *  导出方式一: export const util = {}
     *  导出方式二:  export {util1,util2}
     *  导出方式三:  export default {}  导出默认
     *
     *
     *
     *  导入方式一:import {util} from "./b";
     *  导入方式二:import {util1,util2} from "./b";
     *  导入方式三:import xxx from "./b";    名称随便取
     */

</script>
</body>
</html>

npm引出

Ajax成为主流 jQuery,前后端分离开始

Html5
单页面:通过内容的局部刷新做到单页面,所有网站内容都在一个页面上呈现,通过动态的链接刷新里面的内容

NodeJs
小型的前端服务器,就是前端的后台,但是并发量小,只有200左右,讲node的目的是为了了解里面的功能npm

NPM:
是node.js的包管理系统,下载安装完成Node会自带NPM
maven-jar-pom.xml,npm-js-package.json,
NPM相当于java中的maven,管理js插件,安装JS或JS库(VUE)。

nodejs安装

安装文件在文件夹里,可cmd输入node -v看本地是否已有安装node。
会自动配环境变量
安装node是为了用里面的npm,用npm来安装vue(VUE就是一个js库)

VUE

vue简介

渐进式框架,学一个组件就可以用一个,不像java做一个项目要学完全部语法
官网:https://cn.vuejs.org/

轻量:很小,20kb左右
数据绑定:不需要操作Dom节点,直接绑定:input-Data-ajax
指令:v-xxx
插件化:但可以集成各种各样的插件

配置Terminal

安装node是为了用里面的npm,用npm来安装vue(vue就是一个js库)
安装完Node应该自带了npm,可以在控制台输入npm -v查看

如果npm -v为空:
1.设置 - 工具 - Terminal - 配置Shell path为C:\Windows\System32\cmd.exe
2.上移环境变量D:\Java\nodejs\到最上面优先扫描,控制台输入npm -v检查
3.还不行就重启idea再在控制台输入npm -v检查
4.再不行就重启电脑再在控制台输入npm -v检查

vue入门

1.安装VUE
安装方式一:项目cmd,npm install vue
安装方式二:推荐使用,在idea的Terminal/终端控制台安装,npm install vue或简写npm i vue,
下载vue放置到 node_modules =>相当于本地maven仓库

2.使用Vue

案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue核心js-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
      {{msg}}
    </div>
<script type="text/javascript">
    /**
     * 1.安装VUE
     *    npm install/i vue  帮我们下载vue放置到 node_modules =>相当于本地maven仓库
     * 2.使用Vue
     */
    new Vue({
        el:"#app",      //选择器挂载dom节点
        data:{
            msg:"你好,vue!!!"
        }
    });

</script>
</body>
</html>
vue属性-el
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue核心js-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <!--准备一个dom节点  div-->
    <div class="app">
      {{msg}}
    </div>
    <div class="app">
        {{msg}}
    </div>
<script type="text/javascript">
    /*el:  用来挂载dom节点
       *  el:选择器
       *    id选择器    #app
       *    类型选择器   只有第一个生效
       *    元素选择器   只有第一个生效
       *  我们的Vue实例,一个Vue实例只能挂载一个dom节点
       * */
    new Vue({
        el:"div",
        data:{
            msg:"你好,vue!!!"
        }
    });
</script>
</body>
</html>
vue属性-data
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue核心js-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <!--准备一个dom节点  div-->
    <div class="app">
      {{msg}}<br/>
      {{person.name}}<br/>
      {{person.age}}<br/>
      {{person.show()}}<br/>
    </div>
<script type="text/javascript">
    /*data: {}  用来申明数据 */
    let vuetest = new Vue({
        el:"div",
        data:{
            msg:"你好,vue!!!",
            person:{
                name:"李寻欢",
                age:23,
                show:function () {
                    alert("show  show  show")
                }
            }
        }
    });
    console.log(vuetest.person.name);
    vuetest.person.show();
</script>
</body>
</html>
vue属性-methods
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue核心js-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<!--准备一个dom节点  div-->
    <div class="app">
      {{msg}}<br/>
      {{show1()}}<br/>
    </div>
<script type="text/javascript">
    /* data: {}  用来申明数据 */
    let vuetest = new Vue({
        el:"div",
        data:{
            msg:"你好,vue!!!"
        },
        /*定义函数*/
        methods:{
            show1(){
                alert("AAAAA")
            },
            show2(){
                alert("BBBB")
            }
        }
    });
    vuetest.show2();
</script>
</body>
</html>
vue架构认识

回顾mvc架构
B061-ES6 NodeJS npm Vue,笔记总结,es6,npm,vue.js
现在流行的MVVM架构
B061-ES6 NodeJS npm Vue,笔记总结,es6,npm,vue.js
M:即Model,模型,包括数据和一些基本操作
V:即View,视图,页面渲染结果
VM:即View-Model,模型与视图间的双向操作(无需开发人员干涉) 监听

在MVVM之前,开发人员从后端获取需要的数据模型,然后要通过DOM操作Model渲染到View中。而后当用户操作视图,我们还需要通过DOM获取View中的数据,然后同步到Model中。而MVVM中的VM要做的事情就是把DOM操作完全封装起来,开发人员不用再关心Model和View之间是如何互相影响的:

-只要我们Model发生了改变,View上自然就会表现出来。
-当用户修改了View,Model中的数据也会跟着改变。

把开发人员从繁琐的DOM操作中解放出来,把关注点放在如何操作Model上.
B061-ES6 NodeJS npm Vue,笔记总结,es6,npm,vue.js
Vue是基于mvvm模式的一个前端框架

vue表达式

表达式是Vue中视图模板(html)的一种语法结构,将数据绑定(输出)到HTML中。简单的说就是把data数据模型中数据输出到html中。

1、表达式语法
VueJS表达式写在双大括号内:{{ expression }}。
VueJS表达式把数据绑定到 HTML。
VueJS将在表达式书写的位置"输出"数据。
VueJS表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}。

vue-表达式-基础

加减乘除模,三目,字符串,其他案例见word

<body>
<!--准备一个dom节点  div-->
    <div class="app">
        {{num1}} + {{num2}} = {{num1 + num2}}<br/>
        {{num1}} - {{num2}} = {{num1 - num2}}<br/>
        {{num1}} * {{num2}} = {{num1 * num2}}<br/>
        {{num1}} / {{num2}} = {{num1 / num2}}<br/>
        {{num1}} % {{num2}} = {{num1 % num2}}<br/>
        <!--在js中  表示false
          0  false  ""  NaN  undefine  null
        -->
        {{sex?"男":"女"}}
    </div>
<script type="text/javascript">
    /*data: {}  用来申明数据 */
    let vuetest = new Vue({
        el:"div",
        data:{
            num1:2,
            num2:3,
            sex:0
        }
    });
</script>
</body>
vue-表达式-操作对象&数组
<body>
    <!--准备一个dom节点  div-->
    <div class="app">
        {{JSON.stringify(user)}}<br/>
        {{hobbys.join("==")}}<br/>
    </div>
<script type="text/javascript">
    /*data: {}  用来申明数据 */
    let vuetest = new Vue({
        el:"div",
        data:{
            user:  {
                name: "张三",
                age: 29,
                getAge: function () {
                    return this.age
                },
                toString:function(){
                    return "姓名:"+this.name+",年龄:"+this.age;
                }
            },
            hobbys:["打游戏","踢足球",'泡MM',"泡GG"]
        }
    });
</script>
</body>
vue-指令
  指令:
    以v-开头的  标签的属性
     我们的指令在哪一个标签上,代表着对哪一个标签进行操作
     1.v-text  直接显示文本内容
     2.v-html  显示html内容
     3.v-if    判断
     4.v-for   循环
     5.v-on    绑定事件
     6.v-show  控制标签是否显示
     7.v-bind  绑定属性
     8.v-model 双向绑定
v-text & v-html
<body>
<div id="app">
    <div v-text="msg">我会显示吗?</div>      <!--1.v-text 以文本形式显示内容-->
    <div v-html="msg">我会显示吗?</div>      <!--2.v-html 以html形式显示内容-->
</div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            msg:"<h1>我会很粗吗???</h1>"
        }
    });
</script>
</body>
v-if
<body>
<div id="app">
    <span v-if="age>0 && age<=18">还年轻,多玩玩</span>
    <span v-else-if="age>18 && age<=60">该奋斗了,骚年</span>
    <span v-else-if="age>60 && age<=80">退休了,养老了</span>
    <span v-else>可以挂墙上了</span>
</div>
<!-- v-if:判断 -->
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            age:5
        }
    });
</script>
</body>
v-for
<body>
<div id="app">
    <ul>
        <li v-for="v in num">{{"v: "+v}}</li>           <!-- 1.遍历数字  值 -->
    </ul>
    <ul>
        <li v-for="(v,i) in num">{{v}}=={{i}}</li>      <!-- 1.遍历数字  值,index -->
    </ul>
    <ul>
        <li v-for="(v,i) in msg">{{v}}=={{i}}</li>      <!-- 2.遍历字符串   值,index -->
    </ul>
    <br/>
    <div v-for="(v,i) in hobbys">{{v}}=={{i}}</div><br/>        <!-- 3.遍历数组   值,index -->

    <div v-for="(v,k,i) in person">{{k}}=={{v}}=={{i}}</div>        <!-- 4.遍历对象  有三个参数  值,key,index -->
</div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            num:5,
            msg:"itsource",
            hobbys:["洗脚","泡MM"],
            person:{
                name:"小乔",
                age:23,
                show:function () {
                    alert("show show show")
                }
            }
        }
    });
</script>
</body>
v-on & v-show
  • v-show :控制当前标签显示
  • v-on 绑定事件,所有的jquery的事件名我们都可以使用
  • v-on:事件名,可以简写成@事件名 ---->推荐使用
<body>
<!--准备一个dom节点  div-->
    <div id="app">
        <img src="img/美女.jpg" height="300" width="300" v-show="isShow"/>
        <!--完整写法-->
        <!--<button v-on:click="show">点我有惊喜</button>-->
        <!--简写-->
        <button @click="show">点我有惊喜</button>
        <button @mouseover="over" @mouseout="out">点我有惊喜</button>
    </div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            isShow:false
        },
        methods:{
            show(){
                this.isShow = !this.isShow;
            },
            over(){
                console.log("进去了。。。")
            },
            out(){
                console.log("出来了。。。")
            }
        }
    })
</script>
</body>
v-model

双向绑定就是MVVM,VM控制器既可以监听节点变化也可以监听model变化,
model在vue里就是data属性,view就是页面元素。文章来源地址https://www.toymoban.com/news/detail-518413.html

<body>
<div id="app">
    <input type="text" v-model="msg">{{msg}}
</div>
<script type="text/javascript">

    new Vue({
        el:"#app",
        data:{
            msg:""
        }
    });
</script>
</body>

到了这里,关于B061-ES6 NodeJS npm Vue的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript Es6_3笔记

    了解构造函数原型对象的语法特征,掌握 JavaScript 中面向对象编程的实现方式,基于面向对象编程思想实现 DOM 操作的封装。 了解面向对象编程的一般特征 掌握基于构造函数原型对象的逻辑封装 掌握基于原型对象实现的继承 理解什么原型链及其作用 能够处理程序异常提升程

    2024年02月11日
    浏览(48)
  • ES6 新特性(详细复习笔记)--下

    应用实例-声明对象简写 1. 需求: 演示声明对象简写 代码演示 2-需求: 演示对象方法简写 3-应用实例-对象拓展运算符 需求: 演示对象拓展运算符使用 拷贝对象(深拷贝)的用法和理解 对象拓展运算符是比较新的特性,低版本的浏览器不支持 火狐/谷歌浏览器没有问题 基本介绍

    2024年02月15日
    浏览(45)
  • ES6 模块编程(新思路方便复习笔记)

    1、ES6 使用 (1)export {名称/对象/函数/变量/常量} (2) export 定义 = (3) export default {}导出模块 2、使用 import {} from “xx.js” / import 名称 form “xx.js” 导入模块 2 应用实例-批量导出形式 编写 common.js , 该文件有函数,变量, 常量, 对象 要求在 use_common.js , 可以使用到 common.js 中定义的 函

    2024年02月15日
    浏览(41)
  • JavaScript学习笔记01(包含ES6语法)

    Js 最初被创建的目的是“使网页更生动”。 Js 写出来的程序被称为 脚本 ,Js 是一门脚本语言。 被直接写在网页的 HTML 中,在页面加载的时候自动执行 脚本被以纯文本的形式提供和执行,不需要特殊的准备或编译即可运行(JIN compiler) Js 不仅可以在浏览器中执行,也可以在

    2024年02月16日
    浏览(51)
  • 前端框架学习-ES6新特性(尚硅谷web笔记)

    ECMASript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言。javaScript也是该规范的一种实现。 笔记出处:b站 尚硅谷Web前端ES6教程,涵盖ES6-ES11 阮一峰大佬的:ECMAScript 6 入门 ES6 let 使用let声明变量的特点: 不允许重复声 块儿级别作用域 不存在变量提升 不影

    2024年02月12日
    浏览(34)
  • vue对象复制(使用es6对象扩展运算符,深拷贝)

    vue3+es6语法 直接上代码

    2024年02月16日
    浏览(50)
  • JavaScript笔记——快速了解 ES6 新增数组方法,开箱即用(含案例)

    数组是 JavaScript 以及多数编程其他编程语言的一种基础数据类型。 ES6 提供了许多新的数组方法,这篇文章将介绍其中一些常用的数组方法及其使用示例。 Array.from() 方法从一个类似数组或可迭代对象中创建一个新的,浅拷贝的数组实例。例如,将字符串转换为字符数组。 A

    2024年02月10日
    浏览(43)
  • 后端程序员的前端必备【Vue】 - 07 ES6新语法

    使用let定义变量能更加精准的确定变量的作用域 使用const定义常量,常量一旦定义不可以改变 使用模板字符串可以避免大量的字符串拼接 类似于springmvc中接受参数拥有默认值 使用箭头函数可以简化复杂的代码结构(类似于java中lambda表达式) 箭头函数应用 定义:从一个大的数

    2024年02月04日
    浏览(45)
  • JavaScript Es6_2笔记 (深入对象 + 内置构造函数 + 包装类型)+包含实例方法

    了解面向对象编程的基础概念及构造函数的作用,体会 JavaScript 一切皆对象的语言特征,掌握常见的对象属性和方法的使用。 了解面向对象编程中的一般概念 能够基于构造函数创建对象 理解 JavaScript 中一切皆对象的语言特征 理解引用对象类型值存储的的

    2024年02月12日
    浏览(46)
  • Vue报错 Cannot find module ‘../../modules/es6.symbol‘解决办法

    在进行webpack打包的时候,会出现Cannot find module \\\'XXX’的错误,找不到某个模块的错误,今天给出解决方法: 直接进行npm install重新打包; 如果npm install重新打包之后,仍然出现这个问题,可以进行删除node_modules文件夹,同时清除缓存,如下命令: 如果以上方法依然不奏效,那

    2024年01月18日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包