vue笔记

1、组件的注册必须在vue实例之前

1　　 Vue.component("mycom",{
       　　 template:"<h1>我是测试的组件</h1>"
    　　})
    　new Vue({
       　　el:"#app"
   　 })

2、methods 和 computed 中方法的调用

　　https://segmentfault.com/a/1190000014478664?utm_source=tag-newest

　　methods 中的方法调用的时候，需加括号，eg：fun()

　　computed 中的方法调用，不用加括号，eg：fun

3、v-model的使用

<div id="app">
    <input type="text" v-model="name">
    <p>{{name}}</p>
</div>

new Vue({
   el:"#app" ,
   data:{
       name:"blue"             
   }          
})

4、路由的简单使用　　

　　如果是直接引入的vue-router.js 文件，可以直接使用；

　　如果是import 引入的 import VueRouter from 'vue-router'，要 Vue.use(VueRouter)

　　a)html中定义<router-link :to="/foo"></router-link> ，注意to属性中的值一开始要加斜杠 / 

　　b) html中添加路由容器：<router-view></router-view>

　　c)js代码定义：　

let router = new VueRouter({
   routers:[
       {
            path:"/foo",
            name:"foo", //命名路由，不是必需
            component:{template:"<div>foo组件的内容</div>"} 
       } 
   ] 
});
let vm = new Vue({
    el:"#app",
    data:{},
    router      
})

5、vue的表达式 {{ }}，花括号只能用在innerHTML中，不能用在属性值中，属性值中用字符串，虽然是变量，但是依然可以解析。

6、vue的methods中不能使用箭头函数，因为里面要用到this，如果使用了箭头函数，this指的就不是vue实例了，就是window对象了，这样子就乱了。但是methods中一般用的都是ES6的简写函数。methods:{ fn(){ return a } }

7、html5 的新标签 template，了解下

8、Vue.set( vm.items,indexOfItem,newValue )    等同于 vm.$set( vm.items,indexOfItem,newValue )

　　vm.items.splice( indexOfItem, 1, newValue )

　　以上两个修改数组的方法可以出发状态更新

9、

有时你可能需要为已有对象赋值多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：

Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

你应该这样做：

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})