Vue前端框架

介绍:

Vue.js(简称Vue)是一个用于创建用户界面的开源MVVM前端JavaScript框架, 也是一个创建单页应用的Web应用框架。Vue.js由尤雨溪创建，由他和其他活跃的核心团队成员维护

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

两种使用方式:

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

脚手架环境下使用

以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。  Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js  unpkg：https://unpkg.com/vue@2.6.14/dist/vue.min.js  cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.j 引入外部的js文件两种方式:

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

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

Vue框架的工作流程

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

Vue框架中的各种指令

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

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

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

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

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

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

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

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

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

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

ElementUI

目前比较流行的前端框架,基于HTML、CSS、Vue、JavaScript的一款前端框架, 可以让程序员高效的开发前端页面