Vue组件需要注意的事项

我不是女神ヾ 2023-05-29 02:34 8阅读 0赞

## Vue.js ##

1、Vue的下载安装：Vue.js官网 | 学习 | 教程 | 安装。  
2、Vue.js的版本：2.6.10。  
3、Vue的第一个程序：Hello,World!

var vm=new Vue({
         el:‘#box’,
         data:{
           message:‘Hello,World!’
    }
    });

*  （1）vm：Vue实例，利用Vue构造函数/构造器创建。
 *  （2）Vue选项：  
    A .el，指定哪个DOM结构和Vue实例进行绑定。  
    B .data，指定与Vue实例绑定的DOM结构中可以使用的数据。
 *  （3）挂载点：与Vue实例通过el选项所绑定的DOM结构被称为“挂载点”。

## 计算属性与侦听属性 ##

一、计算属性：

*  1、计算属性在Vue实例中使用computer选项来实现。
 *  2、计算属性的书写格式：  
    computed:\{  
    属性名:function()\{  
    return 返回值;  
    \}  
    \}  
    在computed中定义的function不是方法，而是属性。  
    计算属性在data中不用书写。
 *  3、例1：实现两个数值的相加。

computed:{
    add:function(){
    return this.numA+this.numB;
    }
    }

（1）上述代码中的计算属性是add。  
（2）计算属性执行的function中涉及到的数据量被称为计算属性的依赖数据。  
（3）计算属性：当该属性的依赖数据发生变化时，则该属性会重新进行计算。  
（4）计算属性执行的function中renturn的返回值是计算属性计算的最终结果。  
例2：实现两个数值的加减乘除运算（add、sub、mul、div）。

*  4、计算属性包含两个操作：  
    （1）getter，获取计算属性的结果，默认的function是获取结果。用get:function()\{\}实  
    现。当依赖数据发生变化时会自动执行get函数。  
    （2）setter，设置计算属性的结果。用set:function()\{\}实现。  
    当计算属性通过v-model绑定在表单元素上，用户对表单元素的值进行了修改时  
    执行set函数。

computed:{
       result:{
         get:function(){
           return 返回值;
    },
    set:function(参数){
    }
    }
    }

## 二、侦听属性： ##

1、侦听属性依靠watch选项来实现对自身变量的检测。  
侦听属性只能检测在data中设置好的数据。  
当侦听的属性值发生变化时，执行侦听属性所对应的函数。

watch:{
       侦听属性：function(newValue,oldValue){
         //当侦听属性的取值发生变化时所执行的代码
    }
    }
    例：watch:{
           kb:function(newValue,oldValue){
              this.b=newValue*1024;
    }
    }

2、侦听属性的第二种语法格式：可以为侦听属性添加新的属性。

watch:{
       侦听属性:{
          handler:function(newValue,oldValue){
              //当侦听属性的取值发生变化时所执行的代码
    }
    }
    }

例：watch:{
          kb:{
            handler:function(newValue,oldValue){
               this.b=newValue*1024;
    },
    immediate:true     //当Vue实例创建成功后自动执行kb的handler函数。
    }
    }

3、侦听属性的新属性：  
immediate：逻辑值。若设置为true，则当Vue实例创建时会自动执行一次侦听属性的  
函数。  
deep：逻辑值。设置是否进行深层的监听（针对自定义对象来进行设置的）。  
（1）当侦听属性是一个对象时，改变对象内属性的取值时无法让侦听属性执行函数的。  
（2）除非改变侦听属性的完整对象，才可以执行侦听属性的函数。  
（3）当设置了deep:true时，利用对象的属性进行修改，对象属性的原值无法得到保留。

例：data:{ obj:{a:10,b:20} }
        （A）watch:{
                obj:function(newValue,oldValue){
                     console.log('旧值：a=' + oldValue.a + ",b=" + oldValue.b);
    	console.log('新值：a=' + newValue.a + ",b=" + newValue.b);
    }
    }

测试：vm.obj.a=100;       //不触发侦听属性obj的function函数
          vm.obj={a:100,b:500};   //触发侦听属性obj的function函数
             旧值：a=10,b=20
             新值：a=100,b=400
        （B）watch:{
                obj:{
    handler:function(newValue,oldValue){
                     console.log('旧值：a=' + oldValue.a + ",b=" + oldValue.b);
    	console.log('新值：a=' + newValue.a + ",b=" + newValue.b);
    },
    deep:true
    }
    }
    测试：vm.obj.a=‘A’    //触发侦听属性obj的handler函数
             旧值：a=‘A’,b=20
             新值：a=‘A’,b=20

4、可以通过$watch形成Vue实例的方法：

vm.$watch(‘kb’,function(newValue,oldValue){
          this.b=newValue*1024;
    })

*  5、计算属性和侦听属性的区别：  
    （1）计算属性使用computed选项实现；侦听属性使用watch选项或者$watch()方法实现。  
    （2）计算属性无需在data数据中定义；侦听属性必须侦听data数据中已有的变量。  
    （3）计算属性是依赖变量发生变化自动再次计算该属性的值。  
    侦听属性是被侦听的变量发生变化执行指定的函数。  
    （4）计算属性无法完成异步操作；侦听属性可以完成异步操作。

# 组件与复用技术 #

组件（Component）：组件是可以复用的Vue实例。

*  一、组件的分类与注册：  
    1、组件的分类：  
    （1）局部组件：在Vue实例内部使用components选项注册局部组件，只能适用在本  
    Vue实例的挂载点内部。  
    （2）全局组件：使用Vue.component()方法注册全局组件，可以使用在所有Vue实例的  
    挂载点内部。  
    2、局部组件的注册与使用：  
    （1）在JS文件中注册局部组件：

var vm=new Vue({
           el:‘#app’,
           data:{},
           components:{
              ‘my-button’:{
                 template:‘<button class=“btn”>单击按钮</button>’
    }
    }
    })

*  （2）在HTML文件中使用局部组件：

<my-button></my-button>

*  （3）组件名称：
    
    A .若组件名称为全小写模式：mybutton，则使用时也是全小写模  
    式 `<mybutton></mybutton>。`  
    B .若组件名称采用PascalCase【大驼峰命名】:MyButton，则使用时必须采用-修正  
    组件名称：`<my-button></my-button>。`  
    C .若组件名称采用CamelCase【小驼峰命名】:myButton，则使用时必须采用-修正  
    组件名称：`<my-button></my-button>。`  
    D .若组件名称采用kebebCase【短横线间隔符】：my-button，则使用时也是用短横  
    线间隔符的形式：`<my-button></my-button>`  
    3、全局组件的注册与使用：

Vue.component(‘my-button’,{
          template:‘<button class=“btn”>单击命令按钮</button>’
    })

*  二、组件的选项：  
    1、template选项：为组件规划DOM结构。  
    （1）“单个根元素”特性：template选项在规划DOM结构时必须有一个根元素。  
    （2）语法格式：  
    ES4/ES5：使用单引号引住DOM结构，配合折行转义字符 \\

例：template:‘\
                  <div>\
                    <button>单击</button>\
                    <a href=“#”>超级链接</a>\
    </div>\
    ’

ES6：使用字符串模板来实现DOM结构的规划。
            例：template:`
              <div>
                <button>单击</button>
                <a href=“#”>超级链接</a>

\` 2、data选项： 组件中的data选项必须是一个function，==所有的数据必须使用return语句返回一个对象== 来实现。

例：data:function(){
           return {
               message:‘xxxxxx’
    }
    }

3、methods选项：为template选项指定的DOM结构绑定事件。
     4、computed、watch选项：为组件实例设置计算属性和侦听属性。
     5、props选项：为组件注册由用户使用时提供的属性。
    取值：（1）字符串数组  （2）对象
    A .字符串数组：props:[‘linkUrl’,‘title’,‘target’,‘txt’]
      注册的属性名称若采用驼峰式命名，则使用时必须转换为“短横线间隔符”方式。
      <my-link link-url=“http://www.qq.com” title=“走进腾讯” txt=“腾讯视频”>
    </my-link>
    
    
    B .对象：允许对组件的属性实现数据验证。
      props:{
         propA:Number,            //限制propA属性必须是数值
         propB:[Number,String],     //限制propB属性可以是数值，也可以是字符
         propC:{
           type:Number,           //限制propC属性必须是数值
           default:100,            //为propC设置默认取值为100
           required:true,           //设置PropC属性为必备属性
           validator:function(value){  //为PropC属性设置范围验证机制
             return value>20            //propC的取值必须大于20
    }
    },
    propD:{
      type:Array,            //限制propD属性必须为数组
      default:function(){      //数组类型属性的默认值必须是一个函数的返回值
        return [‘元素1’,‘元素2’]
    }
    }
    }
      例：制作一个<my-book></my-book>的组件。
    （1）包括bookName、author、price、count四个属性。
    （2）bookName是必须书写的属性。
    （3）author是一个数组，并带有默认值（作者一、作者二）
    （4）price是一个数值，默认值为0，取值必须大于20。
    （5）count可以是数值，也可以是字符串。