vue知识点

第一章、vue的指令与过滤器

1. 内容渲染指令

1.1. v-text:缺点会覆盖元素内部原有的内容
1.2.{{ }}：插值表达式，只是内容的占位符不会覆盖原来的内容
1.3.v-html:可以带有标签的内容，渲染成真正的html内容

2. 属性渲染指令（又称单向数据绑定指令）

注意 : 插值表达式只能用在元素内容节点中，不能用在元素属性节点中

• v-bind：为元素的属性动态的绑定值
• 简写是英文 ：
• 在使用v-bind属性绑定期间，如果绑定内容需要进行动态的拼接，则字符串的外面应该包裹单引号，例如：

<div v-bind:title="'box'+index">这是一个div</div>

3. 事件绑定指令

3.1.v-on 指令绑定点击事件 后面是跟处理函数
3.2.可以简写为：@
3.3.语法格式为：

<button v-on:click="add"></button>

mmethods:{
  add(){
    //如果在方法中要修改数据，可以通过this访问到
    this.count+=1;
  }
}

3.4. $event 的应用场景：如果默认的事件对象e被覆盖了，则可以手动的传递一个 $event。例如：

<button v-on:click="add（n,$event）"></button>

mmethods:{
  add(e){
    //如果在方法中要修改数据，可以通过this访问到
    this.count+=n;
  }
}

3.5. 事件修饰符

• prevent

<a @click.prevent="XXX">链接</a>

• stop

<button @click.stop="XXX">按钮</button>

4. v-model：双向绑定指令（又称数据双向绑定指令）

注意：只能用于一些表单的数据操作才有意义，其他没有意义
4.1. v-model的修饰符：

5. 条件渲染指令（根据条件显示与隐藏相应的dom元素）

5.1.v-show 的原理是：动态的为元素添加或移除display：none样式，来实现元素的显示和隐藏
如果要频繁的切换元素的显示状态，用v-show性能会更好
5.2.v-if的原理：每次动态的创建或移除元素，实现元素的显示与隐藏
如果刚进入页面的时候，某些元素默认不需要显示，而且后期这个元素很可能不需要被展示出来，此时用v-if性能会更好
5.3.v-else-if：多条件判断指令,要和v-if来搭配只用 结束是：v-else，里面可以放Boolean值也可以放条件表达式的到Boolean值

<div v-if="type==='A'">优秀</div>
<div v-else-if="type==='B'">良好</div>
<div v-else-if="type==='C'">一般</div>
<div v-else="type==='D'">差</div>

6. v-for:列表渲染指令

6.1.作用：用来辅助开发基于一个数组来循环渲染一个列表结构。v-for指令需要使用item in items 形式的的特殊语法，

• item ：表示被循环的每一项
• 在自身上也可以访问到item里面的值
• items ：表示被循环的数组，例如

data:{
//list 表示数据
list:[
     {id：1，name:'zs'}
     {id：2，name:'ls'}
]
}
<ul>
<li v-for="item in list">姓名：{{item.name}}</li>
</ul>

7. 总结：

① 能够知道vue的基本使用步骤
● 导入vue.js文件

● new Vue()构造函数，得到vm实例对象

● 声明el和data数据节点

● MVVM的对应关系

② 掌握vue中常见指令的基本用法

● 插值表达式、v-bind、v-on、v-if 和v-else

● v-for 和:key. v-model

③ 掌握vue中过滤器的基本用法