VUE 计算属性/监听/方法/样式/插槽/组件/v-once/非父子组件传值(bus和vuex)/localStorage

1.Vue 实例

• 实例

{{message}}

let vm = new Vue({
    el: '#root',
    data:{
        message: 'hellow world'
    }
}) 
创建一个vue实例  接管id为root的dom

• 组件

定义一个组件


Vue.component('item', {
  template: '
heloo world
'
})

Vue的底层也会把component转换成 new Vue 实例

• 浏览器打印vm 实例

  
  
  vm实例
  
  
  data
  
  
  通过vm.$el 把实例负责接管的dom最外层元素打印出来
  
  
  凡是以红框开始的东西，指的都是Vue实例属性或者实例方法
• 销毁Vue 实例

vm.$destroy()

2.Vue 计算属性，方法和侦听器

• 计算属性

计算属性

{{fullName}}

data:{
    firstName: 'Jack',
    lastName:'Lee',
},
computed:{
    fullName: function() {
        return this.firstName + ' ' + this.lastName
    }
}

计算属性非常重要的点：内置缓存，如果依赖的变量没有发生变化，计算属性就不会发生计算，用上次缓存的结果

• 方法

{{fullName()}}

methods:{
  fullName: function(){
    return this.firstName + " " + this.lastName
  }
}

只要修改变量，方法就会执行一次，不论改变的是不是依赖的变量

• 侦听器

data:{
  firstName:"jack",
  lastName:"Lee",
  fullName:"Dell lee",
  age: 28
},
watch:{
  firstName:function(){
    this.fullName=this.firstName + ' ' + this.lastName
  },
  lastName:function(){
    this.fullName=this.firstName + ' ' + this.lastName
  }
}

3.Vue 计算属性的setter和getter

data:{
  firstName:"jack",
  lastName:"Lee"
},
computed:{
  fullName:{
    get:function(){
      return this.firstName + " " + this.lastName
    },
    set:function(value){
      let arr = value.split(" ");
      this.firstName = arr[0];
      this.lastName = arr[1];
    }
  }
}

4.Vue 中的样式绑定

1. 根据变量显示class名
  :class="{activated: isActivated}"
2. 直接给变量添加class名
  :class="[activated,activatedOne]"
  data:{
    activated:"",
    activatedOne:"activated-one"
  }
3. 样式写成对象
  :style="styleObj"
  data:{
    styleObj: {
        color: "red"
    }
  }
  4. 样式写成数组
  :style="[styleObj,{fontSize: '20px' }]"
  data:{
    styleObj: {
        color: "red"
    }
  }

5.Vue 中使用插槽

不使用插槽时

    



优雅的使用插槽

  



多个插槽同时使用（具名插槽）

  
    
header
    
footer
  



Vue 中的作用域插槽（自定义循环标签）

  
    
  

6.Vue 动态组件与v-once 指令

1.利用变量v-if控制显示

  
  
  change


=========================================
2.动态组件

  
  // 根据组件名称自动加载组件
  change


=========================================
3. v-once 指令

  
  
  change

v-once 只渲染一次 未来即使变量发生变化 也不改变

7.Vue 非父子组件传值

• bus

1. 发布订阅模式（Bus/总线/发布订阅模式/观察者模式）
  

    
    
  
  Vue.prototype.bus = new Vue()
  Vue.component('child',{
    data: function(){
        return {
          selfContent: this.content
        }
    },
    props:{
        content: String
    },
    template:'
{{selfContent}}
',
    methods:{
        handleClick: function(){
          this.bus.$emit('change',this.selfContent)
        }
    },
    mounted: function(){
        let _this = this
        this.bus.$on('change',function(msg){
           _this.selfContent= msg
        })
    }
  })

• vuex

  
  
  Vuex

2. 官方提供Vuex
 · 组件调用dispatch方法来操作Actions
 · 组件/Actions调用Commit方法来操作Devtools去改变state中的数据

 · 安装与使用
  npm install vuex --save

src/store/index.js:
-------------------
 import Vue from 'vue'
 import Vuex from 'vuex'
  
 Vue.use(Vuex)

 export default new Vuex.Store({
      state:{
        city:'上海'
      }
  })


src/main.js:
-------------------
import store from './store'

创建根实例的时候 把store 传入
new Vue({
  el: '#app',
  store,
  ...
})

使用的时候  方法一：
  {{this.$store.state.city}}
修改的时候
  this.$store.dispatch('changeCity',city)

src/store/index.js:
-------------------
 import Vue from 'vue'
 import Vuex from 'vuex'
  
 Vue.use(Vuex)

 export default new Vuex.Store({
      state:{
        city:'上海'
      },
      actions: {
        changeCity (ctx,city) {
          // 调用mutations中的changeCity 
          ctx.commit('changeCity', city)
        }
      },
      mutations: {
        changeCity (state,city){
          state.city = city
        }
      }
  })
==============================
使用的时候 方法二(跳过dispatch步骤)：
  {{this.$store.state.city}}
修改的时候
  this.$store.commit('changeCity',city)

src/store/index.js:
-------------------
 import Vue from 'vue'
 import Vuex from 'vuex'
  
 Vue.use(Vuex)

 export default new Vuex.Store({
      state:{
        city:'上海'
      },
      mutations: {
        changeCity (state,city){
          state.city = city
        }
      }
  })

8.Vue localStorage

有一些浏览器只使用localStorage 会报错 需要配合try catch 使用
try {
  localStorage.city = '上海'
} catch (e) {}