VUE之实例绑定、文本插值、基本指令、语法糖

（1）数据绑定与Vue案例
（2）实例与数据绑定步骤
（3）Vue实例属性
（4）模板-文本插值
（5）基本指令：v-html、v-pre、v-once、v-bind、v-on
（6）语法糖

1.数据的双向绑定、实时更新（在控制台改变内容）
Vue.js最核心的功能：数据的双向绑定

		

			
			
你好，{{name}}
		
		

2-1.声明数据：（1）显式声明数据 创建VUE实例3部曲

{{age}}
		

2-2.声明数据：（2）指向已有变量

{{age}}
		

Vue实例属性：
1、Vue实例就是app，Vue实例属性就是app的属性。
2、所有的选项前面加上$都是Vue实例的属性。
$el：表示在Vue实例上挂载的DOM对象属性。app.$el === document.getElementById(“app”) //true
3、$data：表示在Vue实例上挂载的数据属性。Vue实例代理了data选项中的所有属性：获取属性app.messageapp.$data.age=== app.age//true

模板-文本插值：
（1）语法格式：{{Vue实例数据变量}}
特性：（1）改变Vue实例数据变量的值，页面中文本插值的部分会重新渲染。（控制台改变内，标签中内容随之改变）

{{info}}
		

特性：（2） 文本插值也可以进行基本运算和对象方法的执行

			三目运算：{{number%2?'奇数':'偶数'}}

			提取数组片段：{{arr.slice(0,3)}}

			数组长度：{{arr.length}}

			数据运算：{{number%2}}
		
		

指令是Vue.js模板里最常用的一项功能，带有v-前缀

常用基本指令（1）v-html--------取值为一个带有HTML标记代码的变量，该指令会将变量中的HTML代码翻译为最终的显示效果。

常用基本指令（2）（单向绑定）v-once-------该指令无需取值，让双向绑定变为单向绑定(在控制台不能改变内容)

{{info}}
		

常用基本指令（3）（跳跃编译）v-pre----------该指令无需取值，跳过文本插值的编译过程，显示文本原样

{{info}}
		

常用基本指令（4）（属性绑定）v-bind动态属性：常用于动态绑定HTML元素的属性，例如id、class、href、src等属性。改变任一方数据后都会实时更新。

			链接
			
		
		

常用基本指令（5）v-on事件绑定—监听DOM事件
******事件处理函数必须书写在Vue实例的methods选项下

		

			{{info}}
		
		
		
		
		

			点击次数：{{info}}
		
		

语法糖是指在不影响功能的情况下，添加某种方法，实现相同的效果，进而方便开发
1.v-bind----------可以省略v-bind，直接写一个冒号：

			链接
			
		
		

2.v-on------可以省略v-on，直接写一个@,事件处理函数必须书写在Vue实例的methods选项下

			点击次数：{{info}}