vue入门小记:
全局安装npm install vue -g ,npm install vue-cli -g,
初始化一个webpack脚手架vue init webpack {projectName},创建一个基于webpack的vue项目,(需要输入项目需要模块、描述等)
进入项目,npm install安装缺少的依赖文件;
npm run dev(脚手架提供的运行命令)
/***************************************************************************/
npm run build 构建项目(生成项目文件在dist中)
vue中的重要选项:
data:所有vue组件数据的所在
methods:定义的方法
dosomething:function(){
//方法体
}
watch:监听某个对象的变化(类似于angular中的脏检查,实现方式不知道),object为被监听的data中的数据
watch:{
"object":function(val,oldValue){
//方法内容
}
}
指令:
v-text,v-html,v-bind:class(绑定属性)
v-if(boolean),v-else(必须跟在if之后,false执行)
v-on:click(绑定时间)
v-for 遍历(item in items)
组件的划分:功能划分,页面区域划分
父子间组件通信:
1:父组件定义给子组件绑定属性,子组件props接收 . props down
2:子组件method中通过$emit(key,value)定义一个绑定事件,父组件中给子组件添加事件触发调用的函数. events up
关于vue-cli webpack打包后css中背景图片路径出错问题
:(vue-loader不能解析css中的路径)把图片以模板形式引入,data中添加'bacground: url ('+img path+') no-repeat', :style绑定到元素中
兄弟组件通信:全局eventbus 、 vuex
{eventsbus参考http://blog.csdn.net/u013034014/article/details/54574989?locationNum=2&fps=1}