Vue基础学习笔记入门必学（续）

Rich D

于 2021-11-22 18:21:25 发布

阅读量566

点赞数 2

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/v3424/article/details/121476902

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

资料：

链接：https://pan.baidu.com/s/1BTY8ahk6LrHxxEvmKQnXcA
提取码：vzjk

1 - 3学习：

https://blog.csdn.net/v3424/article/details/121475382

4. 生命周期

4.1 生命周期是什么

Vue的生命周期, 就是Vue实例从创建到销毁的过程.
完整过程包含: 开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染→销毁

vue生命周期含8步骤（有8个沟子函数）：创建、挂载、更新、销毁
created() 创建后
mounted() 挂载后

4.2 生命周期流程

请添加图片描述

属性名	执行时机	描述
beforeCreate	创建前	Vue实例创建时触发, 一般不做操作
created	创建后	挂载数据，绑定事件等之后，执行created函数一般可以获取初始数据
beforeMount	挂载到页面前	已经创建虚拟dom, 准备渲染
mounted	挂载到页面后	已经渲染真实dom
beforeUpdate	更新页面前
updated	更新页面后
beforeDestroy	销毁vue之前
destroyed	销毁之后

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message"> <br/>
        原始数据：{{message}} <br/>
    </div>
</body>
</html>
<script>
    let vue = new Vue({
        el: '#app',
        data:{
            message: 'abc'
        },
        beforeCreate() {
            console.info('1.创建前')  
        },
        created() {
            console.info('2.创建')
        },
        beforeMount() {
            console.info('3.挂载前')  
        },
        mounted() { //页面加载成功
            console.info('4.挂载')  
        },
        beforeUpdate() {
            console.info('5.更新前')  
        },
        updated() {
            console.info('6.更新')  
        },
        beforeDestroy() {
            console.info('7.销毁前')  
        },
        destroyed() {
            console.info('8.销毁')  
        },
    })
    //销毁
    // vue.$destroy()
</script>

5. 计算属性和监听器

5.1计算属性 computed

5.1.1 存在问题

插值表达式, 可以完成表达式的计算,如果逻辑复杂时,将很难维护. 例如:

	<div id="app">
 	 {{ message.split('').reverse().join('') }}
	</div>

5.1.2 基本使用

Vue计算属性computed就是用来处理复杂逻辑的. 当data区域的数据变更是,将进行自动计算.

<script>
    new Vue({
        el: '#app',
        computed: {
            属性名(){
			  // 功能
                return 返回值;
            }
        },

    })
</script>

案例：字符串倒排

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        {{showMessage}}
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            message : 'abcd'
        },
        computed: {
            showMessage(){
                return this.message.split('').reverse().join('')
            }
        },

    })
</script>

5.1.3 computed和methods区别

计算属性，用于实时计算，只要数据发生了更改才计算。缓存计算结果。
方法，每次调用都执行

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="计数" @click="count++"> <br/>

        <h2>计算属性</h2>
        {{showCount}}           <!--第一次时，执行-->
        {{showCount}}           <!--第二次，读取缓存-->
  
        <h2>普通方法</h2>
        {{showCount2()}}
        {{showCount2()}}
  
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            count : 0
        },
        computed: {
            showCount(){
                console.info('计算属性执行')
                return '计算属性：' + this.count;
            }
        },
        methods: {
            showCount2(){
                console.info('普通方法执行')
                return '普通方法：' + this.count;
            }
        },
    })
</script>

5.1.4 案例：购物车

在这里插入图片描述

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
        a {
            text-decoration: none;      /*a标签取消下划线*/
            font-size:20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <table border="1" width="500">
            <tr>
                <td>编号</td>
                <td>标题</td>
                <td>单价</td>
                <td>购买数量</td>
                <td>小计</td>
            </tr>
            <tr v-for="(book,index) in cart" :key="index">
                <td>{{index+1}} </td>
                <td>{{book.title}} </td>
                <td>{{book.price}} </td>
                <td>
                    <a href="#" @click.prevent="book.count > 0 ? book.count-- : 0">-</a>
                    {{book.count}}
                    <a href="#" @click.prevent="book.count++">+</a>
                </td>
                <td>{{book.price * book.count}} </td>
            </tr>
            <tr>
                <td colspan="3"></td>
                <td colspan="2">总价：{{totalPrice}} </td>
            </tr>
        </table>
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            cart :[
                {
                    title : '葵花籽真经',
                    price : 32,
                    count : 0
                },
                {
                    title : '程序员的修养',
                    price : 66,
                    count : 0
                }
            ]
        },
        computed: {
            totalPrice() {
                var sum = 0
                this.cart.forEach( (book) => {
                    sum += book.price * book.count;
                })
                return sum;
            }
        }
    })
</script>

5.1.5 高级使用

计算属性提供了setter方法对属性进行修改

<script>
    new Vue({
        el: '#app',
        computed: {
            属性名: {
			  get: function() { return ...} ,      //getter方法
                set: function(val) { .... }		   //setter方法
            }
        },
    })
</script>

在这里插入图片描述

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        请输入姓名：<input type="text" v-model="username">  <br/>

        姓：{{firstname}} <br/>
        名：{{secondname}}

    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            firstname: '',
            secondname: ''
        },
        computed: {
            username: {
                get() {
                   return this.firstname + this.secondname;
                },
                set(val) {
                    if(val){
                        this.firstname = val.substring(0,1)
                        this.secondname = val.substring(1)
                    } else {
                        this.firstname = ''
                        this.secondname = ''
                    }
                }
            }
        },

    })
</script>

5.2监听器 watch

5.2.1 什么是监听器

监听数据的变化

<script>
    new Vue({
        el: '#app',
        data: {
            变量: '',
        },
        watch: {
            变量: function(新数据, 旧数据) {
                
            },
 	       变量2：{
                handler: function (val, oldVal) { /* ... */ },
      		  deep: true					/*监听对象属性，不论嵌套多深*/
		  }
        },
    })
</script>

5.2.2 基本语法

案例：拆分姓名（第二版）

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        请输入姓名：<input type="text" v-model="username">  <br/>

        姓：{{firstname}} <br/>
        名：{{secondname}}

    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            username: '',
            firstname: '',
            secondname: ''
        },
        watch: {
            username: function(val, oldVal) {
                if(val){
                    this.firstname = val.substring(0,1)
                    this.secondname = val.substring(1)
                } else {
                    this.firstname = ''
                    this.secondname = ''
                }
            }
        },

    })
</script>

5.2.3 高级使用：监听对象属性

案例：拆分姓名（第三版）

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        请输入姓名：<input type="text" v-model="user.username">  <br/>

        姓：{{firstname}} <br/>
        名：{{secondname}}

    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            user: {
                username: '',
            },
            firstname: '',
            secondname: ''
        },
        watch: {
            user: {
                handler: function(val, oldVal) {
                    if(val.username){
                        this.firstname = val.username.substring(0,1)
                        this.secondname = val.username.substring(1)
                    } else {
                        this.firstname = ''
                        this.secondname = ''
                    }
                },
                deep: true
            }
        },

    })
</script>

6. 组件

6.1 什么是组件

组件是可复用的 Vue 实例，且带有一个名字

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如：头部导航、尾部信息等模块。
但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。

6.2 组件分类

组件的作用域分为两种：全局组件和局部组件。

全局组件：在所有的Vue实例中都可以使用
局部组件：只有在注册了组件的Vue实例中才可以使用

6.2.1 全局组件

使用 Vue.component 定义的组件为全局组件，在所有的 Vue 实例中都可以使用。
比如以下代码中定义了一个全局组件，这个组件在两个Vue实例中都可以使用：

语法

Vue.component("",{
    template: ``,   // 定义html部分，要求有一个根标签
    data() {        // 定义数据部分
        return {
            
        }
    },
})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>vue组件</title>
  <script src="js/vue.js"></script>
</head>

<body>
  <div id="app1">
    <!--组件必须绑定在实例下面才能起作用-->
    <my-nav></my-nav>
  </div>

  <div id="app2">
      <!--组件必须绑定在实例下面才能起作用-->
      <my-nav></my-nav>
    </div>
  <script>
    //定义组件1
    Vue.component("MyNav", {
      template: '<div>您好!{{name}}</div>',

      data: function () {
        return {
          name: "jack"
        }
      }
    })

    //下面两个实例都可以使用全局组件
    new Vue({
      el: '#app1'
    });

    //下面两个实例都可以使用全局组件
    new Vue({
      el: '#app2'
    });
  </script>
</body>
</html>

6.2.2 局部组件

局部组件是指只能在注册了该组件的 Vue 实例中才可以使用。（先需要注册才能用）
局部组件的定义只是定义一个组件对象：

局部组件的定义只是定义一个组件对象：

var 组件名 = { ... }

在需要使用这个组件的Vue中注册组件

const app = new Vue({
...
components:{
    组件名：组件对象
}
})

局部组件使用实例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>vue组件</title>
  <script src="js/vue.js"></script>
</head>

<body>
   <div id="app1">
      <!--组件必须绑定在实例下面才能起作用-->
      <my-hello></my-hello>
    </div>
  <script>

    var hello = {
      template: '<div>您好!现在是在使用子组件</div>',
    };
    //下面两个实例都可以使用全局组件
    new Vue({
      el: '#app1',
      components:{
        "MyHello":hello
      }
    });
  </script>
</body>
</html>

6.3 组件自定义属性

6.3.1 什么是组件属性？

什么是组件属性？
比如我们在使用img标签时， src就是属性。如果我们把img看做一个组件的话，src就是这个组件的属性。

总结：组件属性用于父组件向子组件传递数据。

6.3.2 定义属性

当需要为组件设置属性时，我们需要先在定义组件时使用 props 来设置这个组件上所有属性的名字：

Vue.component('...',{
...
props:[属性名字数组]
})

定义了组件属性之后，在组件中就可以像使用一个普通数据一样使用属性：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>vue组件</title>
  <script src="js/vue.js"></script>
</head>

<body>
  <div id="app1">
    <!--组件必须绑定在实例下面才能起作用-->
    <my-nav welcome="张三丰"></my-nav>
  </div>
  <script>
    Vue.component('MyNav', {
      props: ['welcome'],
      template: '<div>欢迎您，游客! {{welcome}}</div>'
    })
    //下面两个实例都可以使用全局组件
    new Vue({
      el: '#app1'
    });
  </script>
</body>
</html>

6.3.3 绑定属性值

还可以把属性值绑定到 Vue 的数据中,实现方式如下:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>vue组件</title>
  <script src="js/vue.js"></script>
</head>

<body>
  <div id="app1">
    <!--组件必须绑定在实例下面才能起作用-->
    <my-nav :welcome="txt"></my-nav>
  </div>
  <script>

    Vue.component('MyNav', {
      props: ['welcome'],
      template: '<div>欢迎您，游客! {{welcome}}</div>'
    })
    //下面两个实例都可以使用全局组件
    new Vue({
      el: '#app1',
      data:{
        txt:"绑定数据到属性"
      }
    });
  </script>
</body>
</html>

6.3.4 组件事件

1）原生事件
当需要在组件上绑定 JS 中原生的事件时，必须要添加 .native 修饰符，否则该事件是无法触发的。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>vue组件</title>
  <script src="js/vue.js"></script>
</head>

<body>
  <div id="app1">
    <!--组件必须绑定在实例下面才能起作用-->
    <my-nav :welcome="txt" @click.native="hello">您好</my-nav>
  </div>
  <script>

    Vue.component('MyNav', {
      props: ['welcome'],
      template: '<button>欢迎您，游客! {{welcome}}</button>'
    })
    //下面两个实例都可以使用全局组件
    new Vue({
      el: '#app1',
      data:{
        txt:"绑定数据到属性"
      },
      methods:{
        hello:function(){
          alert("组件事件");
        }
      }
    });
  </script>
</body>
</html>

2 ) 自定义事件
除了原生的事件外，还可以为组件添加自定义的事件，通过自定义的事件，子组件可以向父组件传递消息
在组件中我们可以使用 emit 触发一个事件，这个事件的名字是我们自己定义的：

定义方法如下：声明事件名称
this.$emit(‘事件名’)
在使用这个组件时，就可以为这个新的事件名绑定一个事件：
<my-component v-on:事件名=“doSomething”>
或者：
<my-component @事件名=“doSomething”>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>vue组件</title>
  <script src="js/vuejs-2.5.16.js"></script>
  <script src="js/toDao.js"></script>
</head>

<body>
  <div id="app1">
    <!--组件必须绑定在实例下面才能起作用-->
    <to-do @todo="todo"></to-do>
  </div>
  <script>
    
    //下面两个实例都可以使用全局组件
    new Vue({
      el: '#app1',
      methods: {
        todo: function () {
          console.log('todo组件中发表了新的todo')
        }
      }
    });
  </script>
</body>
</html>

Rich D

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
Vue基础学习笔记入门必学（续）

Vue入门学习1 - 3学习：4. 生命周期4.1 生命周期是什么4.2 生命周期流程5. 计算属性和监听器5.1计算属性 computed5.1.1 存在问题5.1.2 基本使用5.1.3 computed和methods区别5.1.4 案例：购物车5.1.5 高级使用5.2监听器 watch5.2.1 什么是监听器5.2.2 基本语法5.2.3 高级使用：监听对象属性6. 组件6.1 什么是组件6.2 组件分类6.2.1 全局组件6.2.2 局部组件6.3 组件自定义属性6.3.1 什么是组件属性？6.
复制链接

扫一扫