Vue系列五—模板语法、条件渲染、列表渲染

一、模板语法-插值

1、文本插值

使用双大括号

<span>Message: {{ msg }}</span>

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但要留心该节点上的其它数据绑定：

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

2、原始html

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用 v-html 指令：

<p>这是字符串: {{ rawHtml }}</p>
<p>这是 v-html 指令: <span v-html="rawHtml"></span></p>

3、Attribute

<div v-bind:id="testId"></div>
<div v-bind:class="color"></div>
<button v-bind:disabled="isButtonDisabled">Button</button>

data(){
	return {
		color:'redfont'
	}
}

.redfont{
	color:red;
}

4、使用 JavaScript 表达式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

二、模板语法-指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute

<p v-if="seen">现在你看到我了</p>
<p v-else>看不到哦</p>
<a :href="url">...</a>
<div @click="submit">
	<div @click.stop="innerSubmit">
		提交操作
	</div>
</div>
<-- 提交时，如果内部click事件不加.stop会产生实际冒泡，，控制台依次输出inner、outer !-->
<-- 加上.stop后，inner执行完就结束了，不会向上继续执行 !-->

data(){
	return {
		seen:true,
		url:'https://cn.vuejs.org/v2/guide/syntax.html'
	}
},
methods:{
	submit:function(){
		console.log("outer")
	}
	innerSubmit:function(){
		console.log("inner")
	}
}

三、条件渲染

v-if 、v-else-if、 v-else、 v-show

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

<h1 v-show="ok">Hello!</h1>

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

四、列表渲染

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。建议尽可能在使用 v-for 时提供 key attribute。

1、用 v-for 把一个数组对应为一组元素

<ul >
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>
<ul>
  <li v-for="(item, index) in items">
    {{ index }} - {{ item.message }}
  </li>
</ul>

data() {
	return{
		items: [
	      { message: 'Foo' },
	      { message: 'Bar' }
	    ]
	}
}

2、在 v-for 里使用对象

可以用 v-for 来遍历一个对象的 property。

<ul>
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

data(){
	return {
		object: {
	      title: 'How to do lists in Vue',
	      author: 'Jane Doe',
	      publishedAt: '2016-04-10'
	    }
	}    
}

3、在 v-for 里使用值范围

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