vue的基础指令

vue是一个高度封装的渐进式JavaScript框架，这其中也封装了很多方法，今天给大家遍历一下vue的基础指令...

---

——最简单的插值表达式  {{}}

{{}}

 在插值表达式中可以接变量、表达式(注意，如果要接判断要用三元表达式代替)

——给标签属性的属性值设置成变量  v-bind

v-bind属性="属性值"

:属性="属性值"   //简写形式

当属性的值是一个vue变量时使用

——给标签设一个触发事件  v-on

v-on:事件名="要执行的==少量代码=="
v-on:事件名="methods中的函数"
v-on:事件名="methods中的函数(实参)" 
@事件名="事件"  //简写形式

给标签绑定一个事件,事件函数存在于methods中(当然要自己写啦)

v-on的修饰符

修饰符就是在事件后面添加一个特定的限制,给事件加强功能性

v-on的修饰符有三个:

.stop

阻止事件冒泡

.prevent

阻止事件默认行为

.once

程序运行期间,只触发一次处理函数

——将标签属性绑定成一个变量  v-modle

 v-model="vue数据变量"

v-model主要应用于input表单以及textarea表单域中,v-model可以实时获取表单输入的值,并将这个值反馈到data数据变量上

要点:   当使用v-model时,会发生双向数据绑定

简而言之就是

• 数据变化 -> 视图自动同步

• 视图变化 -> 数据自动同步

数据与视图任意一方的变化都会引起另一方的变化(具体原理待补充)

tips:

v-modle其实是一个语法糖

//我们写的代码
    <input type="text" v-model="test" />
//实际上的代码
    <input type="text" :value="test" @input="test= $event.target.value">

——将变量显示在页面上  v-text / v-html

v-text="vue数据变量"    
v-html="vue数据变量"

不同点

• v-text  不会解析标签

• v-html  会识别标签并解析

​​​​​​——标签的显示与隐藏  v-show / v-if

v-show="vue变量"            
v-if="vue变量" 

 两种方法都可以控制标签的显示与隐藏

• v-show是利用css中的display none来隐藏DOM
• v-if 是通过直接在DOM树上删除元素来隐藏

当标签元素需要多次切换显示与隐藏时使用v-show（使用v-if会造成不必要的资源浪费）

当只需要执行一次时使用v-if

​​​​​​——循环  v-for

v-for="(值, 索引) in 目标结构"
v-for="值 in 目标结构"

v-for可以用于遍历数组数据，常数还有结构

注意：

v-for内定义的变量不能用于v-for 范围外