vue 总结

1.vue 的生命周期 

1. es6 

2. vue 基本属性指令

<template><div><!--<h1>vue基本指令的使用方式</h1><a :href="url">v-bind使用链接</a><img :src="srcUrl" /><div>解决闪烁问题<p v-cloak>{{msg}}--</p>替换差值表达式<p v-text="msg">+++</p><div>解析为html格式<p v-html="msg2"></p></div><input type="button" value="按钮" v-bind:title="myTitle" /><p v-for="(key,val) in users">{{i}}姓名:{{key.username}}密码:{{key.password}}{{val}}</p><p v-for="(item,i) in arr1" :key="i">{{item}}索引值{{i}}</p><div v-for="(username, password,i) in  object">username:{{username}} password{{password}}</div><div v-for="(val, name,index) in  object">{{index}}:{{name}}:{{val}}<br /></div><div v-for="i in 10">{{i}}</div></div><button @click="lang">点击一下</button><p v-text="msg"></p>//vue属性修饰符号<div @click="outerHandler"><input type="button" @click.stop="innerHandler" value="stop" /></div><a href="http://www.baidu.com" @click.prevent="aClick">百度一下</a><div @click.capture="outerHandler"><input type="button" @click.self="innerHandler" value="capture" /></div><div @click="outerHandler"><div @click.self="outerHandler"><input type="button" @click="innerHandler" value="self" /></div></div><div @click="outerHandler"><input type="button" @click.once="innerHandler" value="once" /></div>-->//vue过滤器<table style="width:80%;height:200px;border-collapse:collapse;border:1px solid"><tr style="border:1px solid;border-collapse:'collapse'"><td>id</td><td>name</td><td>age</td></tr><tr v-for="stu in students" style="border:1px solid;border-collapse:'collapse'"><td v-for="(value) in stu" style="border:1px solid">{{value}}</td></tr></table></div>
</template>
<script>
import { mapState, mapGetters, mapActions } from "vuex";
import { setInterval } from "timers";export default {data() {return {url: "http://www.baidu.com",imgs: null,msg: "123456",msg2: "<h1>we are very happy</h1>",arr1: [1, 2, 3, 4],myTitle: "点击一下",object: {username: "wuming",password: "wumingxm"},users: [{username: "wuming",password: "wuming"}],students: [{id: 1,name: "zhangsan",age: 20},{id: 2,name: "zhaoliu",age: 30}],srcUrl:"https://image.baidu.com/search/detail"};},computed: {}),methods: {getImgs() {var imgs = [];imgs.push("./assets/1.jpg");return imgs;},showMsg() {alert("mmmmmmmmmmmmmmmmmmmm");},lang() {setInterval(() => {var start = this.msg.substring(0, 1);var end = this.msg.substring(1);this.msg = end + start;}, 400);},innerHandler() {alert("inner click");},outerHandler() {alert("outerClick");}},beforeMounted() {this.setImgs();alert(imgs);}
};
</script>
<style type="text/css">
[v-cloak] {display: none;
}
</style>

2. vue 的组件

vue-route，axios，vuex，element ui，swiper，vue-echarts，vue-video-player，vue-photo-preview

(1) 引入组件

import VueRouter from 'vue-router';
import axios from 'axios';
import ElementUI from 'element-ui';

Vue.use(VueRouter);
Vue.prototype.$http = axios;
Vue.use(ElementUI);

 var url = "/api/findUserList";
      this.$axios
        .post(url)
        .then(res => {
          rowData = res.data;
        })
        .then(err => {
          alert(error);
        });

（2）vue -route index.js中配置路由

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    } ]
})

父子组件传值

 <children v-bind:message="childMessage" @delibery="getChildMsg"></children><button @click="sendToParent">子组件向父组件传值</button>

export default {
  props: {
    childMessage: {
      type: String
    }
  },
  methods: {
    sendToParent() {
      this.$emit("delibery", "我是你儿子");
    }
  }

   sendToBrother() {
      alert("兄弟组件传值");
      Bus.$emit("sendToBrother", "我要给我的兄弟发消息");
    }

    created() {
    Bus.$on("sendToBrother", function(data) {
      this.brotherMsg = data;
    });
  }

(4）vue 的计算属性

computed: {

        fullName() {

                console.log("这是fullName");

                return this.firstName + this.lastName;

        }

}

（3） 配置代理 config 目录下index.js

module.exports = {
  dev: {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://localhost:8090',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }

3.webpack