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