vue初体验

hello vue

    

        
hello {{name}}
    
    

上述代码中，首先创建了一个Vue对象实例，接着定义了属性及属性值

• el：选择绑定的html元素
• data：属性及属性值

vue是响应式的，所以当在控制台改变data里的属性值时，html标签的mustache语法也会随之改变

第一个for

    

        
hello {{name}}
        
{{value}}
    
    

上诉代码中，h2中插入了一个v-for函数，这是一个循环函数，这个函数还有很多用法，后续会提到

因为vue的响应式，在浏览器控制台在数组中push()数据页面也会同步更新

绑定事件

    

        
当前数字：{{num}}
        +
        -
    
    

上诉代码中，两个按钮分别绑定了两个函数，两个函数操纵的数值是在vue中定义的num变量，每次按下按钮都会对数值进行操作，因为vue的响应式，所以html中的数值也会随之变化

插值语句

1. v-once

通过插入该指令，可以使指令对应的标签的数值只显示一次，即使数值改变，标签内的mustache语法也不会更改

2. v-html

当需要在元素中插入html代码时，如果直接使用mustache语法，插入的将会直接是string字符串，因此需要插入该指令

3. v-text

该指令与mustache语法类似，都是在标签内插入数据，只不过这个指令会将标签内原先的数据全部清空

4. v-pre

该指令会使标签内的语法按照原来的形式输出

5. v-cloak

该指令会在vue还来不及渲染元素时，会将元素隐藏

示例

    

        
hello {{num}}
        +

        

        

        
hello {{num}}
    
    

v-bind和v-on

v-bind可以用于绑定一个或多个属性值，或者向另一个组件传递props值（学到组件时会再深入）

v-bind可以绑定图片连接，超链接，以及一些类和样式等

同时，v-bind还可以使用语法糖（简写）：来表示

例如：

    

        
hello {{name}}
        baidu
        
    
    

v-bind也可绑定一个对象，对象的属性为类名，属性值为布尔值，表示这个类是否存在

同时，v-bind也可以绑定数组，数组元素为类名

v-bind绑定为style时，也可绑定一个对象，属性为css属性，属性值为css属性值

同时，v-bind此时也可绑定为数组，元素值为css属性名+属性值

例如：

    

        
hello {{name}}
        
hello vue
        
hello you
        
hello me
        
hello kitty
        改变类
    
    

v-on修饰符

vue提供了一些修饰符来方便的处理一些事件

• .stop：阻止冒泡
• .prevent：阻止默认行为
• .keyCode|keyAlias：键修饰符
• .native：监听组件根元素的原生事件
• .once：只触发一次回调

例：

    

        

            
            

            
            百度
        
        
        百度
        
        
        
        
        
        touch me
    
    

计算属性

vue中提供的计算属性：computed

这个属性看起来和方法类似，主要是用于在里面定义一些需要计算的值，比如计算定义书本的总价格

    

        
书名：{{value.name}} 单价：{{value.price}}
        

        
总价:{{cacul_books}}
        
总价:{{cacul_books}}
        
总价:{{cacul_books}}
    
    

在上述代码中，在computed属性中定义了一个方法，看起来和methods属性相似，实则有以下不同

1. 如果多次调用computed属性方法，在data值没有改变的情况下，无论在mustache语法中调用了多少次computed，computed都只执行了一次。而methods方法只要调用它，它便会执行。
2. computed的属性实际上是每个属性包含了两个方法，一个get方法，一个set方法，因此computed的属性严格来说并不是方法，所以在调用是不能以方法来调用。

方法

methods定义时可分为3种情况

1. 事件调用的方法没有参数需要传递，这个时候可以省略括号
2. 事件传递一个参数，这个时候如果传递一个参数，则正常调用参数；如果不传递参数，也就是省略了括号，这时vue会将浏览器生产的event事件作为参数传递
3. 事件传递多个参数，如果不传递参数，则默认第一个参数为浏览器生产的event事件，第二个参数为undefined；如果要指定参数为浏览器生产的event事件，则定义为$event

    

        按钮1
        按钮1

        按钮2
        按钮2
        按钮2

        按钮3
        按钮3
        按钮3
        按钮3
    
    

v-for

v-for可以进行数组或者对象的遍历

对于数组，可以设置两个参数，分别是索引和值

对于对象，可以设置三个参数，分别是对象名，对象值和索引值

v-for中也建议为每个v-for绑定一个key值，这样可以提高渲染的效率

    

        

            
value:{{value}} index:{{index}}
        
        

            
value:{{value}} key:{{key}} index:{{index}}
        
    

    
    

v-if

v-if，v-else以及v-else-if，使用方法和JavaScript相差不大

v-if在进行渲染时不会将元素渲染在html中，v-show则是会将元素渲染出来，然后使用display属性进行隐藏

vue渲染元素时为了高效，会尽可能的复用已使用的DOM元素，因此在input切换时可能会出现里面的值不会改变的情况，这时就需要使用key关键字来唯一识别，使之不复用元素

    

        

            输入邮箱
            
        
        

            输入手机号
            
        
        切换
    

    
    

v-model

v-model可以对表单元素与data进行双向绑定，表单元素的值会跟着data属性进行改变，通常会设置每个表单元素一个value属性，这样在表单元素被选中时，data的值也会随之发生更改。

在复选框的绑定中，若只设置了一个值，则该值可设置为true或者false，这常常用于勾选用户协议中

    

        
        
当前输入：{{message}}

        男
        
        女
        
        
当前选中: {{sex}}

        
        
        
当前状态：{{getTure}}

        苹果
        
        香蕉
        
        橙子
        
        梨
        
        
当前选中：{{fruits}}

        
            跑步
            跳绳
            亲吻
        
        
当前选择：{{hobby}}

    

    
    

修饰符：

修饰符在v-model后面添加，如v-model.lazy="msg"

lazy：添加后事件在change时才会触发

number：将输入值转化为数字类型

trim：过滤首尾的空格字符