初识Vue：
要想Vue工作，就必须创建一个Vue实例，并且传入一个配置对象；
root容器里的代码依然符合html规范，只不过混入了特殊的Vue语法：
root容器里的代码被称为【Vue模版】；
vue实例和容器是一一对应的；
真实开发中只有一个vue实例，并会配合组件一起使用
{{×××}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
若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>Document</title>
//引入Vue
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
//准备好一个容器
<div id="root">
<h1>hello {{name}}</h1> //{{name}}是在接收后面的name
</div>
<script type="text/javascript">
//创建Vue实例
new Vue({
el:'#root',
data:{
name:'world'
}
})
</script>
</body>
</html>模版语法
1.插值语法：
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且xxx可以自动读取到data中的所有属性
2·指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件....）
举例：v-bind：href="xxx" 或 简写为：href="xxx"， x××同样要写js表达式，
且可以直接读取到data中的所有属性。
备注：vue中有很多的指令形式都是：v-???
v-bind 单向绑定
v-model 双向绑定 只能应用在表单类元素（输入类元素 如input select）
data与el的2种写法
1.el有2种写法
new Vue时候配置el属性。
先创建vue实例，随后再通过vm.$mount('#root'）指定el的值。
2.data有2种写法
对象式
函数式 data(){
}
如何选择：组件 data必须使用函数式
3.一个重要的原则：
由vue管理的函数，一定不要写箭头函数，写了箭头函数，this就不再是vue实例了。
enumerable：true, //控制属性值是否可以枚举，默认值是false
writable：true, //控制属性是否可以被修改，默认值是false
configurable：true //控制属性是否可以被删除，默认值是false
let num = 18
let person = {
name:'ws',
sex:'boy',
}
//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
Object.defineProperty(person,'age',{
get(){
return num
}
//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
set(value){
num = value
}
})事件的基本使用：
使用v-on：xxx 或 @xxx 绑定事件，其中xxx是事件名：
事件的回调需要配置在methods对象中，最终会在vm上：
methods中配置的函数，不要用箭头函数！否则this指向的就不是vm了：
methods中配置的函数，都是被vue所管理的函数，th的指向是vm 或 组件实例对象
@click= "demo" 和 @click="demo($event)" 效果一致，但后者可以传参
vue中的事件修饰符：
prevent：阻止默认事件（常)
stop：阻正事件冒泡（常)
once：事件只触发一次（常)
capture：使用事件的捕获模式
se1f：只有event．target是当前操作的元素才是触发事件
passive：事件的默认行为立即执行，无需等待事件回调执行完毕
1.vue中常用的按键别名：
回车=>enter
删除=>delete（捕获“删除”和“退格”键）
退出=>esc
空格=>space
换行=>tab（要配合keydown使用）
上=>up
下=>down
左=>left
右=>right
2.vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
（1）配合keyup使用：按下修饰键的同时，再按一下其他键，随后释放其他键，事件才被触发。
（2）配合keydn使用：正常触发事件。
4.也可以使用keycode去指定具体的按键（不推荐）
5.Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名
计算属性：
1.定义：要用的属性不存在，要通过己有属性计算得来。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter
3.get函数什么时候执行？
（1）初次读取时会执行一次。
（2）当依賴的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用)，效率更高，调试方便。
5.备注：
1·计算属性最终会出现在vm上，直接读取使用即可。
2·如果计算属性要被修改，必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
监视属性watch：
1.当被监视的属性变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视
3.监视的两种写法：
（1）new vue时传入watch配置
（2）通过vm.$watch监视
深度监视：
（1）vue中的watch默认不监测对象内部值的改变（一层）
（2）配置 deep：true 可以监测对象内部值改变（多层）
备注：
（1）vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以
（2）使用watch时根据数据的具体结构，决定是否采用深度监视。
computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成
2.watch能完成的功能，computed不一定能完成
例如：watch可以进行异步操作
两个重要的小原则：
1.所有被vue管理的函数，最好写成普通函数，这样this的指向才是 vm 或 组件实例对象。
2.所有不被vue所管理的函数（定时器的回调函数、ajax的回调函数等），最好写成箭头函数，这样this的指向才是 vm 或 组件实例对象。
条件渲染：
1.v-if
写法：
v-if = "表达式"
v-e1se-if = "表达式"
v-else = "表达式"
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和：v-else-if、v-else一起使用，但结构不能被“打断”
2.v-show
写法：v-show = "表达式"
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
v-for指令
用于展示列表数据
语法：v-for = "(item，index) in XXX" :key="yyy"
可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
1·虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当状态中的数据发生变化时，vue会根据【新数据】生成【新的虚拟DOM】
随后vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较
比较规则：
（1）旧虚拟DOM中找到了与新虚拟DOM相同的key
若虚拟DOM中内容没变，直接使用之前的真实DOM
若虚拟DOM中内容改变，生成新的真实DOM，替换掉页面中之前的真实DOM
（2）旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM后渲染到页面
2.用index作为key可能会引发的问题
（1）若对数据进行：逆序添加、逆序删除等破坏顺序操作会产生没有必要的真实DOM更新（界面效果没问题，但效率低）
（2）如果结构中还包含输入类的DOM：会产生错误DOM更新导致界面有问题。
3.开发中如何选择key
1.最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
使用index作为key是没有问题的。
3670
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
