vue散碎知识点学习

1. vue散碎知识点学习

1.1. 特点

1. 数据渲染/数据同步
2. 组件化/模块化
3. 其他功能路由，ajax，数据流

1.2. Vue.js学习资源

1. vuejs中文官网：http://cn.vuejs.org
2. vuejs源码：https://github.com/vuejs/vue
3. vuejs官方工具：https://github.com/vuejs

1.3. Vue实例对象

var my = new Vue({
    el: '#app',
    template: '<div>{{}}</div>',
    data:{
        fruit: 'apple'
    }
})

1.4. 绑定事件

//绑定键盘按下enter事件
v-on:keydown.enter=""

v-on缩写@

:class="{odd:index%2}" 判断odd什么时候需要显示出来

v-bind:缩写:

//修改数组
Vue.set(this.list, 1, {
    name: 'pinaapple',
    price: 256
})

this.$emit("xxx") 子组件提交事件，父组件可以监听 

watch：{

}
用来监听数据变化

1.5. 父子组件

子组件调用父方法

父组件 @my-event="getMyEvent"绑定方法 监听事件
子组件 触发方法，传入参数
methods: {
    emitMyEvent(){
      this.$emit('my-event', this.hello)
    }
}

父组件调用子方法
父组件
componentA number='12' @my-event="getMyEvent">
      <p slot="header">header</p>//插槽
      <p slot="footer">footer</p>
    </componentA>

子组件
<div>{{number}}</div>
<slot name="header">no header</slot>
<slot name="footer">no footer</slot>

props: {
    number:[Number,String]
}

动态绑定组件
<p :is="currentView"></p>

import ComA from './components/a'
components: {
    ComA
},
data:{
    currentView: 'com-a'
}

1.6. 缓存

<keep-alive></keep-alvie>包裹

1.7. 元素过度

1. 相同元素key区分
2. transition动画

1.8. 工具推荐

1. MobaXterm是ssh,ftp工具，https://mobaxterm.mobatek.net/
2. FinalShell，可用于mac，http://www.hostbuf.com

1.9. 路由

1. 在路径加参数可以在路由到的组件拿到

main.js
routes: [
    {
      path: '/apple/:color',
      component: Apple
    },{
      path: '/banana',
      component: Banana
    }
  ]

Apple.vue
methods: {
      getParams(){
          console.log(this.$route.params)
      }
  }

1.10. vue实例

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

<span v-once>这个将不会改变: {{ msg }}</span>

v-bind缩写
    <!-- 完整语法 -->
    <a v-bind:href="url">...</a>

    <!-- 缩写 -->
    <a :href="url">...</a>

v-on缩写
    <!-- 完整语法 -->
    <a v-on:click="doSomething">...</a>

    <!-- 缩写 -->
    <a @click="doSomething">...</a>

1.11. 计算属性vs侦听属性

https://cn.vuejs.org/v2/guide/computed.html

不要滥用watch，有时候可以用computed代替

1.12. class与Style绑定

1.12.1. 对象语法

<div v-bind:class="{ active: isActive }"></div>
上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness。

1.12.2. 数组语法

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为：
<div class="active text-danger"></div>

可以用三元表达式
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

1.13. 条件渲染

https://cn.vuejs.org/v2/guide/conditional.html

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no