vue2的基础知识

1.vue是什么

一套用于构建用户界面的渐进式JavaScript框架

 

渐进式：Vue可以自底向上逐层的应用

• 简单应用：只需一个轻量小巧的核心库

• 复杂应用：可以引入各式各样的Vue插件

2 Vue 的发明者

 

3 Vue的特点

        1.采用组件化模式，提高代码复用率、且让代码更好维护。

2. 声明式编码，让编码人员无需直接操作DOM,提高开发效率

 

3. 使用虚拟DOM + 优秀的Diff算法，尽量复用DOM节点。

 

 

4 Vue 周边库

1. vue-cli: vue 脚手架

2. vue-resource

3. axios

4. vue-router: 路由

5. vuex: 状态管理

6. element-ui: 基于 vue 的 UI 组件库(PC 端)

     ……

Vue 官方文档

Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

5 初识Vue

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

2.root容器里的代码依然符html规范 只不过混入了一些特殊的Vue语法

3.root容器里的代码被称为【Vue模板】

4.Vue实例和容器是一一对应的：

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

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

7.data中的数据发生改变，那么模板中用到该数据的地方也会自动更新

8.Vue.config.productionTip = false; //阻止vue在启动时生成提示

注意区分：js表达式和js代码（语句）

        1,表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：

                (1).a

                (2).a+b

                (3).demo(1)（函数）

                (4).x==y?'a':'b

        2.js代码（语句）

                (1). if() { }

                (2). for() { }

<!-- 准备一个容器 -->
    <div id="root">
        <h1>Hello {{name}}</h1>
        <!-- 插值表达式 (插值语法) -->
    </div>


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

        //创建Vue实例

        const x = new Vue({
            el:'#root', //用于当前指定Vue实例为那个容器服务，值通常为css选择器字符串
            data:{  //data中用于存储数据，数据供el所指定的容器去使用，现在暂时写成一个对象
                name: 'GZC'
            }
        });

    </script>

6 模板语法

6.1 插值语法

<div id="root">
        <h1>插值语法</h1>
        <h3>你好，{{name}}</h3>
</div>

1. 功能: 用于解析标签体内容

2. 语法: {{xxx}} ，xxxx 会作为 js 表达式解析

3. 如果插值语法结果是undefined，不会显示当页面上去，

4. 不是bug，vm.a如果a不存在是undefined，但是Vue报错是is not define。个人觉得Vue在把属性当做变量在用。而data.a.b如果b不存在a存就是正常的undefined

6.2 指令语法

        1.功能: 解析标签属性、解析标签体内容、绑定事件

        2.举例：v-bind:href = ”xxxx“，xxxx 会作为 js 表达式被解析

        3.说明：Vue 中有有很多的指令，此处只是用 v-bind 举个例子

7.数据绑定

7.1. 单项数据绑定：v-bind

数据只能从data流向页面。

 <div id="root">
         <h1>指令语法</h1>
         <a :href="url">带我百度</a>
         <a v-bind:href="url">带我百度</a>
 </div>

        出现v- ，双引里面的当成表达式去执行

        v-bind：可以简写为：

7.2. 双向数据绑定：v-model

        数据不仅能从data流向页面，还可以从页面流向data

        备注：

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

 ​8 el和data的两种写法

        1.el的两种方式

                （1）new Vue的时候配置el属性

                （2）先创建Vue实例，随后再通过vm.$mount（‘#root’）指定el的值

        data有两种写法

                （1）对象式

                （2）函数式

        如何选择：目前选择那种写法都可以，但是组件中data必须使用函数式，否则会报错。

一个重要的原则：

        由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了

new Vue({
     el: '#root',
     // data : {
     //     name:"GZC",
     // }
     // data: function() {
     //     console.log('@@@',this);
     //     return {name:"GZC",}

     // } 简写：
     data () {
          console.log('@@@',this);
          return {name:"GZC",}

      }
})

9 MVVM模型

1. M：模型(Model) ：对应 data 中的数据

2. V：视图(View) ：模板

3. VM：视图模型(ViewModel) ： Vue 实例对象

 

data中所有属性，最后都出现在了vm身上

vm身上所有属性，及Vue原型上所有的属性，在Vue模板中都可以直接使用

10 数据代理

10.1 Object.defineProperty()

value 默认值

enumerable  true 可枚举 false 不可枚举（遍历）

writable 控制属性是否可以被修改，默认是false

configurable 控制属性是否可以被删除 默认为false

 let person = {
    name: 'John',
    sex:'男', 
 };
 //默认不可遍历（枚举）
 Object.defineProperty(person, 'age', {
     value: 18, //默认值, 
     enumerable: true, // true 可枚举 ，false （默认值）不可以枚举
     writable: true, // 控制属性是否可以被修改，默认是false
     configurable: true, //控制属性是否可以被删除   默认为false
 })

getter 和 setter

 let number = 18;
 Object.defineProperty(person,'age', {
     // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
      get: function() {
            return number;
      },
 ​
    // 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到具体修改的值
     set(value) {
        number = value;
     }
 })

10.2 数据代理

通过一个对象代理对另一个对象中的属性的操作（读和写）

 let obj = {x:100};
 let obj2 = {y:200};
 ​
 Object.defineProperty(obj2,'x', {
    get() {
      return obj.x;
    },
    set(value) {
      obj.x = value;
     }
 });

10.3 vue中的数据代理

通过一个对象代理对另一个对象中的属性的操作（读和写）

通过vm 读取的是data中的属性，改属性值改的是data中的属性值，这就是数据代理

读取是getter

修改是setter

 

通过vm._data 读取自己写的data

不要打开_data 虽然有getter setter  但是 不是数据代理，是数据劫持，

 <!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>
     <script src="../js/vue.js"></script>
 </head>
 <body>
     <div id="root">
         <h1>{{name}}</h1>
     </div>
     <!-- 数据代理：通过一个对象代理对另一个对象中的属性的操作（读和写） -->
     <script type="text/javascript">
         Vue.config.productionTip = false;
 ​
         let data = {
             name: 'GZC',
             address: 'http://localhost'
         }
         new Vue ({
             el: '#root',
             // data: data,
             data,
         })
     </script>
 </body>
 </html>

 

1,Vue中的数据代理： 通过vm对象来代理data对象中属性的操作（读/写）

2,Vue中数据代理的好处： 更加方便的操作data中的数据

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

11 事件处理

11.1 事件的基本使用

11.1.1 不传参 

也可以接收到$event

<!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>
     <script src="../js/vue.js"></script>
 </head>
 <body>
     <div id="root">
         <h1>{{name}}</h1>
         <button v-on:click="showInfo">点我提示信息</button>
     </div>
 ​
     <script type="text/javascript">
         Vue.config.production = false;
 ​
         new Vue({
             el: '#root',
             data() {
                 return {
                     name: 'GZC',
                 }
             },
             //配置事件的回调
             methods: {
                 showInfo() {
                     alert('Show info');
                 },
                 showInfo(e) {
                     alert('Show info');
                     console.log(e.target.innerText);
                     console.log(e);
                     console.log(this); //此处this指的是vm
                 },
                 // showInfo: (e)=> {
                 //     console.log(this); //此处this指的是window
                 // } 
                 //点击按钮，要调用showInfo this指向下一层
                 //
             }
         });
 ​
     </script>
 ​
 </body>
 </html>

11.1.2 v-on:click="showInfo"传参

可以加括号，加完括号，也不是函数返回值

但是加完括号，无法传对象参数，所以，需要写$event(没有顺序)

 v-on:click="showInfo($event,a)"
 showInfo(event,a) {
 ​
 }

都挂载到vm实例对象上，没有数据代理

只有data里面的才能进行数据代理

11.1.3 总结

事件的基本使用：

        1.使用v-on:xxx或@xxx绑定事件，其中xxx是事件名

        2,事件的回调需要配置在methods,对象中，最终会在vm上

        3,methods中配置的函数，不要用箭头函数！否则this就不是vm了

        4,methods中配置的函数，都是被Vue所管理的函数，this刷指向是vm或组件实例对象

        5,@click:="demo”和@click="demo($event,a)”效果一致，但后者可以传其他参

11.2.数据的修饰符号（支持链式调用）

11.2.1 prevent 阻止默认行为（常用）

 v-on:click.prevent="showInfo"

11.2.2 stop 阻止事件冒泡（常用）

11.2.3 once 事件只触发一次（常用）

11.2.4 capture：使用事件的捕获模式

点击嵌套里面的元素，使用捕获阶段，先运行外面的元素，在运行里面的元素

11.2.5 self: 只有event.target是当前操作的元素时才触发

11.2.6 passive 事件的默认行为立即执行，无需等待时间回调完成

 <!-- wheel 滚轮滚动   scroll 滚动条 -->
 ​
  <!-- 滚动 先处理完回调函数,滚动条才往下走 -->

 <!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>
     <script src="../js/vue.js"></script>
     <style>
         *{
             margin-top: 20px;
         }
         .demo1 {
             height: 50px;
             background-color: blue;
         }
 ​
         .box1 {
             height: 80px;
             background-color: pink;
         }
 ​
         .box2 {
             height: 30px;
             margin-left: 10px;
             background-color: red;
         }
 ​
         .list {
             height: 200px;
             width: 200px;
             background-color: peru;
             overflow: auto;
         }
 ​
         li {
             height: 100px;
             width: 200px;
 ​
             
         }
     </style>
 </head>
 <body>
     <div id="root">
         <h1>{{name}}</h1>
         <!-- prevent 阻止默认行为（常用） -->
         <a href="http://www.baidu.com" v-on:click.prevent="showInfo">点我提示信息</a>
         <!-- stop 阻止事件冒泡（常用） -->
         <div class ="demo1" @click="showInfo">
             <button @click.stop="showInfo">点我</button>
         </div>
 ​
         <!-- once 事件只触发一次（常用） -->
         <a href="http://www.baidu.com" v-on:click.prevent.once="showInfo">点我提示信息</a>
         
         <!-- capture：使用事件的捕获模式 -->
         <div class ="box1" @click.capture="showMsg(1)">
             box1
             <div class="box2" @click="showMsg(2)">
                 box2
             </div>
         </div>
 ​
         <!-- self: 只有event.target是当前操作的元素时才触发 -->
         <div class ="demo1" @click.self="showInfo">
             <button @click="showInfo">点我</button>
         </div>
         <!-- //结果输出<button>点我</button> -->
 ​
         <!-- passive 事件的默认行为立即执行，无需等待时间回调完成 -->
         <!-- wheel 滚轮滚动     scroll 滚动条 -->
         <!-- 滚动 先处理完回调函数,滚动条才往下走 -->
         <ul @wheel.passive="demo" class="list">
             <li>1</li>
             <li>2</li>
             <li>3</li>
             <li>4</li>
         </ul>
     </div>
 ​
     <script type="text/javascript">
         Vue.config.production = false;
 ​
         new Vue({
             el: '#root',
             data() {
                 return {
                     name: 'GZC',
                 }
             },
             //配置事件的回调
             methods: {
                 showInfo(e) {
                     alert('Show info');
                     console.log(e.target);
                 },
                 showMsg(msg) {
                     alert(msg);
                 },
                 demo(){ 
                     for (let i = 0; i < 100000; i++) {
                         console.log('@demo');   
                     }
                 }
             }
         });
 ​
     </script>
 ​
 </body>
 </html>

11.3 键盘事件

11.3.1 vue中常见的按键别名

回车 => enter

删除 => delete（捕获删除和退格键）

退出 => esc

空格 => space

换行 => tab （tab键，必须使用keydown触发）

上 => up

下 => down

左 => left

右 => right

易错

 tab键，必须使用keydown触发

2,Vue未提供别名的按健，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)

 e.key 输出的时键别名   CapsLock => .caps-lock  keyup.13
 e.keyCode 输出键码值
 ​

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta（window键） (1),配合keyUp使用：按下修饰健的同时，再按下其他健，随后释放其他健，事件才被触发。

只有按下 ctrl + y 才被调用 用法 @keyup.ctrl.ctrl.y

(2).,配合keydown使用：正常触发事件。

4.也可以使用keyCode去指定具体的按键（不推荐 可能之后会被废弃）

5.Vue.config.keyCodes.自定义键名=健码，可以去定制按键别名（不太推荐）

4 计算属性与监视

vue中认为data中的就是属性

计算属性：

        1.定义：要用的属性不存在，要通过已有属性计算得来，如果依赖的数据发生变化，computed会重新计算

        2,原理：底层借助了Objcet.defineproperty方法提供的getter和setter。 ​

        3,get函数什么时候执行？ ​

                (1). 初次读取时会执行一次。 ​

                (2). 当依赖的数据发生改变时会被再次调用。 ​

        4,优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。 ​

        5.备注： ​

                1,计算属性最终会出现在Vm上，直接读取使用即可。 ​

                2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化

 <!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>
     <script src="../js/vue.js"></script>
 </head>
 <body>
     <div id="root">
         姓: <input type="text" v-model="firstName"> <br />
         名: <input type="text" v-model="lastName"> <br />
         姓名: <span>{{fullName}}</span>
         姓名: <span>{{fullName}}</span>
         姓名: <span>{{fullName}}</span>
         姓名: <span>{{fullName}}</span>
     </div>
 ​
     <script type="text/javascript">
         Vue.config.production = false;
 ​
         const vm =  new Vue({
             data() {
                 return {
                     firstName: '张',
                     lastName: '三',
                 }
             },
             computed: { //写成对象的形式
                 fullName: {  //fullName也在vm身上 vm._data存的是data里的,没有fullName
                     //get什么时候调用？ 1.初次读取fullName时（虚拟DOM） 2.所依赖的数据发生变化时
                     get() {
                         console.log('getter called');
                         return this.firstName + '-' +this.lastName;
                     },
                     set(value) { //不是必须写的 当fullName被修改是调用
                         let arr = value.split("-");
                         this.firstName = arr[0];
                         this.lastName = arr[1];
                     }
                 }
             }
         });
         vm.$mount('#root');
 ​
     </script>
 ​
 </body>
 </html>

简写

 <!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>
     <script src="../js/vue.js"></script>
 </head>
 <body>
     <div id="root">
         姓: <input type="text" v-model="firstName"> <br />
         名: <input type="text" v-model="lastName"> <br />
         姓名: <span>{{fullName}}</span>
         姓名: <span>{{fullName}}</span>
         姓名: <span>{{fullName}}</span>
         姓名: <span>{{fullName}}</span>
     </div>
 ​
     <script type="text/javascript">
         Vue.config.production = false;
 ​
         const vm =  new Vue({
             data() {
                 return {
                     firstName: '张',
                     lastName: '三',
                 }
             },
             //确定了只读不该 才采用简写形式
             computed: { //写成对象的形式
                 // fullName: { 
                 //     get() {
                 //         console.log('getter called');
                 //         return this.firstName + '-' +this.lastName;
                 //     },
                 // }
                 //fullName：function（） { }
                 fullName (){ 
                         console.log('getter called');
                         return this.firstName + '-' +this.lastName;
                 }
             }
         });
         vm.$mount('#root');
 ​
     </script>
 ​
 </body>
 </html>

插件

 vue3-snippets-for-vscode

监视(侦听)属性

监视属性watch: 1,当被监视的属性变化时，回调函数自动调用进行相关操作 2,监视的属性必须存在，才能进行监视！！ 3.监视的两种写法： (1),new Vuel时传入watch配置 (2),通过vm.watch监视

 <div id="root">
     <h1>今天天气很{{info}}</h1>
     <button @click="isHot = ! isHot ;">切换天气</button>
 </div> 
 <!-- //在模板里，会在vm中找，所以如果@click写了alert会报错 -->
 <!--绑定事件的时候：@xxx="yyy”yyy可以写一些简单的语句--> 
 <script>
     Vue.config.productionTip = false;
     const vm = new Vue({
     el: '#root',
     data() {
         return {
             isHot: true,                    
         }
     },
     computed: {
         info() {
             return this.isHot? 'hot' : 'cool';
         }
     },
     // watch: {
     //     isHot:{
     //         immediate:true, //初始化时让handler调用一下
     //         handler(newValue, oldValue) {
     //             console.log('have changes',newValue,oldValue);
     //         }
     //     }
     // },
     methods: {
     // changeWeather() {
     //     this.isHot = ! this.isHot ;
     // }
     }
 ​
 });
 vm.$watch('isHot', {
    immediate:true, //初始化时让handler调用一下
    handler(newValue, oldValue) {
        console.log('have changes',newValue,oldValue);
    }
 });
 </script>

深度监视

<div id="root">
         <h1>今天天气很{{info}}</h1>
         <button @click="isHot = ! isHot ;">切换天气</button>
         <h1>a:{{numbers.a}}</h1>
         <button @click="numbers.a++;">a++</button>
         <h1>b:{{numbers.b}}</h1>
         <button @click="numbers.b++;">b++</button>
     </div> 
     <script>
         Vue.config.productionTip = false;
 ​
         const vm = new Vue({
             el: '#root',
             data() {
                 return {
                     isHot: true,
                     numbers: {
                         a:1,
                         b:1
                     }
                 }
             },
             computed: {
                 info() {
                     return this.isHot? 'hot' : 'cool';
                 }
             },
             watch: {
                 isHot:{
                     immediate:true, //初始化时让handler调用一下
                     handler(newValue, oldValue) {
                         console.log('have changes',newValue,oldValue);
                     }
                 },
                 //监视多级结构中某个属性的变化
                 // 'numbers.a': {
                 //     handler(newValue, oldValue) {
                 //         console.log(newValue, oldValue);
                 //     }
                 // }
                 //Vue默认可以检测到多级结构数据改变，但是watch默认不能
                 numbers: { //监视多级结构内部改变
                     deep:true, 
                     handler(newValue, oldValue) {
                         console.log(newValue,oldValue);
                     }
                 }
             },
             methods: {
                 
             }
 ​
         });
 ​
     </script>

简写 (没有immediate deep才可以简写 )

 <!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>
     <script src="../js/vue.js"></script>
 </head>
 <body>
     <div id="root">
         <h1>今天天气很{{info}}</h1>
         <button @click="isHot = ! isHot ;">切换天气</button>
     </div> 
     <script>
         Vue.config.productionTip = false;
 ​
         const vm = new Vue({
             el: '#root',
             data() {
                 return {
                     isHot: true,
                     numbers: {
                         a:1,
                         b:1
                     }
                 }
             },
             computed: {
                 info() {
                     return this.isHot? 'hot' : 'cool';
                 }
             },
             watch: {
                 //正常写法
                 // isHot:{
                 //     // immediate:true, //初始化时让handler调用一下
                 //     // deep: true, //深度监视
                 //     handler(newValue, oldValue) {
                 //         console.log('isHot had changes',newValue,oldValue);
                 //     }
                 // },
                 //简写
                 // isHot (newValue, oldValue) {
                 //         console.log('isHot had changes',newValue,oldValue);
                 // },
             },
             methods: {
                 
             }
 ​
         });
         // 正常写法
         // vm.$watch('isHot', {
         //     //     // immediate:true, //初始化时让handler调用一下
         //     //     // deep: true, //深度监视
         //     //     handler(newValue, oldValue) {
         //     //         console.log('isHot had changes',newValue,oldValue);
         //     //     }
         // });
 ​
         //简写
         vm.$watch('isHot', function(newValue, oldValue) {
                      console.log('isHot had changes',newValue,oldValue);
         });
         
     </script>
 ​
 </body>
 </html>

与计算属性区别 同步用computed，异步用watch

computed.和watch之间的区别： 1,computedi能完成的功能，watch都可以完成。 2,watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。 两个重要的小原则： 1,所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。 2,所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等），最好写成箭头函数， 这样this的指向才是vm或组件实例对象。

 setTimeout(()=> {
     
 },1000);