Vue学习笔记(1) v-指令系列

v-html

直接在本DOM元素加入用html描述的DOM子元素

<div v-html="htmlString"></div>

data:{
	htmlString:`<div class="sonDOM">
					Hello World
				</div>`
}

v-bind

用在DOM元素的属性定义上。
下面这个例子就表示使得DOM元素的class属性等同于Vue实例的className，后者变化时，前者会同时变化。

<div v-bind:class = "className"><div>

data:{
	className:'myClass'
}

v-model

数据双向绑定，v-bind是单向的(Vue实例—>Dom元素)，v-model是双向的，一般用于获取输入数据。
下例表示input中的内容在改变时会同时改变Vue实例中的message，当然反过来也一样。

<input v-model="message"/>

data:{
	message: 'Runoob!'
}

v-if

用于控制某个DOM元素是否需要显示出来。
下例将true改成false后，就不显示出来了。也不会在内存中加载。

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

data:{
	seen: true
}

v-else、v-else-if

与v-if连用，含义通俗。

v-show

与v-if类似，但是会在内存中加载，而只是通过display的样式控制是否显示。因此更适合频繁切换的场景。

v-for

循环渲染本DOM元素，使用迭代遍历item in items的语法：
Vue 2.2.0+的版本里，当在组件中使用v-for时，key是必须的。 因此这里添加了一个v-bind:key

<li v-for="todo in todos" v-bind:key="todo">
      {{ todo.text }}
</li>

data:{
	todos:[
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
	]
}

可以提供第二个迭代参数为数组下标/键名

<li v-for="(todo, pos) in todos" v-bind:key="todo">
        {{todo.text}} 下标是 {{pos}}
</li>

也可以循环整数

<li v-for="n in 10">
     {{ n }}
</li>

v-on

触发事件
下例当点击按钮时触发按钮点击响应：

<button v-on:click="OnButtonClicked">点我</button>

methods: {
    OnButtonClicked: function () {
      alert('Clicked')
    }
  }

缩写：v-bind和v-on

v-bind:=:
v-on=@

其它注意

双引号"xxx"中的xxx是一个JS表达式，不一定只能绑定Vue实例变量