Vue模板语法

1.Vue实例

在vue2.x版本中，需要通过new Vue()构造方法来创建一个新的Vue应用实例

var app = new Vue({
/*选项*/
})

new Vue()构造方法将接收一个根组件选项对象作为参数，该对象可以包含指定dom元素、数据、方法、组件、生命周期钩子等，new Vue()构造方法返回应用程序实例本身。
其中，需要通过el来指定一个dom元素，在该dom元素上装载Vue实例的根组件，代码如下

<<div id="app"></div>
//可以将链接复制到浏览器打开右键另存到本地导入到项目中使用
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
		   var app  = new Vue({
			   el:"#app",
			   data:{
			   },
			   methods:{
			   },
			   created(){
			   }
		   })
</script>

这样该id = app的div dom元素中的所有数据变化会被Vue框架所监控，从而实现数据的双向绑定。

2.组件实例选项

组件中可以设置的选项有data、methods、props、created等，其中最基础的是data数据及methods方法

2.1 data数据选项

在data选项中可以定义数据，这些数据可以在实例对应的模板（例如id=app的div）中进行绑定并使用。
data是一个数据对象

<script>
		   var app  = new Vue({
			   el:"#app",
			   data:{
				   shengao:185
			   }
		   })
		   console.log(app.shengao) //=>185
		   //修改app.shengao的值
		   app.shengao = 190
		   console.log(app.shengao) //=>190
</script>

这些数据属性仅在首次被创建时添加，可以对尚未提供所需值的数据使用null、undefined或其它占位的值。

2.2 method选项

在method选项中可以定义方法，并直接通过组件实例访问这些方法，或者在指令表达式中使用这些方法，方法中的this自动绑定为组件实例。

<script>
		   var app  = new Vue({
			   el:"#app",
			   data:{
				   shengao:185
			   },
			   methods:{
				   gaibianshengao(shuzhi){
					   //this 指向该Vue组件的实例
					   this.shengao = this.shengao+shuzhi;
				   }
			   }
		   })
		   console.log(app.shengao) //=>185
		   //调用方法修改app.shengao的值
		   app.gaibianshengao(5)
		   console.log(app.shengao) //=>190
</script>

注意：不要使用箭头函数来定义method函数（如gaibianshengao:()=>this.xxx）这是因为箭头函数绑定了父级作用域的上下文，所以this 不会按照期望指向组件实例，this.xxx将会是未定义的

3.Vue生命周期

每个组件在被创建时都要经过一系列的初始化过程。在这个过程中会运行一些叫作生命周期钩子的函数。
比如：created钩子函数可以用来在一个实例被创建之后执行代码。

var app = new Vue({
	//要绑定的页面元素
	el:"#app",
	data:{
		num:1
	},
	//生命周期函数：created(){}:Vue实例创建之后调用的函数，监听Vue的创建，一旦Vue创建成功之后 自动执行的函数
	created(){
		//初始化数据
		this.num = 2	
	}
})
//在控制台输出app的num的值为2
console.log(app.num)//--》2

4.插值

插值（“{{ }}”双大括号）将会在页面渲染时渲染Vue中data中对应属性的值，无论什么时候，只要是Vue中data中的属性的值发生变化，插值跟着变
例如如下代码：

<div id="app">
			<!-- 双大括号：插值 {{num}}将会取到Vue中data中num的值，无论什么时候，只要是Vue中data中的num的值发生变化，插值跟着变-->
			<!-- 插值中可以进行运算 -->
			{{num+1}}  <!-- 2 -->
			{{num}}+1  <!-- 2+1 -->			
</div>
		
<script>
	//创建Vue实例对象，相当于java中的有参构造({})
	var app = new Vue({
		//要绑定的页面元素
		el:"#app",
		data:{
			num:1
		}
	})
	//修改num的值
	app.num = 2;
</script>