Vue笔记1（Vue的概述，初始Vue，模板语法，数据绑定，el与data的两种写法，MVVM模型，数据代理）
Vue
- Vue的概述
-
- 初始Vue
- 1、Hello案例
- 2、注意区分js表达式和js代码（语句）
-
- 模板语法
-
- 数据绑定
-
- el与data的两种写法
-
- MVVM模型
- 数据代理
- 1、回顾Object.defineProperty
- 2、何为数据代理
- 3、Vue中的数据代理
Vue的概述
1、Vue是什么？
一套用于构建用户界面的渐进式JavaScript框架
2、Vue的特点
（1）采用组件化模式，提高代码的复用率，且让代码更好维护
（2）声明式编码，让编码人员无需直接操作Dom，提高开发效率
初始Vue
1、Hello案例
1、想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
2、root容器中的代码依然符合html的规范，只不过混入了一些特殊的vue语法
3、root容器里的代码被称为Vue模板
4、Vue实例和容器是一 一对应的
5、真实开发中只有一个Vue实例，并且会配合着组件一起使用
6、{{ xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
7、一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新
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 type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="root">
<h1>Hello,{{name}}h1>
div>
body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
//创建Vue实例
new Vue({
el: '#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data: { //data中用于存储数据，数据提供el所指定的容器去使用，值我们暂时先写成一个对象
name: '周杰伦'
}
})
script>
html>
2、注意区分js表达式和js代码（语句）
1、表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
（1）a
（2）a+b
（3）demo(1)（函数调用）
（4）x===y ? ‘a’ : ‘b’（三目表达式）
2、js代码（语句）
（1）if( ) { }
（2）for( ) { }
模板语法
Vue的模板语法有两大类：
1、插值语法
- 功能： 用于解析标签体内容
- 写法： {{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2、指令语法
- 功能：用于解析标签（包括： 标签属性，标签体内容，绑定事件……）。
- 举例：v-blind:href=“xxx” 或 简写为 :href=“xxx” ，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
- 备注：Vue中有很多的指令，且形式都是v-???，此处用v-blind举例
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>模板语法title>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="root">
<h1>
插值语法
h1>
<h3>你好，{{name}}h3>
<hr/>
<h1>指令语法h1>
<a v-bind:href="school.url.toUpperCase()">点我去{{school.name}}学习1a>
<a :href="school.url">点我去{{school.name}}学习2a>
div>
body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
new Vue({
el: '#root',
data: {
name: 'jack',
school: {
name: '百度',
url: 'http://www.baidu.com'
}
}
})
script>
html>
数据绑定
Vue中有两种数据绑定的方式：
1、单项绑定（v-bind）: 数据只能从data流向页面
2、双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data。
- 备注：1、双向绑定一般都应用在表单类元素上（如：input，select等） 2、v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值
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>数据绑定title>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="root">
单项数据绑定：<input type="text" :value="name">
<br/> 双项数据绑定： <input type="text" v-model="name">
<br/>
div>
body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
new Vue({
el: '#root',
data: {
name: '百度'
}
})
script>
html>
el与data的两种写法
1、el有两种写法：
- new Vue 时配置el属性
- 先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值
2、data的两种写法
- 对象式
- 函数式
- 如何选择：目前哪种写法都行，以后学习到组件时，data必须使用函数式，否则会报错
3、一个重要原则
- 由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了，而是window
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>04_el与data的两种写法title>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="root">
<h1>你好，{{name}}h1>
div>
body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
/*//el的两种写法
const v = new Vue({
//el: '#root',//第一种写法
data: {
name: '世界'
}
})
console.log(v);
v.$mount('#root');//第二种写法*/
//data的两种写法
new Vue({
el: '#root',
//data的第一种写法：对象式
/*data: {
name: '世界'
}*/
//data的第二种写法：函数式
/*data: function() {
console.log("@@@", this);//此处的this是Vue实例对象
return {
name: '世界'
}
}*/
//简写
data() {
console.log("@@@", this); //此处的this是Vue实例对象
return {
name: '世界'
}
}
})
script>
html>
MVVM模型
1、M：模型（Model）： data中的数据
2、V：视图（View）：模板代码
3、VM：视图模型（ViewModel）：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>MVVM模型title>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="root">
<h1>学校名称:{{name}}h1>
<h1>学校地址：{{address}}h1>
<h1>测试一下1:{{1+1}}h1>
<h1>测试一下2:{{$options}}h1>
<h1>测试一下3:{{$emit}}h1>
<h1>测试一下4:{{_c}}h1>
div>
body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
const vm = new Vue({
el: '#root',
data: {
name: '北大',
address: '北京'
}
})
script>
html>
观察发现
- data中的所有属性，最后都出现在了vm身上
- vm身上的所有属性及Vue原型上的所有属性，在Vue模板中都可以直接使用
数据代理
1、回顾Object.defineProperty
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>回顾Object.definePropertytitle>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<script type="text/javascript">
let number = 18;
let person = {
name: '张三',
sex: '男',
}
Object.defineProperty(person, 'age', {
// value: 18,
// enumerable: true, //控制属性是否可以枚举，默认值是false
// writable: true, //控制属性是否可以被修改，默认值是false
// configurable: true //控制属性是否可以被删除，默认值是false
//当有人读取person的age属性时， get函数(getter)会被调用，且返回值就是age的值
get() {
console.log("有人读取age属性");
return number;
},
//当有人修改iperson的age属性时， set函数(setter)会被调用，且会收到修改的具体值
set(value) {
console.log("有人修改了age属性,且值是", value);
number = value;
}
})
//console.log(Object.keys(person)); //以数组的形式遍历
console.log(person);
script>
body>
html>
2、何为数据代理
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>何为数据代理title>
head>
<body>
<script type="text/javascript">
let obj = {
x: 100
};
let obj2 = {
y: 200
};
Object.defineProperty(obj2, 'x', {
get() {
return obj.x;
},
set(value) {
obj.x = value;
}
})
script>
body>
html>
3、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>Vue中的数据代理title>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="root">
<h2>学校名称：{{name}}h2>
<h2>学校地址：{{address}}h2>
div>
body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
const vm = new Vue({
el: '#root',
data: {
name: '世界',
address: '北京'
}
})
script>
html>
1、Vue中的数据代理
- 通过vm对象来代理data对象中属性的操作（读/写）
2、Vue中数据代理的好处
- 更加方便的操作data中的数据
3、基本原理
- 通过Object.defineProperty( )把data的对象中的所有属性添加到vm上。 为每一个添加到vm的属性，都指定一个getter/setter。 在getter/setter内部去操作（读/写）data中对应的属性。
《-------------------------分割线--------------------------》
1、如何验证这两条线
-
验证getter
vm.name等于data中name -
验证setter
更改vm.name中的值，vm._data.name的值也会改变