Vue框架概述
什么是Vue框架
- Vue是一种盛行的渐进式JavaScript框架，用于构建Web用户界面。它具有易学、轻量级、机动性强、高服从等特点，并且可以与其他库和项目集成。是现在最盛行的前端框架之一.
- 框架的两种用法:
- 多页面应用: 在html页面中引入vue.js框架文件
- 单页面应用:通过脚手架的方式使用VUE框架(下阶段开始打仗)
如何引入vue.js
- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
- <script src="js/vue.min.js"></script>
Vue框架执行原理
代码中new 的VUE对象就相当于是MVVM计划模式中的VM视图模型, 此对象负责将页面中发生改变的元素和data里面的变量在内存中绑定, 并且会不断监听变量值的改变, 当检测到变量值发生改变时, 会自动从内存中找到与之对应的元素,并且让元素的内容跟着发生改变.
基本指令
文本相关指令
- {{变量}}: 插值, 让当前位置的文本内容和变量举行绑定
- v-text=“变量” 让元素的文本内容和变量举行绑定
- v-html=“变量” 让元素的标签内容和变量举行绑定
属性绑定和双向绑定
- :属性名=“变量” 让元素的某个属性的值和变量举行绑定
- v-model=“变量” 双向绑定,让控件的值和变量举行双向绑定, 当需要获取控件的值的时候使用
- 所谓双向绑定,就是当变量的值发生改变时,与其绑定的控件内容会跟着发生改变, 当用户操作控件内容时,对应的变量也会跟着发生改变.
事件绑定
- @事件名=“方法” 给元素添加事件, 需要将事件触发的方法声明在methods里面
v-for循环遍历指令
- v-for=“(变量,下标) in 数组” 循环遍历指令, 遍历的同时会生成元素,当需要让页面的内容和数组举行绑定时使用
显示隐蔽相关指令
- v-if=“变量” 让元素是否显示和变量举行绑定, true显示 false不显示(删除元素)
- v-else 让元素的显示状态和v-if取反
- v-show=“变量” 让元素是否显示和变量举行绑定, true显示 false不显示(隐蔽元素)
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
