1.安装 npm(cnpm/yarn)
2.执行npm install vue-cli -g 全局安装
3.执行vue init webpack(webpack-simple) 项目名 创建项目,webpack-simple是精简版
4.到项目目录下面,执行npm install 初始化vue的依赖包
5.在项目目录下面执行npm run dev 运行项目
6.属性绑定和基本操作语法参见官网
7.三种父子组件传参
o1, 组件上的props属性传参 父组件引入子组件,在子组件上加属性赋值传参
o2,子组件通过this.$parent获取父组件的属性和值
o3,通过bus推送和监听数据传参
在main.js中创建vue实例前
//在生成vue实例前,给Vue的原型上添加一个bus属性,这个属性是vue的实例, //之后创建的vue实例都具有bus这个属性
Vue.prototype.bus = new Vue();
通过this.bus.$emit('接受者','内容')和this.bus.$on('接受者',function(data){
})发送和接受消息
8.路由
o1,安装路由插件 npm install vue-router --save
o2,main.js中引入vue-router,在Vue实例前使用Vue.use()初始化加载
import VueRouter from 'vue-router'
Vue.use(VueRouter);//install 实例化VueRouter到vue上,之后创建的Vue实例都可以使用路由
o3,穿件路由,如下
let routes=[ {path:'/home',name:'home',desc:'组件一',component:Home,isP:true}, {path:'/pc',name:'pc',desc:'组件二',component:PC,isP:true}, {path:'/content',name:'content',desc:'组件二的子组件',component:PContent,isP:false} ]; //初始化路由数据 let router=new VueRouter({routes}); new Vue({ el: '#app', router:router, render: h => h(App) })
o4,路由传参
o4.1,path路径后面通过:参数名(或者:tags+),<router-link to=''/content/参数值"></router-link>或者<router-link to=''/content?参数名=值&参数名值"></router-link>,接受页面通过this.$router.params.参数名或者this.$router.query.参数名
o5,动态路由,可以通过ajax方法初始化路由数据,通过this.$router.addRoute和this.$router.addRoutes方法添加路由,以及更新路由,删除路由操作,具体参见官网api。
9.ajax请求操作,此使用vue官方ajax插件
安装插件 npm install vue-resource --save
在main方法中引入,并用Vue.use方法装载
import VueResource from 'vue-resource'
//install 实例化VueResource到vue上,之后创建的Vue实例都可以使用http Vue.use(VueResource)
操作使用,this.$http来进行ajax请求操作(在main.js中可以直接使用Vue.http),具体参见官网api