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,自定义指令:在组件中使用
,在main.js中定义{{blog.title}}
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);
}
})
就可以了。 {{blog.title |to-uppercase}}
5,过滤,在组件中
,在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,如何在页面之间传值,在传值页面
,被传值页面的路由应该是这样{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("组件销毁");
}