Vue学习笔记总结（未完）
一、初始Vue
动态构建用户界面的渐进式JavaScript框架
-
英文官网
-
中文官网
1.1 创建Vue实例
-
想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
-
{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
-
一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
注意区分：js表达式 和 js代码(语句)
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? 'a' : 'b'
2.js代码(语句)
(1). if(){}
(2). for(){}
Hello，{{name.toUpperCase()}}，{{address}}
// 创建Vue实例
new Vue({
el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
name:'atguigu',
address:'北京'
}
})1.3 模板语法
Vue模板语法有2大类：
-
插入语法：
功能：用于解析标签体内容
写法：{{xxx}}, xxx是js表达式，且可以直接读取到data中的所有属性
-
指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。
1.4 数据绑定
单项数据绑定
-
语法: v-bind:href="xxx"或简写成 :href
-
特点: 数据只能从data流向页面
双向数据绑定
-
语法: v-model:value="xxx"或简写为v-model="xxx"
-
特点：数据不仅能从data流向页面，还能从页面流向data
备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
1.4 el与data的两种写法
-
el有两种写法
-
.new Vue是后配置el属性
-
先创建Vue实例，随后再通过 vm.$mount('#root')指定el的值
-
-
data的两种写法
-
对象式
-
函数式
-
-
一个重要的原则:
Vue管理的函数，一定不要写箭头函数，一旦写箭头函数，this就不是Vue实例
1.5 MVVM 模型
-
M： 模型(Model) ：对应data中的数据
-
V： 视图(View) : 模板
-
VM: 视图模型(ViewModel):Vue 实例对象
1.6 事件的基本使用
1.61 事件的基本使用
使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名
事件的回调需要配置在methods对象中，最终会在vm上；
注：
-
methods中配置的函数，不要用箭头函数！否则this就不是vm了；
-
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
-
@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
1.6.2 事件修饰符
-
prevent：阻止默认事件（常用）；
-
stop：阻止事件冒泡（常用）；
-
once：事件只触发一次（常用）；
-
capture：使用事件的捕获模式；
-
self：只有event.target是当前操作的元素时才触发事件；
-
passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
点我提示信息1.6.3 键盘事件
Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
欢迎来到{{name}}学习
1.8 计算属性和监听器
1.8.1计算属性
定义:要用的属性(computed)不存在，要通过已有属性计算得来。
原理:底层借助了Objcet.defineproperty方法提供的getter和setter。
初次使用是会调用getter函数，当依赖的数据发生改变时会再次调用且必须写set函数去响应修改
优势:与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
备注：计算属性最终会出现在vm上，直接读取使用即可。
如果修改属性需要在computed计算属性的属性写setter方法,getter方法可省略
1.8.2 监视属性watch
- 当被监视的属性变化时, 回调函数自动调用, 进行相关操作
- 监视的属性必须存在，才能进行监视！！
- 监视的两种写法：
- .new Vue时传入watch配置
- 通过vm.$watch监视
深度监视：
(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。
备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
watch:{
isHot:{
// immediate:true, //初始化时让handler调用一下
//handler什么时候调用？当isHot发生改变时。
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
},
//监视多级结构中所有属性的变化
numbers:{
deep:true,
handler(){
console.log('numbers改变了')
}
}
}1.9 表单输入绑定
你可以用
v-model指令在表单、