VUE_模板语法

1 指令

1.1 v-bind，绑定属性

语法示例如下：

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

代码示例如下

<div id="app">
	<a :href="url">a标签</a>
</div>
<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    let vm = new Vue({
  	  el: '#app',
  	  data:{
  	 	 url: 'https://www.baidu.com'
   	 }
    });
</script>

1.2 v-on，绑定事件

语法示例如下：

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

代码示例如下：

<div id="app">
	<button type="button" @click="count++"> click this {{count}} times</button>
</div>
<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let vm = new Vue({
    el: '#app',
    data:{
        url: 'https://www.baidu.com',
        count: 0
    }
    });
</script>

1.3 v-if，v-else，条件渲染

代码示例如下：

<div id="app">
	<p v-if="hah">hah</p>
	<p v-else>no hah</p>
</div>
<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	let vm = new Vue({
		el: '#app',
		data:{
			hah: true
		}
	});
</script>

2.1.0 新增

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

1.4 v-for，列表渲染

代码示例如下：

<div id="app">
	<li v-for="item of items">
		{{ item.message }}		
	</li>
</div>
<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	let vm = new Vue({
		el: '#app',
		data:{
			items:[
				{
					message: 'abc'
				},
				{
					message: 'def'
				}
			]
		}
	})
</script>

2 计算属性

详见：https://cn.vuejs.org/v2/guide/computed.html

计算属性是基于它们的响应式依赖进行缓存的。每当触发重新渲染时，调用方法将总会再次执行函数。

代码示例如下：将message 反转输出

<div id="app">
	<p>
		{{ message }}
	</p>
	<p>
		{{ change_message }}
	</p>
</div>
<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	let vm = new Vue({
		el:'#app',
		data:{
			message: 'This is a message'
		},
		computed:{
			change_message:function(){
				return this.message.split('').reverse().join('');
			}
		}
		
	});
</script>

3 Vue Loader - - - 单文件组件规范

模板代码示例：

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

模板解析

1. template标签内时HTML内容
2. style标签内时CSS内容
3. script标签内是js内容，它的默认导出应该是一个 Vue.js 的[组件选项对象]