Web前端Vue框架

前端MVC设计模式

• MVC设计模式就是将实现一个业务的所有代码划分为3部分.

• M: Model 模型undefined 数据模型 指和数据相关的代码

• V:View 视图undefined 指和页面相关的代码

• C:Controller控制器undefined 指将数据展示到页面中的过程代码

• MVC设计模式的Controller中需要频繁的进DOM操作(查找页面中元素undefined创建元素等)undefined会浪费资源undefinedMVVM设计模式可以解决此问题

前端MVVM设计模式

• MVVM设计模式也是将实现一个业务的所有代码划分为3部分.

• M:Model 模型undefined 数据模型 指和数据相关的代码

• V:View 视图undefined 指和页面相关的代码

• VM: ViewModel视图模型undefined 负责将页面中可能发生改变的元素和变量在内存中进行绑定undefined 当需要改变页面中元素时undefined只需要修改变量undefined 视图模型会不断监听变量值的改变undefined 当值发生改变时会从内存中找到对应元素让其跟着改变

VUE

• 目前最流行的前端框架undefined 此框架基于MVVM设计模式

• 两种使用方式:

  • vue.js文件引入html页面中使用

  • 脚手架环境下使用

以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。

l  Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js

l  unpkg：https://unpkg.com/vue@2.6.14/dist/vue.min.js

l  cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

• 引入外部的js文件两种方式:

  • • 把js文件下载到本地 然后引入的到自己的页面中

    

    • 直接引入一个CDN服务的地址         

VUE框架的工作流程

• VUE框架中 创建的Vue对象相当于是MVVM设计模式中的VM视图模型undefined 该对象会将页面中可能发生改变的元素和变量在内存中进行绑定undefined 并且会一直监听变量值的改变undefined 当值发生改变时会从内存中的对应关系找到对应的页面元素undefined并对其进行修改undefined 以后需要改变页面时只需要找到页面对应的变量undefined让变量改动 页面会自动跟着改变

VUE框架中的各种指令

• {{变量}} undefined 插值: 让此处的文本和变量进行绑定 undefined 不写在标签里面也可以使用

• v-text="变量"undefined 让元素的文本内容和变量进行绑定

• v-html="变量"undefined 让元素的html标签内容 和变量进行绑定

• v-bind:属性名="变量"undefined 让元素某个属性的值和变量进行绑定 可以省略v-bind 直接写:属性名进行绑定

• v-model="变量"undefined 让控件的值和变量进行双向绑定undefined 控件的值改变变量的值会跟着改变undefined同时变量的值改变也会影响控件的值undefined 应用场景: 当需要获取控件的值的时候使用双向绑定

• v-for="(对象undefined下标) in 数组" 让显示的元素内容和数组进行绑定

• v-if="变量" 让元素是否显示和变量进行绑定undefined true显示undefined false不显示(删除元素)

• v-else 让元素的显示状态和v-if元素的状态相反

• v-show="变量" 让元素是否显示和变量进行绑定undefined true显示undefined false不显示(隐藏)

• v-on:事件名="方法" 事件绑定undefined 绑定的方法必须写在Vue对象中的methods属性里面undefined @事件名="方法" 简写