Vue学习总结

Vue 基础

指令：

插值表达式：
语法：{{要插入的值}}，此时相当于占位符，到时候{{关键字}}会被替换成
Model中的数据
bug点：
当网速较慢时，Vue初始化未完成时，插值表达式不能被解析，会直接显示
出来，加载完毕之后又会被替换成真实结果，造成闪烁（Vue的加载代码写在
HTML元素之后时会出现该bug）
1.v-cloak指令：
语法：把它当作HTML元素的一个属性使用
示例：

{{msg1}}

特点：
当Vue加载完毕后，v-cloak属性会自动消失
使用：
添加如下CSS样式：让所有带v-cloak属性的元素隐藏，Vue加载完成后显示
实现，解决插值表达式闪烁的问题
[v-cloak]{
display: none;
}

2.v-text：
语法：

作用：和插值表达式一样，用于给HTML元素添加文本
区别：
1.v-text不会存在闪烁问题
2.v-text会将Model中的数据完全替换到HTML元素中（覆盖）
3.插值表达式只会将Model中的数据替换到插值表达式中（占位符内容的替换）
相同点：
1.插值表达式和v-text都可以给HTML元素显示文本
2.插值表达式和v-text都不会解析要添加文本中的HTML标签（原样显示）

3.v-html：
和v-text的唯一区别：给HTML添加内容时会解析内容中的HTML

代码测试：

    
    


v-cloak、v-text、v-html指令以及插值表达式的学习

    
{{msg1}}

    
{{msg1}}

    


    


    
{{msg2}}

    

运行结果：

4. v-bind：
语法：在HTML元素的属性目前加上绑定标识，此时HTML的该属性的值就会根据属性值的名字从Model中获取数据
示例：
用户名：
var vm = new Vue({
el:"#app",
data:{
msg:“吾名”,
name:“超强”
}
});
注意：
1.【v-bind:】用于绑定HTML元素属性的值
2.【v-bind:】可以简写为:
3.Vue框架会把使用了v-bind:标识的HTML的属性的值当作一个Javascript表达式来使用
只要表达式合法，就能执行（当然，数据必须时字面量或来自于Model中）
如：
:value=“msg+‘你好’”
:value=“msg+name”

5. v-on：
语法：在HTML的事件属性（不带on）前加上绑定标识，此时HTML触发此事件时，会执行事件中绑定的代码
示例：
点击下显示你好
点击下显示你好
var vm = new Vue({
el:"#app",
data:{
msg:“吾名”,
name:“超强”
},
methods:{
sayHello:function (name) {
alert(“你好！”+name);
}
}
});
注意：
1.常见的web网页的事件都支持绑定
2.事件名字不带on
3.事件触发的方法必须在methods中定义
4.v-on标识的属性会被Vue解析为特定JavaScript，只要内容符合JavaScript规范
都能正确执行（比如传入参数）
4.【v-on:】等价于【@】

代码测试：

    
    
    


  


    
用户名：

    
      用户名： 


    

点击显示你好
点我


运行结果：

接下来我们做一个小练习

用Vue做一个跑马灯效果

直接上代码：

    
    
    





    开始
    停止
    

来看下运行效果：（这里只展示静态效果）