路由 [vue-router]
npm install vue-router --save //路由模块, 后面加--save会加载项目中
使用方法:
在main.js载入模块: import VueRouter from 'vue-router'; Vue.use(VueRouter); 在main.js创建组件 import Foo from '组件路径'; 在main.js里配置路由: const routes = { { path: '/foo', component: Foo ,name:'youishome'},//也可以使用get传值,name是自定义的路由名称}, { path: '/bar/:id', component: () => import('../views/Bar.vue')},// :id 路由传值,import()按需加载组件 {//路由的嵌套 path: '/user', component: User, children:[ {path: 'adduser',component:UserAdd}, {path: 'userList',component:UserList}, ] }, {path: '*',redirect: '/foo'}/*默认路由跳转*/ } 在main.js里实例化VueRouter const router = new VueRouter({ routes // (缩写) 相当于 routes:routes }) 在main.js里挂载render路由 new Vue({ el: '#app', render, render: h => h(App) }) 然后就可以在App.vue组件内使用路由了 ,首先要加入router-view路由界面入口 <router-view></router-view> 这样就能正常操作路由了[aru_36] 以下是html内操作路由 <router-link to="/foo">动态路由</router-link> <router-link to="/bar/123">动态路由传值</router-link> <router-link to="/user/adduser">动态路由嵌套</router-link> <router-link to="/foo?aid=123">动态路由get传值</router-link> 以下是在js内操作路由 this.$router.push({path:'foo'});//动态路由 this.$router.push({path:'/bar/123'});//动态路由 传值 this.$router.push({path:'/user/adduser'});//动态路由嵌套 this.$router.push({path:'foo?aid=123&oid=751'});//动态路由 get传值 this.$router.push({path:'foo', query:{aid: '123',oid:'751'}});//动态路由 get传值 this.$router.push({name:'youishome',params:{id:123}});//自定义的路由名称并传值 获取路由传值 this.$route.params 获取路由get传值 this.$route.query 进入路由之前 钩子 router.beforeEach((to,from,next) =>{ console.log(to.path) next() })
请求数据 [vue-resource]
npm install vue-resource --save //官方的请求数据模块, 后面加--save会加载项目中
先在main.js载入模块: import VueResource from 'vue-resource'; Vue.use(VueResource); 然后就可以在组件内使用模块了: this.$http.get(地址).then((response)=>{ console.log(response.body); },(error)=>{ console.log(error); })
组件的引入
在组件内引入components目录下面的Home.vue文件
import Home from './components/Home.vue';
调用方法:在 export default {}里面插入
components:{ 'v-home' : Home }
组件之间相互通信
方法1.
this.$children //就能获取到子组件
方法2.【父组件获取子组件】先参考上方“组件的引入”引入一个组件后调用组件的时候定义一个名为home的ref
<v-home ref="home"></v-home>
然后调用方法:
this.$refs.home.属性 this.$refs.home.方法
【子组件获取父组件】就比较简单了,直接用this.$parent获取
this.$parent.属性 this.$parent.方法
【非父子组件通讯】方法有很多,这是只介绍使用Vue的广播通讯
// to-id是自定义标识名称,this.msg是要发送的内容,VueEvent是一个Vue实例。 发送方法: VueEvent.$emit('to-id',this.msg) 接收方法: mounted() { VueEvent.$on('to-id',function(data){ console.log(data); }) },
事件对象获取方法
<button data-testid='123' @click="eventFn($event)">事件对象</button>
使用e.srcElement来获取及设置相应dom的数据
e.srcElement.style.background='red'; //设置调用eventFn方法传进来dom节点的样式 e.srcElement.dataset.testid //获取自定义属性的值
常用的声明周期钩子
调用方法:在 export default {}里面插入
mounted() { //模板编译完成后的函数 可以用来请求数据或操作dom }, beforeDestroy() { //实例销毁之前 当页面销毁的时候,可以用来保存一些数据 }
element UI的引用
npm i element-ui -S
全局引用 在main.js里输入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 按需引用 在main.js里输入 import { Button , Input } from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(Button); Vue.use(Input);
配置file_loader 在webpack.config.js里 module-》rules 尾部添加一下配置
{ test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, loader: 'file-loader' }
Mint UI的引用
npm install mint-ui -S
全局引用 在main.js里输入 import Mint from 'mint-ui'; import 'mint-ui/lib/style.css'; Vue.use(Mint);
其实大致的学下来,vue还是挺简单的,相比一些ThinkPHP、Yii等后端框架来说在路由、组价的加载、以及运行速度方面还是很出色的。推荐新入门学前端基础的朋友们学习。[aru_22]
本文作者为青年的故事,转载请注明。