Vue 指令总结

Vue 指令总结

vue模板中使用了vue 插值语法与指令语法
插值语法：

  <div>{{name}}</div>

用于标签体内，解析内容

指令语法

v-<name>[:param][.sync][=value]
				name:代表指令的名称	
				sync:代表的是系统修饰符
				value:代表的是数据的值

如
<a v-bind:href='url>点击</a>
管理标签到的属性 (如 href src )事件的绑定
会变成表达式: 'url’作为变量, 执行结果返回v-bind

常用指令
v-bind: 单向数据绑定, 简写 :
操作class列表或者内联样式

<p v-bind:class='{{open: is_open}}'></p>

v-model: value 双向数据绑定, 常用于表单元素, 默认监测value值, 简写: v-model

<input type='text'  v-model='text'>

ps: v-model=“text” 等价于 v-bind:value=“text”, v-on:input=“text=$event.target.value”

v-on: DOM事件监听(如果事件逻辑复杂, 常把JS代码写在一个函数里面, v-on调用函数名),
简写v-on:click —> @click

<button @click='count++'>{{count}}</button>

v-if: 条件渲染

<p v-if='bool'> show</p>

v-else-if & v-else:

<div>
  <p v-if='a1>90'>优秀</p>
  <p v-else-if='a1>80'>及格</p>
  <p v-else>良好</p>
</div>

v-show: 使用display属性控制是否显示. v-show生成的style属性不会覆盖之前的也不会修改元素本身自带的(原来元素有display属性为none时,v-show不起作用)。

v-for: 基于一个数组生成一个列表
语法 (item, index) in items 遍历数组元素

<p v-for='(x, index) in 9'>
  {{x}}
</p> 

ps: x默认是从1开始的, index默认是从0开始的

不常见:
v-text: 渲染普通文本

<p v-text='msg'></p>
data:{
	msg:'hello'
}

ps: 如果标签体本来就有内容,v-text会覆盖原来标签体内容

v-html: 把元素当成HTML标签解析后输出,可能存在xss攻击

ps: 如果标签体本来就有内容,v-text会覆盖原来标签体内容

<p v-text='msg'></p>
data:{
	msg:'<span>hello</span>'
}