我是h1标签

    
成绩等级
    
优秀
    
良好
    
及格
    
不及格

    

        

            

                
商品名称
                
价格
            
            

                
{{ good.name }}
                
{{ good.price }}
            
        

    
    

        购物车为空
    

    
    

        {{ oneinfo }}
    
    

    
    

        key值：{{ k }}
        value值：{{ v }}
    



------------------------------------------------
      
        

  

    

        {{ hobby }}
    
    
    

        {{ index }}
        {{ value }}
    

----------------------------------------------------------

    

        

            
{{ a }}
        
    
    

注意！在Vue中：

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

key值 的解释

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

• 在v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，值不要是固定的值，比如如果都是1那么就混乱了
• 页面更新之后，会加速DOM的替换（渲染）
• :key="变量"

比如Element ui的例子

Key可以加速页面的替换，不加只是数据更新相比加了会慢一些，并不影响页面的演示

数组更新与检测

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

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

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

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

原因：

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

    
    

        

            
{{ hobby }}
        

    
    

    

解决方法：

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

// 方法2：通过 Vue.set(对象, index/key, value) 更新数组（数据会更新，页面也会发生改变）
Vue.set(vm.ball,0,'twoball')

数据双向绑定

    
    
    



    
    您输入的内容是：{{myText}}

没有输入头占位符

输入内容，同步

事件处理

change 和 blur 最本质的区别：

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

过滤案例

    
    
    



    



    

        
{{data}}
    

总结：绑定blur光标移除input触发，绑定input输入就触发，绑定change改变值触发，光标移走不会触发区别blur

注意：

this的指向问题，如果想要this指向的对象始终是一个对象，比如始终指向Vue对象，可以通过 var _this=this来指代，或者使用箭头函数

var a = function(name) {
 console.log(name)
}
a('HammerZe')
// 箭头函数
var a = (name)=>{
    console.log(name)
}
a('HammerZe')

箭头函数里没有this，里面写this指代的是箭头函数外this指代的对象

事件修饰符

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

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

    
    
    




    
路飞
    
山治
    
索隆

事件冒泡：通俗理解为子标签的事件触发完，传递到了父标签上继续触发

阻止事件冒泡

stop阻止

    
路飞
    
山治
    
索隆

self阻止

    
路飞
    
山治
    
索隆

prevent阻止a标签跳转 和 once只跳转一次

    

        
不拦截
        
点击拦截
        
点击拦截
        
只执行一次
    

-----------------------------------------------------------
     
         
              

按键修饰符

按键修饰符，可以通过v-on:keyup来监控键盘，v-on:keyup可以简写为@keyup

keyup可以直接点来监控某个按键，比如@keyup.enter来监控回车

    
    
    



    
    
    
方式一：
    
方式二：
    

    
方式一输入的：{{ mytext }}
    
方式二输入的：{{ mytext1 }}

表单控制

主要是input(输入框)、checkbox(复选框，多选)、radio(单选)

checkbox单选

实际生活比如登录的记住密码功能

    
    
    



    

    

    记住用户名

checkbox多选

选了多个可以放入数组

    
    
    




    篮球
    足球
    棒球
    桌球
    

您喜欢的球类：{{many}}

radio单选

radio对应的是value值，比如选中男，radio就是男

    
    
    



    男
    女
    保密
    

您选择的性别：{{radio}}

总结

• checkbox单选是布尔值，选中为true，反之为false
• checkbox多选是数组
• radio选中是字符串，比如选中性别男，radio 的value值就是男

v-model进阶

v-model 之 lazy、number、trim

• lazy：等待input框的数据绑定时区焦点之后再变化
• number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
• trim：去除首位的空格

    
    
    



     {{myText1}}
    

     {{myText2}}
    

     {{myText3}}
    

     {{myText4}}