前端基础之《Vue(1)—简介》
一、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、从官方文档中获取知识点