Vue基础概述

Vue框架概述

什么是Vue框架

• 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

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不显示(隐藏元素)