vue基础一：认识vue、数据绑定（v-bind\v-model）、数据代理
-
-
-
-
- 一、js及vue开发基本了解
- 二、初识Vue：MVVM模式
- 三、模板语法
- 四、数据绑定：单向、双向
- 五、el与data的两种写法
- 六、Vue数据代理原理：Object.defineproperty()
-
- 6.1 Object.defineproperty()的使用：
- 6.2 Object.defineproperty()基本配置项：
- 6.3 Object.defineproperty()高级配置项（重要）：get、set
- 6.4 数据代理-定义
- 6.5 Vue实现数据代理：了解vue实例中的属性
一、js及vue开发基本了解
0.node.js的安装为初始条件，再安装Vue的devtools(进行百度)；
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
2.容器里面的代码依然要符合html规范，只不过要混入一些Vue特殊语法；
3.容器里面的代码被称为【Vue模板】；
4.容器和vue对象是一一对应关系，即：1.不可能出现多个对象指定一个容器，2.一个对象指定多个容器；
5.真实的开发中只有一个Vue实例，并且会配合着组件一起使用；
6.{{xxx}}中xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
7.一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新；
二、初识Vue：MVVM模式
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MVVM模型title>
<script src="../status/js/vue.js" type="text/javascript" charset="utf-8">script>
head>
<body>
<div id="app">
<h1>名称：{{name}}h1>
<h1>地址：{{address}}h1>
<h1>{{$children}}h1>
div>
body>
<script type="text/javascript">
const vm = new Vue({
data:function(){
return {
'name':'环球中心',
'address':'成都环球中心'
}
}
})
vm.$mount('#app');
console.log(vm);
script>
html>
三、模板语法
Vue模板语法有2大类：
1.插值语法：
功能：用于解析标签体内容
2.指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件……）。
举例：v-bind:href="xxx" 或者 简写为 :href = "xxx",xxx同样要写js表达式。且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举例；
<div id="root" :key="name">
<h1>插值语法h1>
<h3>你好，{{name}}h3>
<hr/>
<h1>指令语法h1>
<a :href="school.url">{{school.name}}一下a>
<a v-bind:href="url" :v = "hello">{{name}}一下a>
div>
四、数据绑定：单向、双向
Vue中有2种数据绑定的方式：
1.单向绑定（v-bind）:数据只能从data流向页面
2.双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data
备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为v-model，因为v-model默认收集的就是value值。
<div id="app">
单向数据绑定：<input type="text" name="" id="" v-bind:value="name" /><br />
双向数据绑定：<input type="text" name="" id="" v-model:value="name" />
简写：双向数据绑定：<input type="text" name="" id="" v-model="name" />
div>
<h2 v-model:xx="name">大家好h2>
五、el与data的两种写法
data与el的两种写法：
1.el的两种写法：
（1）new Vue时配置el属性
（2）先创建Vue实例，随后再通过vm.$mount("#root")指定el的值
2.data有两种写法：
（1）对象式
（2）函数式，可以简写省略:function
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错
3.一个重要的原则：
由Vue管理的函数，一定不用写箭头函数，一旦写了箭头函数，this就不再是Vue实例了；
<script type="text/javascript">
new Vue({
el:'#app',
data:{}
})
const v = new Vue({
data:{}
})
v.$mount('#app')
const v = new Vue({
data:{}
})
setTimeout(()=>{
v.$mount('#app')
},1000)
script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{}
})
const v = new Vue({
data:function() {
console.log(this)
return{
name:{}
}
}
})
v.$mount('#app')
const v = new Vue({
data() {
console.log(this)
return{
name:{}
}
}
})
v.$mount('#app')
script>
六、Vue数据代理原理：Object.defineproperty()
6.1 Object.defineproperty()的使用：
Object.defineProperty(person,'age',{
value:18
})
6.2 Object.defineproperty()基本配置项：
let num = 18
let person = {
name:'张三',
sex:'男'
}
Object.defineProperty(person,'age1',{
value:18,
enumerable:true,//控制属性是否可以枚举，默认false
writable:true,//控制属性是否可以被修改,默认false
configurable:true,//控制属性是否可以被删除，默认false
//上面4项是普通的配置项，下面是高级配置项
})
6.3 Object.defineproperty()高级配置项（重要）：get、set
let num = 18
let person = {
name:'张三',
sex:'男'
}
Object.defineProperty(person,'age1',{
// value:18,
// enumerable:true,//控制属性是否可以枚举，默认false
// writable:true,//控制属性是否可以被修改,默认false
// configurable:true,//控制属性是否可以被删除，默认false
//上面4项是普通的配置项，下面是高级配置项:当有人读取关联对象person的age1属性时，get函数（getter）就会被调用，且返回值是age1的值；
get:function(){
return num
},
//当有人修改关联对象person的age1属性时，set函数（setter）就会被调用，且会收到是age1的被修改的具体值 即：value；
set:function(value){
num = value
}
})
6.4 数据代理-定义
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<script type="text/javascript">
let obj = {x:100}
let obj22 = {y:300}
Object.defineProperty(obj22,'x',{
get:function(){
return obj.x
},
set:function(value){
obj.x = value
}
})
script>
body>
html>
6.5 Vue实现数据代理：了解vue实例中的属性
