阅读 17

Vue中的模板指令语法与修饰符

指令

Vue中的指令就是指 v- 开头,作用于HTML元素,为绑定的目标元素提供一些特性,因此我们可以将指令看做特殊的HTML特性

表达式

  • {{ obj.a }} 表达式
  • {{ n + 1 }} 可以添加任何参数运算
  • {{ fn(n) }} 可以调用任何函数
  • 当值为 undefined 或者 null 时,则不显示
  • 也可以使用 <div v-text="表达式"></div> 的写法来展示

HTML 内容

v-html 可以使得表达式中的所含的标签生效

<div id="app">
	<div v-html="x"></div>
</div>

new Vue({
	el: '#app',
	data:{
		x:<strong>hi</strong>
	}
})
复制代码

显示值为:hi

输出{{ n }}

如果我们要输出{{ n }},直接写入模板的话,则会被模板编译为 n 的值,用v-pre可以不被模板进行编译

<div v-pre>{{ n }}</div> 显示值为:{{ n }}
复制代码

绑定属性

使用 v-bind 来进行属性的绑定,v-bind 可以简写为 :

  • 绑定 src
    <img v-bind:src="x"/>
    <img :src="x"/>
    复制代码
  • 绑定对象
    <div :style="{border: '1px solid red', height:100}"></div>
    复制代码

绑定事件

使用 v-on 来进行事件的绑定,v-on 可以简写为 @

<button v-on:click="add">+1</button>  // 点击之后运行 add()
<button @click="fn(1)">fn</button>	// 点击之后运行 fn(1)
<button @click="n+=1">+1</button> // 点击之后运行 n+1
复制代码

条件判断

使用 v-ifv-else 可以实现条件判断,如果是多重条件可以使用户v-else-if

<div v-if="x>0">x>0</div>
<div v-else-if="x=0">x=0</div>
<div v-else>x<0</div>
复制代码

只有满足条件的 div 才会显示,否则隐藏

循环

使用 v-for 可以实现循环数组或者对象,使用 v-for 需要在后面添加 :key="xxx",否则会引起浏览器报错

<ul>
	<li v-for="(u,index) in arr" :key="index">
		index:{{index}}  name:{{u.name}}
	</li>
</ul>
<ul>
	<li v-for="(value, name) in obj" :key="name">
		key:{{name}} value:{{name}}
	</li>
</ul>

复制代码

显示与隐藏

使用 v-show 可以实现显示与隐藏

<div v-show="n%2===0"> n是偶数 </div>
// 近似等于
<div :style="{display:n%2===0?'block':'none'}"> n是偶数 </div>
复制代码

数据双向绑定

v-modle一般用于inputselecttextarea等表单元素上,可以实现无论是data还是渲染的DOM元素的值或者内容发生变化,另一方也作出相应改变,使之值或者内容一致

<div id="app">
	<p>{{ content }}</p>
    <hr />
    <input type="text" v-modle="content" />
</div>

new Vue({
	el: '#app',
	data:{
		content:hi
	}
})
复制代码

v-cloak

网络较慢时,网页加载Vue.js,所以来不及渲染,导致网页显示源代码,可以使用v-cloak解决

<templated>
  <div id="app" v-cloak>
      {{ context }}
  </div>
<templated>

<script>
  new Vue({
      el: '#app',
      data:{
          context:hi
      }
  })
<script>

<style>
	[v-cloak]{
    	display:none
    }
</stylr>
复制代码

v-once

当数据或者内容已经确定,不会再次修改,则可以使用v-once

<div id="app">
	<p v-once>{{ context }}</p> // 使用 v-once p标签的内容将不会改变
    <hr />
    <input type="text" v-modle="context" /> 
</div>

new Vue({
	el: '#app',
	data:{
		context:hi
	}
})
复制代码

修饰符

为了更好的实现阻止事件冒泡、阻止默认事件等,Vue中提供的已点开头的修饰符

  • .stop 阻止事件冒泡,阻止事件向上级DOM元素传递
  • .prevent 阻止默认事件,阻止DOM操作引起的自动的动作
  • .capture 捕获冒泡,在有事件冒泡发生时,率先执行有该修饰符的元素
  • .self 将事件绑定到自身,只有自己可以触发,避免事件冒泡
  • .once 事件只触发一次
  • .ctrl.alt.shift.enter 或者 .13等 用户按下键盘中对应的键触发事件
  • leftrightmiddle 用户按下鼠标对应的按键触发事件
  • .sycn 将会写一篇博客进行总结
  • .lazy 默认情况 v-modelinput事件是同步变化的,该修饰符可以变为在 change时间同步
  • .number 将用户输入的数据绑定为 number 类型
  • .trim 过滤数据首尾的空格

总结

  • 模板使用 XML 语法
  • 使用 {{ }} 插入表达式
  • 使用 v-htmlv-textv-onv-bind 操作 DOM
  • 使用 v-ifv-for 实现条件判断和循环
  • 修饰符中重点搞懂 .stop.prevent.enter.sycn 就行了
文章分类
前端
文章标签