vue2模板语法
vue使用了基于html的模板语法,允许开发者声明式地将dom绑定至底层vue实例的数据。在底层的实现上,vue将模板编译成虚拟dom渲染函数。结合响应式系统,vue能够智能地计算出最少需要重新渲染多少组件,并把dom操作次数减到最少
插值:文本,原始html,attribute,使用js表达式
数据绑定最常见的形式是使用‘mustache’语法(双大括号)的文本插值
<span>Message: {
{
msg }}</span>
双大括号将数据解释为普通文本,而非html代码,为了输出真正的html,你需要使用v-html指令
<p>Using mustaches: {
{
rawHtml }}</p>
解析:Using mustaches: <span style="color: red">This should be red.</span>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
解析:Using v-html directive: This should be red.
mustache语法不能作用在html attribute上,这时应该v-bind指令
<div v-bind:id="dynamicId"></div>
{
{
number+1}}
{
{
ok?'yes':'no'}}
指令
指令职责:当表达式的值改变时,将其产生的连带影响,响应式的作用于dom
▇v-text 与 {
{
}}一样
<span v-text="msg"></span>
<span>{
{
msg}}</span>
▇v-html输出真正的html
<div v-html="html"></div>
▇v-show 与 v-if
v-show用法:根据表达式之间真假值,与v-if不同的v-show的元素始终会被保留在dom中,切换元素的display css property
v-if用法:根据表达式的值的truethiness来有条件的渲染元素,在切换时元素及他的数据绑定/组件被销毁并重建
▇v-on
用法:绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句
用在普通元素,只能监听原生dom事件,用在自定义元素组件上,也可以监听子件触发的自定义事件
如果使用内联语句,语句可以访问$vent,如下:
<button v-on:click="doThis"></button>
<button v-on:click="doThat('hello', $event)"></button>
<button @click.stop="doThis"></button>
<button @click.prevent="doThis"></button>
<button @click.stop.prevent="doThis"></button>
<input @keyup.enter="onEnter">
<input @keyup.13="onEnter">
<button v-on="{mousedown:doThis,mouseup:doThat}"></button>
在子组件上监听自定义事件
<my-component @my-event