Web-VUE框架

VUE框架

• VUE框架是目前最流行的前端框架之一, 是基于MVVM设计模式的框架

• 此框架在第三阶段中接触到的是一个js文件, 使用此框架时只需要将此文件引入到自己的页

  面中即可, 第四个阶段会接触脚手架方式使用VUE

• 引入VUE框架的地址:

• Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.6.14/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.js

如何加载CDN服务器上面的js文件

• 把CDN服务器上的js文件下载到本地是如何加载

• VUE框架的运行原理:

  Vue对象相当于是MVVM设计模式的VM(视图模型),负责将页面中可能发生改变的元素和某

个变量进行绑定, 同时会不断的监听变量值的改变,当变量的值发生改变时Vue对象会从绑定关系

中找到变量所对应的页面元素并将元素内容进行改动

VUE相关指令

• {{变量}}: 插值, 让此处的文本内容和变量进行绑定

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

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

• v-bind:属性名=“变量” 让元素的某个属性的值和变量进行绑定, 简写是去掉v-bind直接写 :

  属性名

• v-model=“变量”,双向绑定,主要用在各种控件中, 变量的值会影响控件的值, 控件的值也会影

响变量的值

• v-on:事件名=“方法”; 事件绑定, @事件名=“方法”; 简写

变量的值

• v-on:事件名=“方法”; 事件绑定, @事件名=“方法”; 简写

• v-for=“变量 in 数组”; 循环遍历指令, 遍历的过程中会自动生成页面元素