这是我参与「第五届青训营」伴学笔记创作活动的第8天

1.创建一个Vue实例

简单的模板：

<script>
        Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
        new Vue({
            el:'#root', //el(element)用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data:{ //data用于存储数据，数据共el所指定的容器去使用
                name:'juejin'
            }
        })
    </script>

注意：

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象

root容器里的代码依然符合html规范，只是混入了一些特殊的Vue语法

root容器里的代码被称为Vue模板

Vue实例与容器是一一对应的

真实开发中只有一个Vue实例，并且会配合着组件一起使用

{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性

一旦data中的数据发生变化，模板中用到该数据的地方也会自动更新

2.模板语法

Vue的模板语法包括两大类：插值语法和指令语法。

插值语法：

功能：用于解析标签体内容
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有区域

指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
举例：<a v-bind:href="xxx">或简写为<a :href="xxx">，xxx同样要写js表达式，且可以直接读取到data中的所有属性备注：Vue中有很多的指令，且形式都是v-???

<div id="root">
        <h1>插值语法</h1>
        <h3>你好，{{name}}!</h3>
        <hr>
        <h1>指令语法</h1>
        <a v-bind:href="url">juejin</a><br>
        <a :href="url">juejin</a>
    </div>
<script>
        Vue.config.productionTip = false 
        new Vue({
            el:'#root', 
            data:{ 
                name:'juejin',
                url:'https://www.juejin.cn/'
            }
        })
</script>

3.数据绑定

Vue中有2种数据绑定的方式：

单向绑定（v-bind）：数据只能从data流向页面
双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data

<div id="root">
        单向数据绑定：<input type="text" v-bind:value="name"><br>
        双向数据绑定：<input type="text" v-model:value="name">
</div>

备注：

双向绑定一般都应用在表单类元素上（如：<input>、<select>、<textarea>等）
v-model:value可以简写为v-model，因为v-model默认收集的就是value值

4.el与data的两种写法

el的两种写法：

el:'#root'
vm.$mount('#root')

注意:使用el:'#root'在Vue实例当中，而使用vm.$mount('#root')需要在Vue实例之后。

data的两种写法：

data:{name:'juejin'} //对象式
data(){return{name:'juejin'}} //函数式

5.Vue中的数据代理

给对象添加属性的函数:Object.defineProperty
注意：setter和getter必不可少

<script type="text/javascript">
      let number = 18,
      let person = {
          name:'w',
          sex:'男',
      }
    Object.defineProperty(person,'age',{
      value:18,
      enumerable:true, //控制属性是否可以枚举
      writabe:true, //控制属性是否可以被修改
      configurable:true //控制属性是否可以被删除
      
      get/*:function*/(){
          return number
      }
    
      set(value){
        number = value
      }
    })
</script>

总结：

Vue中的数据代理通过vm对象来代理data对象中属性的操作（读/写）
Vue中数据代理的好处：更加方便的操作data中的数据
基本原理：
- 通过object.defineProperty()把data对象中所有属性添加到vm上。
- 为每一个添加到vm上的属性，都指定一个getter/setter。
- 在getter/setter内部去操作（读/写）data中对应的属性。

5.事件处理

5.1事件的基本用法

<div id="root">
        <h2>hello,{{name}}</h2>
        <button v-on:click="showInfo1">点我提示信息1</button>
        <button @click="showInfo2($event,66)">点我提示信息2</button>
</div>

<script>
    Vue.config.productionTip = false 
    new Vue({
        el:'#root', 
        data:{
            name:'juejin'
        },
        methods:{
            showInfo1(event){
                console.log(event)
            },
            showInfo2(evnet,num){
                console.log(event,num)
            }
        }
    })
</script>

总结：

使用v-on:xxx或@xxx绑定事件，其中xxx是事件名
事件的回调需要配置在methods对象中，最终会在vm上
methods中配置的函数，不要用箭头函数！否则this就不是vm了
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
@click="demo和@click="demo($event)"效果一致，但后者可以传参

5.2事件修饰符

Vue中的事件修饰符：

prevent：阻止默认事件（常用）
stop：阻止事件冒泡（常用）
once：事件只触发一次（常用）
capture：使用事件的捕获模式
self：只有event.target是当前操作的元素时才触发事件
passive：事件的默认行为立即执行，无需等待事件回调执行完毕

修饰符可以连续写，比如可以这么用：@click.prevent.stop="showInfo"

5.3键盘事件

Vue中常用的按键别名：

回车：enter
删除：delete (捕获“删除”和“退格”键)
退出：esc
空格：space
换行：tab (特殊，必须配合keydown去使用)
上：up
下：down
左：left
右：right

键盘上的每个按键都有自己的名称和编码，例如：Enter的编码是13。而Vue还对一些常用按键起了别名方便使用。注意：

系统修饰键（用法特殊）：ctrl、alt、shift、meta
- 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
- 配合keydown使用：正常触发事件
可以使用keyCode去指定具体的按键，比如：@keydown.13="showInfo"，但不推荐这样使用
Vue.config.keyCodes.自定义键名 = 键码，可以自定义按键别名

Vue基础持续更新中。。。
文章参考尚硅谷Vue教程

前端入门之Vue.js——Vue基础(1) | 青训营笔记