Vue模板

目录

1、使用Vue的基本流程

(1)引入Vue库

(2)创建视图(view)

(3)创建模型(Model)

(4)创建vue实例，将model挂载到View---实现ViewModel

2、模板作用：帮助用户通过数据来驱动视图的渲染

3、模板插值：

(1)使用"{{ }}"运算将模型中的数据插入到视图中

(2)插入标签：使用v-html指令

(3)插入文本：使用v-text指令

4、条件渲染

(1)v-if：

(2)v-show：

(3)v-if和v-show的区别：

5、循环渲染：通过v-for指令将数组或集合中的数据渲染到视图中

6、其他内置指令：

(1)v-bind：将页面元素的属性和模型中变量进行绑定

(2)v-on：给元素绑定事件

(3)v-model：将input的值和模型中的变量进行绑定。实现数据与视图的双向绑定

---

1、使用Vue的基本流程

(1)引入Vue库

(2)创建视图(view)

(3)创建模型(Model)

(4)创建vue实例，将model挂载到View---实现ViewModel

2、模板作用：帮助用户通过数据来驱动视图的渲染

3、模板插值：

(1)使用"{{ }}"运算将模型中的数据插入到视图中

(2)插入标签：使用v-html指令

(3)插入文本：使用v-text指令

注意：在vue中使用v-开头的都是Vue指令

4、条件渲染

渲染就是将模型中的数据显示到视图中。条件渲染就是根据表达式的值来决定是显示还是隐藏内容

(1)v-if：

(2)v-show：

(3)v-if和v-show的区别：

A、实现方式不同

        v-if底层采用DOM的appendChild方法创建元素添加到页面中

        v-show是通过CSS的display属性来控制是否显示元素

B、加载性能：v-if快，v-show慢

C、切换开销：v-if的开销大,v-show的开销小

5、循环渲染：通过v-for指令将数组或集合中的数据渲染到视图中

6、其他内置指令：

(1)v-bind：将页面元素的属性和模型中变量进行绑定

(2)v-on：给元素绑定事件

a、绑定一个事件

<div v-on:事件名="函数名"></div>

b、绑定多个事件

<div v-on="{事件名1:函数名,事件名2:函数名}"></div>

(3)v-model：将input的值和模型中的变量进行绑定。实现数据与视图的双向绑定

示例：实现待办任务列表的应用