Vue2-自学前端基础总结（一）

作为一个自学前端刚入职的小白，在第一篇文章中讲了自己前半段的人生经历和从开始了解前端并通过自学踏入这个行业的体会，也是收到了很多人的评论和鼓励，也积极回复了一些准备和正在自学前端小伙伴的疑问，希望可以帮助你们少走弯路快速入坑。

上一篇文章我也说过，自己写博客的原因只是为了对自学的知识作一个总结和记录在开发过程中遇到的问题，帮助自己加深对知识点的记忆，并养成一个良好的习惯，现在已经有很多大佬的技术博客对相关的知识点做了深度的总结，我只是以一个自学者的身份归纳我所学到的知识点，如果有写的不对的地方欢迎各位大佬批评指正，谢谢！

废话不多说，走起

（1）vue常用指令

v-html / v-text：把值中的标签渲染出来
v-model：放在表单元素上的，实现双向数据绑定
v-bind（缩写 :）：用于绑定行内属性
v-if / v-show 是否能显示，true 能显示，false 不能显示
v-once 对应的标签只渲染一次
v-for ：循环显示元素
v-on 事件绑定

（2）vue模板语法

Vue模板语法有2大类:插值语法 和 指令语法

插值语法：

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

指令语法：

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

<template>
    <div>
        <h1>插值语法</h1>
        <h3>你好，{{name}}</h3>
        
        <h1>指令语法</h1>
	<a v-bind:href="school.url">点我去{{school.name}}学习1</a>
	<a :href="school.url">点我去{{school.name}}学习2</a>
    </div>
</template>

<script>
export default {
**    **data(){
      return{
        name:'张三',
        school:{
            name:'武大',
            url:'http://www.baidu.com',
        }
      }
    }
}
</script>

（3）数据绑定

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

单向绑定(v-bind)：数据只能从data流向页面。
双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。备注：

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

    <!-- 普通写法 -->
    单向数据绑定：<input type="text" v-bind:value="name"><br/>
    双向数据绑定：<input type="text" v-model:value="name"><br/>

    <!-- 简写 -->
    单向数据绑定：<input type="text" :value="name"><br/>
    双向数据绑定：<input type="text" v-model="name"><br/>

    <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
    <!-- <h2 v-model:x="name">你好啊</h2> -->

（4）数据代理

Object.defineProperty()

Object.defineProperty()方法是整个vue2的核心，包括数据劫持、数据代理、计算属性都会用到这个方法，后面用到时具体再讲。数据代理就是通过一个对象代理对另一个对象中属性的操作（读/写），今天先回顾一下该方法的使用。

<script type="text/javascript" >
    let number = 18
    let person = {
            name:'张三',
            sex:'男',
    }
    
    //给person追加一个age属性
    Object.defineProperty(person,'age',{
            // value:18,   //赋值为18
            // enumerable:true, //控制属性是否可以枚举（是否可以遍历），默认值是false
            // writable:true, //控制属性是否可以被修改，默认值是false
            // configurable:true //控制属性是否可以被删除，默认值是false

            //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
            get(){
                    console.log('有人读取age属性了')
                    return number
            },

            //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
            set(value){
                    console.log('有人修改了age属性，且值是',value)
                    number = value
            }

    })
</script>

Vue中的数据代理

Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
Vue中数据代理的好处：更加方便的操作data中的数据
基本原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8" />
       <title>Vue中的数据代理</title>
       <!-- 引入Vue -->
       <script type="text/javascript" src="../js/vue.js"></script>
    </head>
<body>

    <div id="root">
            <h2>姓名：{{name}}</h2>
            <h2>地址：{{address}}</h2>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
            el:'#root',
            data:{
                name:'张三',
                address:'湖北-武汉'
            }
    })
</script>
</html>

（5）事件处理

1.事件的基本使用

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>事件的基本使用</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
    <body>
        <div id="root">
            <button v-on:click="showInfo">点我提示信息</button>
              //简写：v-on:click=@click
            <button @click="showInfo1">点我提示信息1（不传参）</button>
            <button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
        </div>
    </body>

      <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

        const vm = new Vue({
                el:'#root',
                data:{
                      name:'张三',
                },
                methods:{
                    showInfo1(event){
                            console.log(event.target.innerText)  //点我提示信息1（不传参）
                            console.log(this)                    //此处的this是vm
                    },
                    showInfo2(event,number){
                            console.log(event,number)
                            // console.log(event.target.innerText)
                            // console.log(this) //此处的this是vm
                    }
                }
        })
  </script>
</html>

2.事件修饰符

prevent：阻止默认事件（常用）；
stop：阻止事件冒泡（常用）；
once：事件只触发一次（常用）；
capture：使用事件的捕获模式；
self：只有event.target是当前操作的元素时才触发事件；

<div id="root">
        
        <!--** 阻止默认事件（常用）** -->
        <a href="http://www.baidu.com" @click.prevent="showInfo">点我</a>

        <!-- **阻止事件冒泡（常用）** -->
        <div class="demo1" @click="showInfo">
          <button @click.stop="showInfo">点我</button>
          
        <!-- **修饰符可以连续写** -->
        <a href="http://www.baidu.com" @click.prevent.stop="showInfo">点我</a>
        </div>

        <!-- **事件只触发一次（常用）** -->
        <button @click.once="showInfo">点我提示信息</button>

        <!-- **使用事件的捕获模式** -->
        <div class="box1" @click.capture="showMsg(1)">
              div1
              <div class="box2" @click="showMsg(2)">
                  div2
              </div>
        </div>

        <!-- **只有event.target是当前操作的元素时才触发事件**； -->
        <div class="demo1" @click.self="showInfo">
             <button @click="showInfo">点我提示信息</button>
        </div
</div>