Vue组件需要注意的事项

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可以是数值，也可以是字符串。