Vue学习笔记

基础语法

Vue的options

Vue文档
学习视频

常用options

• data 类型：object | function
  vue实例对应的数据对象（组件中只接受function）

• el 类型：string | HTMLelement
  决定vue实例管理哪一个对象

• methods 类型：function
  vue实例的方法

• 生命周期函数
  

• computed
  计算属性，需要对数据进行变化再显示。每个计算属性都包含一个setter和getter方法，但一般只设置getter方法。
  与methods的对比：computed看作一种属性，而不是方法，且computed有缓存，在其被调用多次，并且其中的data无变化时，直接返回缓存中data，不再重新执行函数进行计算。

• watch
  监听数据的变化。

var vm = new Vue ({
   el: "#app",
   data: {  a = 1 ,
            b = "<p>this<p>",
            imgURL = "http://img",
            isActive = true,
            isLine = false,
            active = "color",
            line = "active"
            },
   computed: {
     //省略了setter
     link: function(){
       return this.line + ' ' + this.active;
     }
     //完整形式
     //link:{
     //  set: function(){
     //  },
     //  get: function(){
     //  }
     //}
   },
   methods: {
     plusSelf: function(){
       this.a++;
     }
   },
   watch:{
     a(newValue,oldValue){
     }
   }
   activated(){
     //该组件活跃时
   }
   deactivated(){
     //该组件不活跃时
   }
   #局部组件的注册方式
   components:{
      cpn:cpnC，
      #语法糖形式
      cpn2:{
        template:`
          <div>
            <p></p>
          </div>
        `
      }
   }
})

v-once

<div v-once>{{a}}</div>

只渲染一次，不会根据数据的改变而改变。

v-html

<div v-html = "b" ></div>

根据html进行解析，然后渲染。

v-text

与v-html相似，但不进行解析，直接根据文本渲染；与mustache相似，但会将文本内容直接覆盖掉。

v-pre

<div>{{a}}</div>         =>1
<div v-pre>{{a}}</div>   =>{{a}}

将内容原封不动的展示出来，不进行解析。

v-cloak

在vue解析前，元素存在该属性，在解析完成后，该属性自动消失。（主要用于：为其设置style，防止页面在解析html后解析vue前将源代码显示在页面上）

v-bind(：)

动态绑定元素的属性。

<img :src = "imgURL"></img> 
<div :class = "{active:isActive,line:isLine}"></div> #动态绑定class
<div :class = "[active,line]"></div> #动态绑定class

v-on(@)

绑定事件监听器。
若方法需要传入参数，但没有传入时（没有小括号），默认传入event，有小括号时传入undefined。

<button @click = "plusSelf"></button>

修饰符：

• .stop 阻止冒泡

#点击button时只会触发btnClick，不会触发divClick
<div @click="divClick">
  <button @click.stop="btnClick"></button>
</div>

• .prevent 组织默认事件

#阻止了表单的自动提交
<form action="baidu">
  <input type="submit" value="提交" @click.prevent="submitClick"></input>
</form>

• .{keyCode|keyAlias} 监听某个键帽的点击

#当回车键keyup时触发事件
<input type="text" @keyup.enter="keyUp"></input>

• .native 监听组件根元素的原生事件

• .once 只触发一次回调

v-model

表单和数据进行双向绑定。
与mustache相比，在界面上修改data时，vue中的data也会发生改变。

<input type="text" v-model="line">{{line}}</input>

修饰符：

• .lazy 在敲击回车键或者失去焦点时再进行数据的更新
• .number 由于v-model在更新数据时默认是string类型，该修饰符将其转为number类型。
• .trim 去除更新数据两端的空格

v-show

是否显示元素。
与v-if对比：显示时没有不同，不显示时，v-if的元素不存在于dom中，而v-show只是将元素的display变为none。

v-slot（#）

替换了slot和slot-scope。只能用在template或单独带prop的默认插槽中。

组件

使用步骤

• 创建组件构造器

const cpnC = Vue.extend({
  template:`
    <div>
      <p></p>
    </div>
  `
})

为使代码清晰，可将template部分抽离出去。

#HTML部分
<template id="cpn">
  <div>
    <p></p>
  </div>
</template>
#JS部分
const cpnC = Vue.extend({
  template:"#cpn"
})

• 注册组件
  分为全局组件和局部组件，全局组件可以在多个vue实例中使用。局部组件在某个vue实例的options中注册。

Vue.component('my-cpn',cpnC)    #全局注册

注册组件还有语法糖写法，即将创建组件构造器与注册组件这两步相融合。

Vue.component('my-cpn',{
  template:`
    <div>
      <p></p>
    </div>
  `
})

• 使用组件

<div id = "app">
  <my-cpn></my-cpn>
</div>

父子组件

创建父组件时注册子组件

const cpnC2 = Vue.extend({
  template:`
    <div>
      <p></p>
      <cpn1></cpn1>    #可以在父组件中使用子组件
    </div>
  `,
  components:{
    cpn1: cpnC1
  }
})

由于子组件无法直接访问父组件和vue实例中的数据，故需要在父子组件之间进行通信。

• 父组件向子组件传数据 (props)

#父组件
<div id="app">
  <cpn :cmovies="movies" :cmessage="message"></cpn>
</div>
#子组件
<template id="cpn">
  <div>
    <p>{{cmovies}}</p>
    <p>{{cmassage}}</p>
  </div>
</template>

const cpn = {
  template:'#cpn',
  props:['cmovies','cmessage'],
  //限制数据的类型，props的对象写法
  //props:{
    //cmovies:Array,
    //cmessage:[String,Number] 多个可能的类型
    //设置默认值，但当其为Array或者Object时，default需要为函数
    //cmassage:{
      //type:String,
      //default:'hello',
      //required:true   必须传值，否则报错
    //}
  //}
  data(){
    return{}
  },
  methods:{}
}
const vm = new Vue{
  el:'#app',
  data:{
    message:'hi',
    movies:['a','b','c']
  }
  component:{
    cpn 
  }
}

• 子组件向父组件传数据 (event)

#父组件
<div id="app">
  #父组件监听子组件发射的事件,默认传参（item）
  <cpn @itemClick="cpnClick"></cpn>
</div>
#子组件
<template id="cpn">
  <div>
    <button v-for="item in categories" @click="btnClick(item)">
      {{item.name}}
    </button>
  </div>
</template>

const cpn = {
  template:'#cpn',
  data(){
    return{
      categories:[
        {id:'aaa',name:'热门推荐'},
        {id:'bbb',name:'热门'},
        {id:'ccc',name:'热'},
      ]
    }
  },
  methods:{
    btnClick(item){
      //console.log(item);
      #子组件发射事件
      this.$emit('itemClick',item);
    }
  }
}
const vm = new Vue{
  el:'#app',
  data:{},
  component:{
    cpn 
  },
  methods:{
    cpnClick(item){
      console.log(item);
    }
  }
}

• 父访问子（$children| $refs）访问子组件对象，使用其方法或数据。

# $children
# 在父组件方法中直接调用
# 但由于子组件位置可能变化，其下标也需要改变
this.$children[0].btnClick();

# $refs
# 在子组件的template中标明ref
<cpn ref="abc"></cpn>

this.$refs.aaa.btnClick();

• 子访问父（$parent） 不建议使用，耦合度较高

this.$parent.name;

插槽（slot）

• 基本用法
  在原来的基础上增加扩展性。

<div id="app">                               #显示画面
   #中间的内容替换slot部分                      this
  <cpn><p>new</p></cpn>            =>          new
//<template v-slot><p>new</p></template>       
</div>                                         

<template id="cpn">
  <div>
    <p>this</p>
    //设置默认值
    <slot><button>按钮</button></slot>
  </div>
</template>

• 具名插槽，准确替换slot部分内容。

<div id="app">                              => #显示画面
  <cpn><span slot="mid">标题</span></cpn>       左 标题 右
  //<template v-slot:"mid"><p>标题</p></template> 
</div>
<template id="cpn">
  <div>
    <slot name="left"><span>左</span></slot>
    <slot name="mid"><span>中</span></slot>
    <slot name="right"><span>右</span></slot>
  </div>
</template>

• 作用域插槽，父级替换内容(父级改变原子组件的展示样式)，实际数据由子组件提供

<div id="app"> 
  <cpn>
    <template slot-scope="slot">
      <span v-for="item in slot.data">{{item-}}</span>
    </template>
    //<template v-slot:default="slotProps">
    //  <span v-for="item in slotProps.data">{{item-}}</span>
    //</template>
  </cpn>   
</div>
<template id="cpn">
  <div>
    <slot :data="languages">
      <ul>
        <li v-for:"item in languages">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>

const vm = new Vue{
  el:'#app',
  data:{},
  component:{
    cpn:{
      template:"#cpn",
      data(){
        return {
          languages:["c","c++","c#"]
        }
      }
    }
  }
  }