目录

• Vue模板应用
  • • • {{}} 变量插值
      • v-once 只会插值一次
      • v-html 对HTML代码插值
      • v-bind
        • HTML标签属性的插值
        • 在外部传递数值类型的数据到组件内部时, 必须使用v-bind指令的方式进行传递, 直接使用HTML属性设置的方式传递会将传递的数据作为字符串传递
      • v-on 监听、绑定事件
      • v-model 双向绑定
      • 条件渲染
        • v-if 如果其指定的变量为true, 则渲染这个元素
        • v-else-if
        • v-else
        • v-show
      • 循环渲染
      • v-for

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-model.trim 去空格
v-model.number 转为数字

条件渲染

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 为自定义函数