Web Vue I

Web Vue I

1.前端MVC设计模式

 MVC设计模式,其实就是将前端实现某个业务的所有代码划分为三部分
 Model: 模型, 指数据模型,这个数据一般来自于服务器
 View: 视图, 指页面标签内容
 Controller:控制器, 指将数据展示到视图中的过程代码

 前端MVC设计模式弊端: 需要在Controller控制器部分频繁进行DOM(遍历查找元素的代码)操作, 会影响执行效率.

2.M,V,VM设计模式

 Model: 模型, 指数据模型,这个数据一般来自于服务器
 View: 视图, 指页面标签内容
 ViewModel:视图模型, 将页面中可能发生改变的元素和某个变量在内存中进行绑定,当变量的值发生改变时会从内存中直接找到对应的元素让其改变.

3.Vue

 Vue框架是目前最流行的前端框架
 Vue对象相当于MVVM设计模式中的VM, 负责将页面中可能发生改变的元素和变量进行绑定, 绑定完之后会不断监听变量的改变, 当变量的值发生改变时会自动找到对应的元素并改变其显示内容.

 相关指令:
 {{变量}}插值, 让此处的文本内容和变量进行绑定
 v-text=“变量”, 让元素的文本内容和变量进行绑定
 v-html=“变量”, 让元素的html内容和变量进行绑定
 v-bind:属性名=“变量”, 让元素的xxx属性和变量进行绑定 可以省略掉v-bind
 v-model=“变量”, 双向绑定, 当变量的值发生改变页面会跟着改变, 页面的内容改变时变量也会跟着改变,只有使用form表单中的控件时才会涉及到双向绑定.
 v-on:事件名=“方法”, 事件绑定 简写@事件名=“方法” , 调用的方法必须声明在Vue里面的methods里面

4.Vue指令(续)

 v-for=“(变量,i) in 数组”; 遍历数组 同时重复生成当前标签,数量和数组中对象的数量一致
 v-if=“变量” , 变量值为true时显示元素 ,为false时 删除元素
 v-else 和v-if结合使用 取反
 v-show=“变量” , 变量值为true时显示元素 ,为false时 隐藏元素(需要频繁切换显示状态时使用)

5.ElementUI

 官网地址: https://element.eleme.cn

我是将军；我一直都在，。！