初探Vue
Vue是当下极富盛名的前端框架，与React，Angular三分天下，学习Vue是前端人的必备技能
快速上手
要想使用Vue，最为简单原始的方式就是在官网上下载对应的js文件，注意要下生产模式的
下载之后，我们只需要像引入其他js文件那样引入即可，当然你也可以不下载，引入CDN
引入相关js核心库之后，我们便可以简单用一用Vue，我们先看一段代码：
<body>
<div id="root">
<h1>hi,{{msg}}</h1>
</div>
<script>
const vm=new Vue({
el:'#root',
data:{
msg:'Vue'
}
})
</script>
</body>
创建div容器，主要是为了让Vue操作
我们还创建了一个变量vm，它是一个Vue对象
其中，el的值对应该对象绑定的容器，用于vue获取该容器的DOM
至于data则用于存放数据，数据的名字可以随便起，在容器中使用时，要用双括号括起来（插值语法）
注意事项：
1.容器与Vue实例之间是一一对应的关系
2.双括号中可以写JS表达式（有对应值的JS代码）
模板语法
插值语法想在属性中插值的时候，需要使用v-bind：或者简写为一个冒号
v-bind也被叫做指令语法
示例如下：
<body>
<div id="root">
<h1>hi,{{msg}}</h1>
<a v-bind:href="url">点我去百度</a>
</div>
<script>
new Vue({
el:'#root',
data:{
msg:'Vue',
url:'http://www.baidu.com'
}
})
</script>
</body>
注意：data里面数据如果重名，后面的会覆盖前面的，可以设计多级结构解决
数据绑定
v-bind可以实现单向数据绑定，也就是vue实例中的数据改变，页面值改变，反之不行
v-model可以实现双向数据绑定，也就是vue实例中的数据改变，页面值改变，反之可以
代码实现：
<body>
<div id="root">
单向数据绑定:<input type="text" v-bind:value="name"><br/>
双向数据绑定:<input type="text" v-model:value="msg">
</div>
<script>
new Vue({
el:'#root',
data:{
name:'Vue',
msg:'Del'
}
})
</script>
</body>
注意事项：
1.v-model只能用在表单类元素上（有value值的）
2.v-model:value可以简写为v-model
el的另一种写法
指定el还可以用如下写法：
<script>
const vm = new Vue({
data:{
name:'Vue',
msg:'Del'
}
})
vm.$mount('#root')
</script>
data的另一种写法
data还可以用函数式写：
<script>
const vm = new Vue({
data:function(){
return{
name:'Vue',
msg:'Del'
}
}
})
vm.$mount('#root')
</script>
注意这里的函数不要用箭头函数（用箭头函数this就不是Vue实例了）
数据代理
Object.defineProperty函数可以用于定义属性
使用上面的方法定义的属性无法被枚举，无法被更改，无法被删除
除非指定enumerable为true则可以枚举
指定writable为true则可以修改
指定configurable为true则可以删除
代码举例：
let number=19
let person={
name:'张三',
sex:'男'
}
Object.defineProperty(person,'age',{
//当有人读取person的age属性时，get就会被调用
get(){
return number
},
//当有人修改person的age属性时，set就会被调用
set(value){
number=value
}
})
数据代理就是通过一个对象代理对另一个对象中属性的操作
Vue实例与data对象之间存在数据代理关系，Vue代理了data里面的数据，data里面的成员均存在get，set方法
data里面的成员加入Vue实例的时候，用的就是Object.defineProperty
Vue实例会将data存在自身的_data，换言之， vm. _data=data
事件绑定
v-on:click可以给按钮绑定一个处理函数
<body>
<div id="root">
<h1>欢迎，{{name}}</h1>
<button v-on:click="showInfo">点我提示信息</button>
</div>
<script>
new Vue({
el:'#root',
data:{
name:'Vue'
},
methods:{
showInfo(){
alert('你好，欢迎')
}
}
})
</script>
</body>
methods里的函数中this是Vue实例（箭头函数形式除外）
默认可以有一个参数event，表示事件
v-on:click可以简写为@click
传参的形式可以像下面这样写($event可以保证event不被覆盖)：
<body>
<div id="root">
<h1>欢迎，{{name}}</h1>
<button v-on:click="showInfo($event,66)">点我提示信息</button>
</div>
<script>
new Vue({
el:'#root',
data:{
name:'Vue'
},
methods:{
showInfo(number){
alert(number)
}
}
})
</script>
</body>
把方法写在data里，会导致Vue对函数也做数据代理，这是没必要的
事件修饰
有时候，我们希望能控制事件的一些行为，此时就要用到事件修饰
在click后面加.prevent就可以阻止默认事件（比如a标签的跳转等等）
其它一些常用事件修饰如下：
- prevent表示阻止默认事件
- stop表示阻止事件冒泡
- once事件只触发一次
- capture表示使用捕获模式
- self表示只有event.target是当前元素时才触发
- passive表示事件的默认行为立即执行，无需等待回调执行完毕（比如滚轮滚动行为）
前3个比较常用
事件修饰符允许连着写实现效果叠加
键盘事件
常见的键盘事件有keydown和keyup，分别表示按下和抬起后触发事件
我们时常会提出按下回车才触发回调函数的需求，比较原始的方法就是我们根据键码判断，但是Vue给出了一些特定的别名修饰符，可以完成这些需求
常用的键盘的别名修饰符如下：
1.回车：enter
2.删除：delete
3.退出：esc
4.换行：tab
5.空格：space
6.上：up
7.下：down
8.左：left
9.右：right
我们拿回车举例：
<body>
<div id="root">
<h1>欢迎，{{name}}</h1>
<input type="text" placeholder="按下回车时输入" @keydown.enter="showInfo">
</div>
<script>
new Vue({
el:'#root',
data:{
name:'Vue'
},
methods:{
showInfo(e){
console.log(e.target.value)
}
}
})
</script>
</body>
我们还可以自己绑定键盘事件别名：
Vue.config.keyCodes.自定义别名=键码
键盘别名修饰也可以连着写实现效果叠加
