Vue

computed 计算属性

---

computed的结果会被缓存，除非依赖的响应式属性变化才会重新计算，主要当做属性来使用。

  var vm = new Vue({
    el: '#app',
    computed: {
      name() {
        return 111
      }
    }
  })

watch 监听属性

被监听的属性值一发生变化就会触发 watch

  var vm = new Vue({
    el: '#app',
    data: {
      name: 'aaa'
    },
    watch: {
      'name': function (newVal, oldVal) {
          console.log(newVal)   //  最近变化的新值
          console.log(oldVal)   //  以前的旧值
       }
    }
  })

父子组件传递数据

(1) 子组件获取父组件的数据

  <div id="app">
    <child :sendMsg="msg"></child>
  </div>

var child = {
  template: '<input @click="getMsg">  猜我说了啥   {{ sendMsg }}   </input>',
  data () {},
  methods: {
    getMsg() {
       console.log( this.sendMsg  )
      }
  },
  props: ['sendMsg']
}
var  vm = new Vue({
  el: '#app',
  data: {
    msg: '媛问：猿哥一起嗨啊'
  },
  components: {
    child
  }
})

（2）子组件获取父组件的方法 并向父组件传递数据。

  <div id="app">
    <child @sendWay="way"></child>
  </div>

var child = {
  template: '<input>   </input>' ,
  data() {
    return {
      title: '猿'
    }
  },
  methods: {
    getWay() {
      this.$emit('sendWay', this.title)
    }
  }
}


var vm = new Vue({
  el: '#app',
  data: {
    from: ''
  },
  methods: {
    way(t) {
      this.from = t
    }
  }
})

ref 获取DOM 元素 和 组件

获取DOM元素

<div>
  <h3 ref="txt">丫丫滴滴啪啪</h3>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        
    },
    methods: {
      getElement(){
        this.$refs.txt.innerText    //   输入h3 的文本内容
      }
    }
})

获取组件

  var tpl = {
    template: '<h1 ref="child">子组件</h1>',
    data () {
      return {
        some: '一点东西'
      }
    }，
    methods: {
      way () {
          console.log('噜噜噜')
       }
    }
  }
  
  var vm = new Vue({
    el: '#app',
    data: {},
    methods: {
      getChild () {
          this.$refs.child.innerText        //   子组件
          this.$refs.child.some      //  获取子组件中定义的数据    ‘一点东西’
          this.$refs.child.way()    //   获取子组件中的方法，  '噜噜噜'
        }
    },
    components: {
      tpl
    }
  })

Router

  <div class="app">
    <!-- 相对于a 标签， tag属性可以改变元素的状态，不影响跳转 --> 
    <router-link to="/login" tag="button">登录</router-link>  
    <router-link to="/register" tag="p">注册</router-link>
    <!-- 占位符  路由组件将放在这里显示 -->
    <router-view></router-view>
  </div>

var login = {
      template: '<h1>登录组件</h1>',
    }
    var register = {
      template: '<h1>注册组件</h1>'
    }

    var router = new VueRouter({
      routes: [
        // component 必须是组件的模板对象，不能是组件的引用名称
        {path: '/login', component: login},
        {path: '/register', component: register}
      ]
    })

    var vm = new Vue({
      el: '.app',
      data: {},
      
      router: router   // 暴露在 vm 实例对象
    })

路由 redirect 重定向

  {path: '/', redirect: '/login'},

组件间切换的动画效果:

组件过渡过程中，会有四个CSS类名进行切换，这四个类名与transition的name属性有关，比如name="fade",会有如下四个CSS类名：

• fade-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。
• fade-enter-active:进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。
• fade-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除。
• fade-leave-active:离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。

• in-out(mode默认in-out模式）：新元素先进入过渡，完成之后当前元素过渡离开。
• out-in：当前元素先进行过渡离开，离开完成后新元素过渡进入。

  <style>
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(100px)   
    }

    .v-enter-active,
    .v-leave-active {
      transition: all .5s ease
    }
  </style>

  <div class="app">
    <router-link to="/login" tag="button">登录</router-link>
    <router-link to="/register" tag="p">注册</router-link>
    <!-- 占位符  路由组件将放在这里显示 -->
    <transition mode="out-in">   
      <router-view></router-view>
    </transition>
  </div>

路由传参1

  <router-link to="/login?id=111">  登录 </login>

获取参数

  this.$route.query.id    //  id= 111

image.png

路由传参2

    <router-link to="/login/222" tag="button">登录</router-link>
    <router-link to="/register/333" tag="p">注册</router-link>

routes: [
        // component 必须是组件的模板对象，不能是组件的引用名称
        {path: '/', redirect: '/login'},
        {path: '/login/:id', component: login},
        {path: '/register/:id', component: register}
      ]
    })

created() {
        console.log(this.$route.params.id)    // 222 
      },

image.png

使用render 渲染组件

我们不光可以使用components渲染组件，还可以用 render 属性来渲染组件
看代码：

html:

  <div class="app">
    <h2>render 会替换掉整个元素</h2>
  </div>

js:

  var com = {
    template: '<div>这是一个登陆组件</div>'
  }
  var vm = new Vue({
    el: '.app',
    render: function (createElement) {
      return createElement(com)  // createElement 是一个函数 参数是模板对象 ， 返回的结果将替换 el 指向的元素
    }
  })

与components不同的是 render属性会覆盖整个dom 元素，只能放一个组件，components 却可以放多个组件

文件的导入和导出

es6 提供了文件的导入和导出，但是不能直接通过浏览器运行，需要借助bable 进行转码，才可以使用
export default : 将文件导出

test.js :

  export default {
    name: '张三',
    age: 20
  }

import : 导入文件
main.js :

  import file from './test.js'

使用 export default 只能导出一个对象

export
按需要导出成员，可以向外暴露多个成员

test.js:
  export var title = '一只猿'   // 导出成员
  export var o = '一只媛'   

  import {title, o} from './test.js'   // 名称必须一致

使用 {} 的方式来接收多个成员，不需要的成员可以不用接收 {title}