Vue精要笔记

1，v-for,格式写错了，数组里没有等号，只有冒号；
2，脚手架，component，大小写错误
3，如果要用到http网络请求，需要在项目目录下npm install vue-resource --save，安装完成后执行npm run dev,然后再Main.js中引用import VueResource from ‘vue-resource’，Vue.use (VueResource). post请求示例：

post:function () {
   this.$http.post("http://jsonplaceholder.typicode.com/posts",{title:this.blog.title,body:this.blog.content,userId:1})
     .then(function(data){
      console.log(data)
     })
    }

get方式网络请求：created(){
this.$http.get(“http://jsonplaceholder.typicode.com/posts”)
.then(function(data){
this.blogs=data.body.slice(0,10);
console.log(this.blogs);
})
}

get方式本地请求：created(){
this.$http.get(’./…/static/posts.json’)
.then(function(data){
this.blogs=data.body.slice(0,10);
console.log(this.blogs);
})
}

4，自定义指令：在组件中使用

{{blog.title}}

，在main.js中定义

Vue.directive('rainbow',{
	bind(el,binding,vnode){
		if (binding.value=="wide") {
			el.style.maxWidth="1260px";
		}else if (binding.value=="narrow") {
			el.style.maxWidth="560px";

		}
		el.style.color="#"+Math.random().toString(16).slice(2,8);
	}
})
Vue.directive('theme',{
	bind(el,binding,vnode){
		el.style.color="#"+Math.random().toString(16).slice(2,8);
	}
})

就可以了。
5，过滤，在组件中

{{blog.body |snippet}}

，在main.js中定义使用Vue.filter("snippet",function(value){ return value.slice(0,10)+"..."; })
6，路由，首先在终端执行npm install vue-router --save安装路由模块
7，使用json-server搭建本地服务，首先在本地安装json-server模块（终端npm install -g json-server），然后新建文件夹在文件目录下执行npm init,经过一些列对项目的配置和描述后，在目录下新建db.json，输入对应的数据，在package.json文件中改scripts标签中的内容为"json:server": “json-server --watch db.json”。 最后在目录下终端输入npm run json:server
8，如何在页面之间传值，在传值页面

{{blog.title |to-uppercase}}

，被传值页面的路由应该是这样{path:"/blog/:id",name:"blogLink",component:BlogDetail}，被传值页面应该这样接收值data(){ return{ id:this.$route.params.id, blogs:{} } }，
9，钩子函数及其释疑

beforeCreate:function(){
    alert("组件实例化之前执行的函数");
  },
  created:function(){
    alert("组件实例化完毕，但页面还未显示");
  },
   beforeMount:function(){
    alert("组件挂载前，页面未展示，但虚拟dom已经配置");
  },
   mounted:function(){
    alert("组件挂载后，此方法执行后，页面展示");
  },
  beforeUpdate:function(){
    alert("组件更新前前，页面未更新，但虚拟dom已经配置");
  },
   updated:function(){
    alert("组件更新，此方法执行后，页面展示");
  },
   beforeDestory:function(){
    alert("组件销毁前");
  },
   destoryed:function(){
    alert("组件销毁");
  }