VUE学习-杂类整理

路由 [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]