Vue模板应用

模板属于视图层

{{}} 变量插值

v-once 只会插值一次

v-html 对HTML代码插值

v-bind

• HTML标签属性的插值

v-bind:id = "#######" v-bind:class = "#######"  //可简写 :id = "#####" :class = "#####" 

• 在外部传递数值类型的数据到组件内部时, 必须使用v-bind指令的方式进行传递, 直接使用HTML属性设置的方式传递会将传递的数据作为字符串传递

v-on 监听、绑定事件

v-on: click = "########"  //可简写 @click = "#######" 

v-model 双向绑定

条件渲染

v-if 如果其指定的变量为true, 则渲染这个元素

v-else-if

v-else

v-if = "#####" v-else-if = "######" v-else 

v-if指令必须添加到一个HTML元素上, 可以使用div或template标签对元素分组包装

v-show

和v-if相同, 不过不能与v-else-if ,v-else混用, 初识性能消耗性能高, v-if切换性能消耗高

循环渲染

v-for

v-for = "####[item] in ####[list]"  // 也可以对js对象进行v-for遍历 v-for = "(value, key, index) in person"  // v-for支持在渲染前对数据进行处理 v-for = "(value, key, index) in handle(list)" handle 为自定义函数