上海建网站的公司自媒体人专用网站
一、vue2特点
1、特点
（1）MVVM框架
（2）响应式的
（3）支持组件化的（自己封装自定义组件）
（4）丰富的指令（DOM功能的抽象）
（5）基于选项的（templete、data、computed、watch、methods）
选项：固定的东西放在固定的位置（react没有选项所以更灵活更难）
react相当于空白的房间，整理东西
vue相当于有家具的房间，整理东西
（6）vue文档集中（官网都有）
（7）vue生态丰富且简单
二、安装
1、脚手架用npm安装
2、用script引入
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>例子代码：
<html><title>hello world</title><head></head><body><div id="app"><!-- 这个作用域中都是vue的地盘 --><h1 v-text="msg"></h1> <!-- v-text就是指令 --><hr><h1 v-text="num"></h1><button @click="add">vue 增加num</button><hr><h1 id="num2">0</h1><button onclick="addNum()">JS 增加num2</button><hr><h1 v-bind:style="{color: cc}">我是变色龙</h1><button @click="change">变色</button><hr><h1 v-if="show">我是谁</h1><button @click="toggle">显示/隐藏</button><hr></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>console.log("Vue", Vue)//这种方式叫单页面应用程序const app = new Vue({//下面el、data等都是vue官方提供的选项（语法规定）el: '#app', //挂载节点，把vue组件（响应式系统）挂载到真实DOM上data: { //声明变量的部分msg: 'HelloWorld',num: 1,cc: 'black',show: true},methods: { //声明方法的部分add() {this.num++ //只要改这个变量就可以了，因为已经绑定了},change() {this.cc = 'red'},toggle() {this.show = !this.show //直接取反就好了}}})</script><script>function addNum() {var num = document.getElementById("num2").innerText;num++;document.getElementById("num2").innerText = num;}</script></body>
</html>3、效果
（1）F12控制台中会打印vue的构造函数
Vue ƒ Vue(options) {if (!(this instanceof Vue)) {warn$2('Vue is a constructor and should be called with the `new` keyword');}this._init(options);}（2）vue做点击事件和js做点击事件比较
<button onclick="addNum()">JS 增加num2</button>js是添加事件，通过dom选择器选择这个标签，修改text
<button @click="add">vue 增加num</button>vue是响应式
三、从jquery时代过度到mvvm框架
1、jquery开发思想
DOM开发思想，当我们需要在交互事件中改变视图时，使用DOM选择器选中目标节点，再使用DOM方法直接改变视图
2、vue开发思想
声明式思想，先在data选项中声明一个合适的变量，再在交互事件中改变这个声明式变量即可，视图自动更新。这是一种间接的操作
3、例如改变样式
（1）先声明个变量cc
（2）再通过指令让这个变量和标签绑定
（3）改变cc，视图自动更新
4、渐进式
vue可大可下，可单页面、可做成一个复杂的管理系统
四、选项说明
1、el
挂载节点，把vue组件（响应式系统）挂载到真实DOM上。对于<div id="app">这个作用域中都是vue的地盘。在这个作用域中可以用指令，否则无法识别
2、data
专门用于定义声明式变量，这些声明式变量有什么特点？当声明式变量变化时，它所对应的视图节点自动更新，这就是所谓的响应式
3、methods
专门用于定义函数方法的地方
五、示例代码用到的指令和说明
1、v-text
改变innerText
2、@click和v-on click
相当于addEventListener，绑事件
3、v-bind
动态绑定属性
4、new Vue(...)
构造函数，创建一个Vue的组件，new的Vue要给选项，所以在()内要给一层{}里面放选项
5、v-if
v-if指令的用法和v-show指令的用法相同，都是用来控制DOM元素的显示或隐藏
六、知识源头
1、从官方文档中获取知识点