vue中的指令

指令：
v-once 指令：一次性的插值，之后不会被改变

<span v-once>这个将不会改变: {{ msg }}</span>

v-html 指令：输出真正的 HTML，为普通文本

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

v-bind 指令：绑定属性，可以用“：”代替

<div v-bind:id="dynamicId"></div>

对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同
button是否渲染在于isButtonDisabled的存在与否或对与错

<button v-bind:disabled="isButtonDisabled">Button</button>

v-if 指令：将根据表达式 seen 的值的真假来插入/移除 p 元素

<p v-if="seen">现在你看到我了</p>

v-else 指令：与v-if搭配使用，当v-if所在元素不显示时显示，反之隐藏

v-else-if 指令：顾名思义，充当 v-if 的“else-if 块”，可以连续使用，相当于else if
注：v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，v-else-if必须紧跟在v-if之后，否则它将不会被识别。

v-show 指令：不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的display进行切换

与v-if相比，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切 换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好
v-for 指令：循环，重复使用该对象，遍历文本对象，eg:

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>
//js
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
//注：也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法

结果：

也可以用 v-for 来遍历一个对象的属性 eg：

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

结果：

v-on 指令：监听DOM事件，可用“@”代替

<a v-on:click="doSomething">...</a>

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：
在这个示例中，当 eventName 的值为 “focus” 时，v-on:[eventName] 将等价于 v-on:focus。

<a v-bind:[attributeName]="url"> ... </a>

Vue.component(“组件名”,{data:{}，template:HTML代码})：定义一个可复用的新组件
注意：data必须是一个返回值的函数eg：

Vue.component("counter",{    //1.组件名为"conter"; 2.data 写函数; 3.template 写组件的内容（元素和触发的事件）
	data:function(){
			return {count:0}
			},
 
//template 是模板的意思，在 html 里面是一个可以同时控制多个子元素的父元素。在这里定义了组件的内容
	template:'<button v-on:click="count++">点击计算点击次数：{{count}}次</button>'