介绍:
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的一款前端框架, 可以让程序员高效的开发前端页面