Vue模版语法&2种数据绑定方式

Vue模板语法有2大类:

        1.插值语法:

                功能:用于解析标签体内容。

                写法: {{xx}} ，其中xx是js表达式,且可以直接读取到data中的所有属性。

<p> {{value}} </p>

//在双大括号中，除了可以简单的传值外，还可以使用表达式，
//每个绑定都只能包含单个表达式。
<p> {{value.split().reserve().join()}} </p>
//在 JavaScript 中，字符串的 split() 方法可以将字符串
//分割成一个由单词组成的数组。然后，reverse() 方法可以
//反转数组的元素顺序，最后使用 join() 方法以字符串形式
//将数组的元素连接起来。

        2.指令语法:

                功能:用于解析标签（包括:标签属性、标签体内容、绑定事件.....）

                举例:v-bind: href="xxx”或简写为:href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。

                备注: Vue中有很多的指令，且形式都是:v-????，此处我们只是拿v-bind举个例子。

v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素

他们只能是兄弟元素

v-else-if上一个兄弟元素必须是v-if

v-else上一个兄弟元素必须是v-if或者是v-else-if

v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"

v-for：类似JS的遍历，

遍历数组: v-for="item in items", items是数组，item为数组中的数组元素

遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

v-bind

v-on

v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，
根据表单上的值，自动更新绑定的元素的值   

v-for/v-model一起绑定[多选]复选框和单选框  

---------------------------------------------------------------------------------------------------------------------------------
 

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