day01
1. Vue简介
一套用于构建用户界面的 渐进式框架
2. 初识Vue
2.1 搭建Vue开发环境
第一步：去Vue2官网，下载依赖包。
第二步：在
html文件中引入vue.js。
<!-- 引入Vue -->
<script type="text/javascript" src="../../js/vue.js"></script>
输出一下
Vue构造函数：console.log(Vue)，看是否配置成功。
- 第三步：编写脚本关闭生产提示。
//阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false
注意：如果上述方法无法关闭，可直接操作
vue.js修改productionTip的值为false。
第四步：安装开发者工具，打开浏览器的【插件管理】，直接拖动
.crx文件到浏览器即可。第五步：配置页签图标，直接复制
favicon.ico到根目录即可。
2.2 一个Hello效果
- 实现效果：
- 核心代码：
<!-- 准备好一个容器 -->
<div id="demo">
<h1>Hello，{{school}}</h1>
</div>
<script type="text/javascript" >
// 创建Vue实例，并传入配置对象
new Vue({
el:'#demo', //用于指定当前Vue实例服务于哪个容器，值为CSS选择器字符串
data:{ // data用于配置数据，数据可以直接在模板中使用，值暂时写成一个对象
school:'尚硅谷'
}
})
</script>
-
总结：
想让
Vue工作，就要创建一个Vue实例，且要传入一个配置对象。demo容器中的代码被称为模板，它依然符合HTML规范，只是混入了一些特殊的Vue语法。el 配置：用于指定当前
Vue实例服务于哪个容器，值为：css选择器字符串。data 配置：用于配置数据，数据可以直接在模板中使用，值暂时写成一个对象（以后还会写成函数）。
2.3 分析Hello效果
Vue实例和容器是<font color="red">一一对应</font>的，真实开发中只有一个Vue实例，而且还会配合组件一起使用。data中的数据只要发生改变，模板中用到该数据的地方就会自动更新。{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的属性。-
复习一个点：【
js表达式】与【js语句】- 表达式：会产生一个值，可以放在任何一个需要值的地方，例如：
(1).
1
(2).a
(3).x > = 18 ? '成年' : '未成年'
(4).200 - 2
(5).arr.map()等等....
- 语句（代码）: 不会产生值，只是控制代码走向，例如：
(1).
if ( ) {}
(2).for ( ) {}
(3).try {} catch (err) {}
等等....
3. 了解开发者工具
- 视角一
- 视角二
4. Vue的模板语法
4.1 插值与指令
-
插值语法（简单）：
功能：用于操作标签体，可以在标签体的指定位置插入数据。
写法：{{xxx}}，xxx是js表达式，且可以自动读取到data中配置的所有属性。 -
指令语法（复杂）：
功能：用于操作标签（标签属性、标签体、绑定事件......）
举例：v-bind:href = "xxx"，xxx 是js表达式，且可以自动读取到data中配置的所有属性。 备注：
Vue中有很多的指令，形式都是v-???，此处我们只是拿v-bind举个例子。-
务必搞懂如下代码：
<a v-bind:href="url" a="url" v-bind:b="url" c="1+1" v-bind:d="1+1" e="url.toUpperCase()" v-bind:f="url.toUpperCase()" > 点我去{{school.name}}学习 </a> <script type="text/javascript"> new Vue({ el: '#demo', data: { school: '尚硅谷', url: 'http://www.atguigu.com' } }) </script>
4.2 v-bind 的简写
- 指令才能简写为
:别的指令不行。 - 其他的指令有其他的简写形式、但并不是所有的指令都有简写形式。
5. 数据绑定
-
Vue中有两种绑定数据的方式：- 单向数据绑定（
v-bind）：数据只能从data流向页面。 - 双向数据绑定（
v-model）：数据不仅能从data流向页面，也能从页面流向data。
- 单向数据绑定（
-
注意点：
-
v-model目前只能用在输入类（表单类）元素上（以后还能用写在组件标签上）。 -
v-model默认收集的是value值，所以v-model:value="xxx"可以简写为v-model="xxx"。
-
-
核心代码：
<!-- 准备好一个容器--> <div id="demo"> <!-- 标准写法 --> 单项数据绑定：<input type="text" v-bind:value="school"> <br><br> 双项数据绑定：<input type="text" v-model:value="school"> <!-- 简写形式 --> 单项数据绑定：<input type="text" :value="school"> <br> 双向数据绑定：<input type="text" v-model="school"> <!-- 下面的代码是不对的，v-model只能用在输入类元素上 --> <!-- <h1 v-model="school">你好</h1> --> </div> <script type="text/javascript"> new Vue({ el:'#demo', data:{ school:'尚硅谷' } }) </script>
6. el 与 data 的写法
6.1 el 的三种写法
-
第一种写法：值为
css选择器字符串new Vue({ el:'#demo' //****** }) -
第二种写法：值为一个真实
DOM元素 —— 几乎不用，了解即可。new Vue({ el:document.getElementById('demo'), //****** }) -
第三种写法：使用
$mount方法去替代el配置。new Vue(/******/).$mount('#demo')
6.2 data 的两种写法
-
第一种（对象式）
data:{ school:'尚硅谷' } -
第二种（函数式）—— 最近不用，以后会用。
data(){ return { school:'尚硅谷' } }
7. 理解MVVM
-
M：模型(Model) ：data中的数据。 -
V：视图(View) ：模板。 -
VM：视图模型(ViewModel) ： Vue实例对象。
8. 认识一下vm
vm身上有很多$开头的属性或方法，这是给我们程序员用的（但也不是都用）。data中所配置的属性，也不知道怎么了（后面会详细说），最终都出现在了vm身上。vm身上所有的属性，以及顺着vm能找到的东西，都能在模板中直接使用，但往往我们使用的只是那些：配置项中所写的东西。-
务必搞懂如下代码：
<!-- 准备好一个容器--> <div id="demo"> <h1>{{school}}欢迎你！</h1> <h2>测试1：{{a}}</h2> <h2>测试2：{{b}}</h2> <h2>测试3：{{_c}}</h2> <h2>测试4：{{$attrs}}</h2> <h2>测试5：{{toString}}</h2> <h2>测试6：{{d}}</h2> </div> <script type="text/javascript"> Object.prototype.d = 9 let vm = new Vue({ el: '#demo', data: { school: '尚硅谷', a: 1, b: 2 } }) // 输出Vue实例对象 —— vm console.log(vm) </script>
9. 复习Object.defineProperty
-
Object.defineProperty，能给对象追加属性，并且可以对属性进行“高级定制”。//定义一个对象 let person = {name:'张三',sex:'女'} //通过Object.defineProperty，也可以给person对象追加一个age属性，且可以对age进行“高级定制”。 Object.defineProperty(person,'age',{ value:90,//值 enumerable:true, //控制属性是否可以枚举(是否参与遍历)，默认值是false configurable:true, //控制属性是否可以删除，默认值是false writable:true,//控制属性是否可以被修改，默认值是false }) -
Object.defineProperty的get与set配置：//定义一个number变量 let number = 18 // 定义一个person对象 let person = {name:'张三',sex:'女'} //借助Object.defineProperty去追加age属性 Object.defineProperty(person,'age',{ enumerable:true, //get函数（getter）何时执行？—— 有人读取person对象的age属性时执行 //get函数（getter）中的this是谁？ —— 当前对象（person） get:function peiqi(){ console.log('getter执行了',this) return number }, //set函数（setter）何时会被调用？ —— 有人修改person对象的age属性时执行 //get函数（setter）中的this是谁？ —— 当前对象（person） set:function qiaozhi(value){ console.log('有人修改了person的age属性，值为：',value,this) number = value } })
10. 数据代理
10.1 何为数据代理
通过一个对象代理对另一个对象中属性的操作（读/写）。
10.2 Vue中的数据代理
前情提要：我们
new Vue(options)时传入的那个data，Vue收到后放在了vm上，名为_data。Vue中的数据代理：通过vm来对_data中属性的操作（读/写）。-
Vue中数据代理的好处：模板中可以更加方便的操作_data中的数据，例如：若无数据代理，这么写：
{{_data.name}}—— 很麻烦。若有数据代理，这么写：
{{name}}—— 香！注意：此时我们先不关注
_data中为什么也有getter、setter，过几天就会说。
10.3 数据代理的原理
遍历
_data对象中所有的属性，通过Object.defineProperty()一个一个都添加到vm上。随后
vm上就拥有了_data中所有的属性，且都有自己的getter、setter。getter、setter内部操作（读/写）的是_data中对应的属性。
