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