vue模板语法和数据绑定以及data的两种使用方法

Vue模板语法有2大类

1.插值语法 {{}}
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法 以v-开头
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。

Vue中有2种数据绑定的方式

1.单向绑定 v-bind
数据只能从data流向页面。
v-bind: 绑定事件 v-bind:href=“xxx” 或 简写为 :href=“xxx”
2.双向绑定 v-model
数据不仅能从data流向页面，还可以从页面流向data。
注：
（1）双向绑定一般都应用在表单类元素上（如：input、select等）
（2）v-model:value 简写为 v-model，因为v-model默认收集的就是value值

data的两种使用方法

(1).对象式
(2).函数式
如何选择：目前哪种写法都可以，当学习组件时，data必须使用函数式，否则会报错。

总结：
xxx.toUpperCase()让data里的xxx内容大写
v-bind:href=“xxx” 简写为 :href=“xxx”
v-model:value 简写为 v-model
v-on:xxx 简写为 @xxx

		

			
Hello，{{name.toUpperCase()}}，{{address}}
			
			点我去{{school.name}}学习1
            
			点我去{{school.name}}学习2		
				
			
			单向数据绑定：

			双向数据绑定：


            点我提示信息
			点我提示信息1（不传参）
			点我提示信息2（传参）

           
           

           点我提示信息
           
           

           点我提示信息   
           
           
           点我提示信息
           
           
div1
           
div2
           
           
           

           点我提示信息
           
           
           

           
1
           
2
           
3
           
4