一、插值语法

    
    
    



插值语法


    
我的名字是:{{name}}
    
我的年龄是：{{age}}
    
我的爱好是：{{hobby}}
    
显示对象：{{obj}}

    
{{url}}
 默认情况，原封不动显示，如果能直接渲染成标签，说明存在漏洞 xss攻击

因为Vue是双向绑定的，可以在前端修改属性，也可以在后端修改

二、指令

1、文本指令

v-show与 v-if的区别：

v-show：标签还在，只是不显示了（display: none）
v-if：直接操作DOM，删除/插入 标签

    
    
    



文本指令



    
就想显示成标签
    
{{url}} 
    指令写在标签内，指令对应的变量，直接写就可以了，不需要再用 {{}} 包裹了

    

    1、v-html：把字符串，渲染成标签
    

    

    
    2、v-text：把变量内容，渲染到标签中
    
{{hello}}
    

    

    
    3、v-show:一个标签是否显示,用变量可以，用true或false也可以， 其实是display: none;并不是真正的把dom删除了
    

        我是一个div
        
我的div
        
我的div
        
我的div
    
    

    
    4、v-if:真正的删除，效率低
     

        我是第二个个div
        
我是第二个个div
        
我是第二个个div
        
我是第二个个div
    

2、事件指令

    
    
    



事件指令


    v-on表示事件指令，click表示单击,老语法，不用了
    
按钮
    

    新语法，以后都用这种： @click='函数名'
    
按钮二

3、属性指令

v-bind:class=’js变量’可以缩写成：:class=’js变量’

# 只要是标签的属性，都可以使用属性指令动态绑定
# v-bind:属性名=属性值
# :属性名=属性值




    
    
    



只要是标签的属性，都可以使用属性指令动态绑定
    
    // 通过v-bind:name来绑定属性
    我是span
    

    我是span222
    

    // 通过:语法绑定网址，不使用:会直接显示字符串
    点我看美女
    

    // 通过:语法绑定图片地址，不使用:会不显示
    

三、Style 和 Class

数据的绑定

style和class都能绑定字符串，数组，对象

语法

:属性名=js变量/js语法

• :class=’js变量、字符串、js数组’

class：三目运算符、数组、对象{red: true}

• :style=’js变量、字符串、js数组’

style：三目运算符、数组[{backgreound: ‘red’},]、对象{background: ‘red’

Class

    
    
    
    





    点我变色
    点我字体变大
    

        
我会变色
    

Style

    
    
    





    

        
我是style
    

四、条件渲染

    
    
    





    
您的成绩是：
    
优秀
    
良好
    
及格
    
不及格

五、列表渲染

1、v-for:遍历数组(列表)、对象(字典)、数字和展示图书

    
    
    





    刷新购物车

    

        

            
顺序
            
图书名字
            
价格
            
出版社
        


        

            
{{index+1}}
            
{{book.name}}
            
{{book.price}}
            
{{book.publish}}
        
    

    

        
循环对象

    
{{key}}是：{{value}}

    

    
循环数字

    
循环到第{{ i}}次了
    


    
循环字符串

    
{{i}}

注意！在Vue中：

• 数组的index和value是反的
• 对象的key和value也是反的

2、key值 的解释

vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度（虚拟DOM用了diff算法）

在v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，属性值唯一
页面更新之后，会加速DOM的替换（渲染）
:key="变量"

3、数组更新与检测

可以检测到变动的数组操作：

push：最后位置添加
pop：最后位置删除
shift：第一个位置删除
unshift：第一个位置添加
splice：切片
sort：排序
reverse：反转

检测不到变动的数组操作：

filter()：过滤
concat()：追加另一个数组
slice()：
map()：

原因：

作者重写了相关方法（只重写了一部分方法，但是还有另一部分没有重写）

4、问题：有的时候，数组（对象）变了，但是页面没变

# 在写vue时，会发生数组发生改变，但是页面没有改？

# 原因是：
	作者重写了相关方法（只重写了一部分方法，但是还有另一部分没有重写）

解决：

// 方法1：通过 索引值 更新数组（数据会更新，但是页面不会发生改变）
vm.arrayList[0]
"Alan"
vm.arrayList[0]='Darker'
"Darker"

// 方法2：通过 Vue.set(对象, index/key, value) 更新数组（数据会更新，页面也会发生改变）  # 推荐
Vue.set(vm.arrayList, 0, 'Darker')  # Vue.se(vm.key,索引，要修改的数据)

六、事件处理

change 和 blur 最本质的区别：

如果输入框为空，失去焦点后，change不会触发，但是blur会触发

1、过滤案例

    
    
    




    
    
{{data}}

过滤案例总结

# 数组如何过滤
	数组.filter(function (item){
        return true/false   # 如果return了true当前item保留，否则不保留
    })

# es6的箭头函数，处理this指向的问题
	数组.filter(item=>{
        return true/false   # 如果return了true当前item保留，否则不保留
    })

# indexOf:字符串的方法
	字符串.indexOf(子字符串)，如果子字符串在字符串中，返回索引，如果不在返回 -1，如果大于-1说明，子字符串在字符串中

2、事件修饰符

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生

用 v-on:click.prevent.self 会阻止所有的点击
而 v-on:click.self.prevent 只会阻止对元素自身的点击

    
    
    





    

        
li1,加了stop后，阻止了事件冒泡，事件不往上传递了
        
li2
    


    

    点我看美女
    

    点我秒杀

3、按键修饰符

七、据双向绑定

1、v-model的使用

    
    
    




    用户名：
    密码：
    

    
您输入的用户名为：{{username}}
    
您输入的密码为：{{password}}