vue2模板语法

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-if是真正的条件渲染，因为他会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建
//v-if是惰性的：如果在初始渲染时条件为假，则什么也不做一直到条件变为真时，才会开始渲染条件块
//一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销，因此如果需要频繁切换，v-show；如果在运行条件很少改变，则v-if

▇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