前端基础-VUE入门教程(一)
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、VUE简介
-
- 1.1 搭建Vue开发环境
- 1.2 初始Vue
- 1.3 Vue模板语法
- 1.4 数据绑定
- 1.5 el和data的两种写法
- 1.6 MVVM模型
- 1.7 数据代理
-
- Object.defineProperty方法
- Vue中的数据代理
- 总结
前言
学习背景
由于作者之前虽然上手了Vue项目，但实际上并没有系统学习过Vue相关基础知识，对其中的原理理解得不够深刻，因此作者目前在看尚硅谷有关Vue的系列教程，并通过博客的形式将所学习的知识点进行记录，便于他人快速上手学习和自身复习~
一、VUE简介
vue：一套用于构建用户界面的渐进式框架。
特点：
- 采用组件化模式，提高代码复用率，且让代码更好维护；
- 声明式编码，让编码人员无需直接操作DOM，提高开发效率；
- 使用虚拟DOM+Diff算法，尽量复用DOM节点
1.1 搭建Vue开发环境
打开Vue官网，安装部分我们可以看到有开发版本和生产版本两种：开发版本适合在开发过程中使用，包含完整的警告和调试模式；生产版本适合在项目完成上线时使用，较为轻量级。
下载下来，分别是vue.js和vue.min.js文件：
可以通过下面代码使用vue：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初始Vuetitle>
<script src="vuejs/vue.js">script>
head>
<body>
body>
html>
但通常会出现以上报错：
- 错误一是因为没有下载Vue Devtools拓展工具，可以去谷歌商店下载安装拓展程序；
- 错误二是因为提醒你使用的是开发版本，当项目上线时使用生产版本。
输入vue.config可以看到以下全局配置信息：
productionTip属性为boolean类型，设置为false以阻止vue在启动时生成生产提示。
添加以下代码，错误二提示即可消失：
<script>
Vue.config.productionTip = false;
</script>
1.2 初始Vue
以下是一个使用vue的简单示例：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="js/vue.js">script>
head>
<body>
<div id="root">
<h1> Hello {{name}}h1>
div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: '#root', // 指定当前Vue示例为哪个容器服务，值通常为CSS选择器字符串
data: { // data中用于存储数据
name:'lalala'
}
})
script>
body>
html>
注意事项：
- 想让vue工作，就必须先创建一个实例，且要传入一个配置对象
- root容器中的代码依然复合html规范，只不过混入特殊的Vue语法
- root容器中的代码称为vue模板；
- Vue实例和容器是一一对应的；
- 真实开发中只有一个Vue实例，并且配合着组件一起使用
- {{XXX}}里面的XXX要写js表达式，且XXX可以自动读取到data中所有属性
- 一旦data中的数据发生改变，那么页面中用到数据的地方会自动更新
效果图如下：
1.3 Vue模板语法
Vue模板语法有2大类：
- 插值语法
功能：用于解析标签体内容
写法：{{XXX}}，XXX是js表达式，且可以直接读取到data中的所有属性 - 指令语法
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件。。。）
举例：v-bind:herf=“XXX” 或简写为 :herf=“XXX”，XXX同样要写js表达式，且可以直接读取到data中的所有属性
1.4 数据绑定
使用v-bind和v-model指令如下所示：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="js/vue.js">script>
head>
<body>
<div id="root">
<h1> Hello {{name}}h1>
单向数据绑定：<input type="text" name="" id="" v-bind:value="name">
双向数据绑定：<input type="text" name="" id="" v-model:value="name">
div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: '#root', // 指定当前Vue示例为哪个容器服务，值通常为CSS选择器字符串
data: { // data中用于存储数据
name:'lalala'
}
})
script>
body>
html>
- 打开开发者工具，选择vue，可以看到Root组件，点击Root即可看到绑定的数据
- 当修改数据时，可以注意到两个数据绑定指令都能成功更新数据；
- 当在v-bind对应的输入框中修改数据时，可以看到data绑定的数据没有发生改变；
- 然而当在v-model所对应的的文本输入框中修改数据时，可以看到data绑定的数据相应地发生变化，并且其他使用data数据的地方跟着发生改变。
总结如下：
Vue有两种数据绑定的方式：
- 单向绑定（v-bind）：数据只能从data流向页面
- 双向绑定（v-model）：数据不仅能从data流向页面，还能从页面流向data
注意：双向绑定一般都应用于表单类元素上（如：input、select等）
v-model:value=“XXX” 可以简写为v-model=“XXX”，因为v-model默认收集的是value值
1.5 el和data的两种写法
在控制台打印创建的Vue实例，可以看到以下信息：
- $符号后面是我们实例所对应的可以使用的属性，找到Vue原型所对应的的属性，如下所示：
除了使用el指定Vue实例为哪个容器服务时，还可以使用如下语句：
<script type="text/javascript">
Vue.config.productionTip = false;
const v = new Vue({
// el: '#root', // 指定当前Vue实例为哪个容器服务，值通常为CSS选择器字符串
data: { // data中用于存储数据
name:'lalala'
}
})
v.$mount('#root');
script>
- data也有以下两种写法：对象式和函数式；
// 第一种：对象式
data: {
name:'lalala'
}
// 第二种：函数式
data: function() {
return{
name:'lalala'
}
}
注意：采用函数式方法时，data函数可以将:function省略，注意不要使用箭头函数：当前写法this对应的vue实例，如果采用箭头函数的写法，所对应的的this是window。
1.6 MVVM模型
- M：模型（Model）:对应data中的数据
- V:视图（View）：模板
- VM：视图模型（ViewModel）：Vue实例对象
1.7 数据代理
Object.defineProperty方法
- 如果想给person对象增加age属性，可以使用Object.defineProperty方法，相比于直接添加，需要设置enumerable、writable、configurable属性才能被枚举、修改和删除；
- 如果想把number与age绑定，当number的值变化时，age所对应的值变化；同时当age所对应的值改变时，number所对应的的值也发生改变，此时需要使用getter和setter方法。
let number = 19;
let person = {
name: '张三',
sex: '男'
// age: number
}
Object.defineProperty(person, 'age', {
value: 18,
enumerable: true, // 控制属性是否可以被枚举
writable: true, // 控制属性是否可以被修改
configurable: true, // 控制属性是否可以被删除
get() {
return number;
},
set(value) {
number = value;
}
})
- 数据代理：通过一个对象代理对另一对象中属性的操作
简单的示例如下：
let obj = {x: 100};
let obj1 = {y: 200};
Object.defineProperty(obj1, 'x', {
get() {
return obj.x;
},
set(value) {
obj.x = value;
}
})
Vue中的数据代理
打印vm实例，可以看到也是通过getter和setter来进行数据代理：
实际上Vue数据代理的具体原理如下：
不难找到Vue实例中的_data属性，确实存储了data的相关数据，之后通过在Vue实例中创建相应的属性，通过Object.defineProperty完成数据代理。
总结
本文主要总结了Vue实例创建、模板语法、数据绑定、MVVM模型、数据代理等相关知识。