二. Vue基础语法

代码规范: 平时我们就是缩进4个空格,但是更多大型项目是2个空格.

CLI -> .editconfig 针对当前代码做了一个简单的规范，要求你缩进2个空格.

封装模板，直接输入前缀生成代码

记得勾选

这样以后只要输入vue之后，按template就会直接生成代码

1. 插值语法

Mustache

1.可以在后面直接跟文本

   
{{message}},李银河

2.也可以进行简单的运算

如果不拼接字符串的话，想把这几个拼在一起，可以写两个然后中间敲一个空格

  
{{firstName +' '+ lastName}}
  
{{firstName}} {{ lastName}}

3.还可以直接进行计算

 
{{counter * 2}}

v-once

  
{{message}}
  
{{message}}

v-html

p如果我们直接通过{{}}来输出，会将HTML代码也一起输出。

p但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。

v-text

v-text作用和Mustache比较相似：都是用于将数据显示在界面中

{{message}}

这样显示数据都一样，但是如果我们要是想

    
{{message}},李银河
    
,李银河

v-pre

我们之前学习过这样一个标签

,这个标签的作用就是把
标签之间的东西原封不动的展示出来。

希望vue不要给我解析{{}}里的内容，直接输出{{}}
    {{message}}
  
{{message}}


v-cloak
如果我们把script里面的赋值语句都给注释掉，或者执行到下面的script卡住了，等到代码真正运行的时候，才会将message替换到我们这里面，但在这之前上面的{{message}}就会原样输出，用户只能看到{{message}}，转换为我们赋值的瞬间，闪动的效果。


    
        
        
        
    

    
        

            {{message}}
        
        
        
    


上面的几个标签都是动态的往{{message}}里面传入东西，但是我们想要动态的想标签内传入东西的话，
2.绑定属性
v-bind基础
mustache语法只能在标签的内容中使用，像这样是不允许的

在src前面加一个v-bind:,这样vue就会解析这个指令，动态的把src绑定我们的变量

  

也可以用来动态绑定超链接
html
百度一下

v-bind:可以缩写为:




百度一下

绑定class
用法一：直接通过{}绑定一个类
  
{{message}}

用法二：也可以通过判断，传入多个值
Hello World

通过对象的方式，后面跟上boolean值，通过修改布尔值来决定我们是否要加进去
{{message}}

{{message}}

用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类
我们在写了v-bind:class之外还可以写普通的class,会将其合并
 
{{message}}

用法四：如果过于复杂，可以放在一个methods或者computed中
 
{{message}}

getClasses:function () {
    return {
        active:this.isActive,line:this.isLine
    }
}

注：getClasses()是一个计算属性
数组绑定：
这样写其实和我们之前在class里面写多个一样
  
{{message}}
  
{{message}}

但是我们也可以这样敲：
{{message}}
{{message}}

data:{
    message :'你好啊',
        active:'aaaaaa',
            line:'bbbbbb'
},
    methods:{
        getClasses:function () {
            return [this.active,this.line]
        }
    }


作业需求：点击列表中的哪一项，那么这一项的文字变成红色
在这里首先给每一个item绑定一个值：
changeColor:function (index) {
    this.currentIndex = index
}

设置初值为-1，表示都不选中
currentIndex : -1

通过函数调用，传入参数
v-on:click="changeColor(index)"、

动态绑定class ，class的第二个boolean值判断当前的index是否是我们想选中的
:class="{color_item:currentIndex == index}"

完整代码如下：



  
  
  




  

    
{{index}}-{{m}} 
  







动态绑定style：
1.对象语法
如果想把value当做字符串解析，就加一个'',如果只是单纯的写上属性，比如{fontSize:50px}，它在这里会将50px看为变量，到data里面找，找 50px: xxx
{{message}}


value一定要加单引号！！！

finalSize :'100px',


{{message}}

finalSize :100,

  
{{message}}
  
{{message}}

2.数组语法：
  {{message}}

baseStyle:{backgroundColor:'red'},
baseStyle1:{fontSize:'100px'}

要想输出字符可以用函数
 
{{getFullName()}}

methods:{
    getFullName(){
        return this.firstName + ' ' +this.lastName;
    }
}

3.计算属性
想对数据进行一定的变化或者其他的操作，返回变化之后的数据可以使用compute
计算属性本质是一个属性，不要加小括号
  
{{fullName}}

//computed:计算属性，最好使用属性的方式起名字
computed:{
    fullName() {
        return this.firstName + ' ' +this.lastName;
    }
}

计算属性只会调用一次，而方法内的属性你执行几次就会调用几次。methods是没有缓存的，他的性能会更低一点。
举个例子：计算所有书的金额总数

    
总价格：{{totalPrice}}




计算的时候除了最基本的for 语法之外，还可以用
for ( let i in this.books){
	sum +=this.books[i].price;
}

或者这样写
for (let book of this.books){
	sum += book.price;
}

计算属性本质上：
fullName:{
    set:function () {

    },
        get:function () {
            return this.lastName + " " +this.lastName
        }
}

我们在使用属性的时候本质上是调用这个属性里面的get方法,一般情况下我们只需要实现get方法就可以了。
计算属性一般是没有set方法的，没有set的时候就是一个只读属性
平常我们写的其实就是这个的简写
fullName:{
    get:function () {
        return this.lastName + " " +this.lastName
    }

}

当我们对这个计算属性重新赋值的时候，就会调用set方法

其实这个set方法会接受一个值，我们可以把新的值打印出来看一下：
set:function (newValue) {
    console.log('set方法被执行了~'+newValue)
}


还可以对字符串进行操作：
fullName:{
    set:function (newValue) {
        console.log('set方法被执行了~'+newValue);
        const names = newValue.split('');//这里通过split分割字符串，得到names数组
        //然后将拿到的names数组进行分割拼接
        this.firstName = names[0];
        this.lastName = names[1];
    },
        get:function () {
            return this.lastName + " " +this.lastName
        }

}

计算属性和methods的对比
分别调用四次，computed这个会对结果进行缓存，每次的时候他会去看这里面的变量有没有发生变化，如果发现没有任何变化的话，会把原来的结果返回回去。
但是methods里的方法会重复计算，性能比较低

再次重新赋值computed中用到的属性，fullName会再次调用
因为检查到其中发生了变化

4.ES补充
var/let
let：当变量需要改变的时候
const : 当变量不需要改变的时候
var：没有块级作用域
let：有块级作用域
这里都可以访问：



没有块级作用域引起的问题 （if的块级）
但是这样是有缺陷的，比如说这个if的代码块是没有限制作用的，在哪都能访问到，无论if的条件是否正确
if (true){
	var name = 'why';
}
console.log(name);

我们在方法里面定义了一个属性，但有的人在外面调用了，就修改了这个值，并没有打印出这个方法里面的内容。
    //2.没有块级作用域引起的问题
    var func;
    if (true){
        var name = 'why';
        func =function () {
            console.log(name)
        }
        // func()
    }
    console.log(name);
    name = 'kobe'
//本想打印why，但是因为之后修改了所以打印了kobe
    func()

没有块级作用域引起的问题 （for的块级）
首先在页面上面定义五个按钮
按钮1
按钮2
按钮3
按钮4
按钮5

这里会产生一个现象：就是我们无论点击哪一个按钮，到最后都会打印输出，点击了第五个按钮
// 3.没有块级作用域引起的问题 for的块级
var btns = document.getElementsByClassName('button');
for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click',function () {
        console.log('第' + i + '个按钮被点击');
    })
}

这里的原因是因为，但是我们的
进行的是这个函数

但我们使用的是函数外面的这个i

这个i第一次传入，到传递到第五次之后。这个i已经变成5，我们运行function的时候一直引用的是外面这个变量。
这里这个console打算用的是最初的i = 0，但是已经因为多次循环的时候，i++最终i已经被改成5了
对于解决这种问题，我们可以创建一个闭包，首先需要把这个i传入闭包中，最后还需要调用一下这个闭包
这个闭包之所以可以解决这个问题，是因为你之后修改的变量都只是在你的变量定义域范围内，改属于你自己的变量。函数内部有属于我们自己的name


因为在ES5之前if和for都没有块级作用域的概念，所以在很多时候，我们都必须借助于function的作用域来解决我们引用外面变量的问题，ES6中加入了let，let存在作用域
const  btns = document.getElementsByTagName('button');
for (let i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click',function (){
        console.log('第' + i + '个按钮被点击');
    })
}

执行过程： 因为let有自己的执行的作用域，这样我在改属于我自己的i的时候不会把别人的i改掉，因为之前没有作用域，是共用了i
    { i = 0
        btns[i].addEventListener('click',function (){
            console.log('第' + i + '个按钮被点击');
        })
    }
    { i = 1
        btns[i].addEventListener('click',function (){
            console.log('第' + i + '个按钮被点击');
        })
    }
    { i = 2
        btns[i].addEventListener('click',function (){
            console.log('第' + i + '个按钮被点击');
        })
    }
    { i = 3
        btns[i].addEventListener('click',function (){
            console.log('第' + i + '个按钮被点击');
        })
    }
    { i = 4
        btns[i].addEventListener('click',function (){
            console.log('第' + i + '个按钮被点击');
        })
    }

块级作用域(es5没闭包-有闭包-let对比)
// 1.情况1：es5中没有使用闭包（错误的方式）
    const  btns = document.getElementsByTagName('button');
    for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener('click',function (){
            console.log('第' + i + '个按钮被点击');
        })
    }

    // 执行过程：
    // i = 0
    var i = 0
    {
        btns[i].addEventListener('click',function (){
            console.log('第' + i + '个按钮被点击');
        })
    }

    var i = 1
    {
        btns[i].addEventListener('click',function (){
            console.log('第' + i + '个按钮被点击');
        })
    }

    var i = 2
    {
        btns[i].addEventListener('click',function (){
            console.log('第' + i + '个按钮被点击');
        })
    }


这三个没有作用域，所以这三个相当于使用了同一个i
当执行到最后一个的时候，i = 2

我们点击按钮之后执行函数，首先去回调函数，比如点击了第一个按钮，当它回调的时候只能找到刚开始的 i = 2，但是还有一个 i++,所以我们最终找到的是i = 3


  //2.情况二：ES5中的闭包
    var btns = document.getElementsByClassName('button');
    for (var i = 0; i < btns.length; i++) {
        (function (i) {
            btns[i].addEventListener('click', function () {
                console.log('第' + i + '个按钮被点击');
            })
        })(i)
    }

    (function (i) { //i = 0
        btns[i].addEventListener('click', function () {
            console.log('第' + i + '个按钮被点击');
        })
    })                        (i)

    (function (i) { //i = 1
        btns[i].addEventListener('click', function () {
            console.log('第' + i + '个按钮被点击');
        })
    })                        (i)

    (function (i) {  //i = 2
        btns[i].addEventListener('click', function () {
            console.log('第' + i + '个按钮被点击');
        })
    })                        (i)
    

这里的是前面一个函数 ，后面的(i)是指执行这个函数，这个函数执行的时候有自己的i，并不会去找外面的i
这个函数的执行过程也是回调
btns[i].addEventListener('click', function () {
            console.log('第' + i + '个按钮被点击');
 })

当它执行的时候，这里没有i，所以到最外层去找i
 (function (i) {  //i = 2
 (function (i) {  //i = 2
      xxx
    })    

最外层最初的时候我已经给它传了一个i了 (function (i) {  //i = 2
块级作用域有自己的i，无论改成多少都没有关系
const
使用const修饰的标识符为常量, 不可以再次赋值.

什么时候使用const呢?

当我们修饰的标识符不会被再次赋值时, 就可以使用const来保证数据的安全性.

建议: 在ES6开发中,优先使用const, 只有需要改变某一个标识符的时候才使用let.




对象的增强写法


把变量的名称作为key，把变量的具体的值作为value
5.事件监听
v-on介绍
  +
  -

可以写到方法里面
  +
  -

v-on参数
简写：v-on:可以简写为@
  +
  -


这里没有参数传入，方法调用的时候可以省略()

我们调用这个有参的方法btn2Click的时候，如果我们写括号但是不传入参数的话
 按钮2

会输出这个方法undefined
但是如果我们传入参数但是不写括号的话，因为在事件定义的时候，写方法的时候省略了小括号，但是方法本身是需要一个参数的，这个时候Vue会默认将浏览器生产的event事件对象作为参数传入到方法中
methods:{
    btn1Click(){
        console.log("btn1被点击了");
    },
        btn2Click(event){
            console.log(event);
        }
}

此时输出：

还有方法定义时，我们需要event对象，同时又需要其他参数
btn2Click(abc,event){
    console.log(abc,event);
}


如果写了括号，但是啥都不传入，输出

按钮4



如果不写括号，啥都不传入，输出

按钮4


会输出一个event一个undefined，因为会把默认的第一个参数传入event

但是如果我们想要第二个参数传入event对象，就必须给它赋值

?	假如我们这样写
按钮4

?	vue内部会把第二个参数event看是data里面的一个属性，找不到。
?	我们应该$event这样写
按钮4

?	我们应该这样写：


这里第一个参数要写123，不能写abc，因为会将abc看为变量，这里写123可以，是因为变量是不能以数字开头的，所以判定它是一个常量。

v-on修饰符
1. .stop - 调用 event.stopPropagation()

    

        按钮
    



我们这时候可以使用.stop，阻止事件冒泡，这样在点击button的时候就不会激活div的事件了
  按钮


2 .prevent - 调用 event.preventDefault()。
当我们点击提交按钮的时候，会默认提交，如果我们想要阻止他们默认事件的发生，就可以用.prevent

  

    
  

submitClick(){
    console.log("submitClick")
}


这里可以看出并没有跳转
3.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。



keyUp(){
    console.log('keyup');
}

这里keyup是指按下某个键盘才会调用方法
如果想指定特定的案件的监听事件，比如说只想要监听enter键的输入  可以用.enter


4.  .native - 监听组件根元素的原生事件
如果我们定义了自己的组件想要进行监听的时候，要在后面加.active
  

5 .once - 只触发一次回调。

  按钮2

6.条件和循环
条件渲染
div id="app">

    
abc
    
abc
    
abc
    
abc
    
abc
    
abc


isShow为false的时候，显示我