vue指令的使用
<div id="app">
<p>
{{ this.$data.msg }}//使用vm上的$data属性
//{{ }}的语法叫mustache语法
//在DOM结构中使用js语法,这个类型称之为jsx语法糖
</p>
<p>
{{ this._data.msg }}//使用vm上的私有属性_data
</p>
<p>
{{ this.msg }}//使用vm上拥有的msg
</p>
<p>
{{ msg }}//this可以省略
</p>
</div>
mustache语法
- mustache语法是一种模板语法,它又叫双大括号语法
vue在使用时有两部分:指令 和 组件
指令
- 指令需要模板语法的支持,即mustache语法的支持,但不能使用{{ }} ,只使用jsx语法糖(标签内直接显示需要双大括号).
- 模板语法不支持输出语法(console.log alert prompt)
- 作用:是用来操作DOM的,指令就是绑定在DOM身上的一个属性,这个属性具备一定的功能,这个功能用来操作DOM
指令的使用
- 格式:v-xxx = “mustache语法”//格式参考angular(ng-xxx)
- 指令
指令名称 | 作用 | 缩写 |
---|---|---|
v-html = “data” | 将数据展示在一个DOM内容中,可对html标签进行转义 | |
v-text = “data” | 将数据展示在一个DOM内容中,原样输出 | |
v-bind:attr = “data” | 将数据绑定在DOM属性上,数据改变DOM改变 | :attr |
v-if=boolean | 操作的是元素是否存在,初始化时为false时不会创建,节约资源 | |
v-show=boolean | 操作的是元素的display属性一个属性经常切换显示效果时使用 | |
v-for=“函数表达式” | 用来循环渲染数据 | |
v-on:事件类型 = “函数表达式” | 用来绑定事件 | @事件类型 |
v-model = “函数表达式” | 双向数据绑定 |
v-bind:attr 扩展:
-
:src = “img”//img为data属性
-
:class 类名指令
- 有两种形式:推荐使用数组
- :class={ [类名]:bool…}//等于一个对象,不加[]会被识别为一般的属性名,加了[]则为data中的属性名,不然单向数据绑定时无法识别
- :class = “{[类名]: boolean表达式?true:false}”
//可以通过三元运算来实现boolean值得判断
- :class = “{[类名]: boolean表达式?true:false}”
- :class = “[类名1,类名2,类名3]”//数据中的类名为data中的属性
- :class = “[flag?size:’’]”
-
:style 样式指令
- 有两种形式:
- :style = “{width:‘100px’}”//直接以对象的形式写要设置的样式
- :style = “style”//或者把要设置的样式写成对象放到data中,再用data的属性名使用
- :style = “[style,border]”//以数组的形式使用data中的样式对象的属性名
v-if指令(指的是该DOM结构是否存在)
- v-if = boolean
- 初始化为假时不渲染,节约开销
- 单路分支
- v-if = “flag”//当为真时,渲染;假时删除或不渲染,
- 双路分支
- v-if = “flag”//当为真时,渲染,不然渲染v-else
- v-else //v-if渲染时不渲染
- 多路分支//就像switch-case
- v-if = “flag1”//等价于case flag1
- v-else-if = “flag2”//等价于case flag2
- v-else //等价于default
v-show指令(指的是该DOM结构是否显示->display=none/block)
- v-show = boolean
- v-show 操作的是一个DOM的display样式属性
- 不管v-show的初始值是true或false,DOM结构都会渲染出来,true时可见,false是不可见
v-if vs v-show
v-if 有更高的切换开销,
v-show 有更高的初始渲染开销。
需要非常频繁地切换,则使用 v-show 较好;
如果在运行时条件很少改变,则使用 v-if 较好。
v-for(列表渲染)
- 有两种列表渲染 for in 和 for of
- for in 列表渲染
- 带一个参数
<li v-for = " item in num "> {{ item }} </li>
num 可以是数组,对象,字符串
item表示为值
- 带两个参数
<li v-for = "( item , key) in arr ">
<p> item -- {{ item }} </p>
<p> key ---{{ key }} </p>
</li>
//key 表示为索引值
- 带三个参数
<li v-for = " (item,key,index) in obj ">
<p> item -- {{ item }} </p>
<p> key -- {{ key }} </p>
<p> index -- {{ index }} </p>
</li>
//index表示obj的下标
事件指令 v-on:事件类型
需要触发的事件都写在methods中
-
事件传参
- e :事件对象
- 当事件传参时只有一个事件对象,则在指令的函数表达式中可以把事件对象省略。
- 事件传参时如果同时存在 事件对象 和 一般的参数,则在指令的函数表达式中一定要把事件对象写出来,用$event表示
-
事件的修饰符
- 格式:v-on:事件类型.修饰符 = ‘函数表达式’
@事件类型.修饰符 = ‘函数表达式’ - 修饰符
- .stop --> event.stopPropagation() 阻止事件冒泡
- .prevent --> event.preventDefault() 阻止事件的默认行为
- .once --> 只触发一次回调
- 格式:v-on:事件类型.修饰符 = ‘函数表达式’
-
按键的修饰符
- @keyup.修饰符 = 函数表达式
- enter 按上 enter键时 触发
- 13 按上 enter键时 触发 (keyCode)
- 能使用按键修饰符的缘由
- 原因:我们发现当我们需要书写很多下面类似按键判断代码的时候,发现代码在重复,我们希望代码能复用或是简写
- 解决: 它将这部分代码封装在自己的 Vue.js中,然后我们来调用这个功能,我们通过按键修饰符来使用
- 自定义按键修饰符键盘码
- Vue.config.keyCodes.按键名 = code码
- @keyup.修饰符 = 函数表达式
v-model 双向数据绑定
-
vue中通过 v-model 来进行双向数据绑定
-
v-model只用于表单元素
-
v-model默认绑定 value属性
-
v-model修饰符
- .trim:去除首尾空格
- .number:格式化数字
- .jazy:失去焦点同步一次
- 如果修饰符失效则通过事件绑定在methods种书写逻辑实现修饰符效果
Vue实例化
var vm = new Vue({
el: '#app', // 将id为app的一部分DOM结构当做模板传入配置项,然后挂载在页面中
data: {
msg: 'hello Vue.js',
arr: [ 1,2,3,4 ],
obj: {
id: 1,
name: 'yyb',
age: 18
},
json: [
'aa',
{
id: 1,
text: '睡觉'
},
{
id: 2,
text: '敲代码'
}
]
}//数据的定义
})