vue

vue 官网：https://cn.vuejs.org/

vue-cli 脚手架： https://cli.vuejs.org/zh/guide/prototyping.html

安装vue-cli 脚手架

验证是否安装成功

vue -V

1.创建一个项目

vue create hello-world

也可以 使用图形化界面创建

vue ui

2.配置好之后还可以配置一些选项：端口，代理等等 vue.config.js

https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

配置兼容目标浏览器：https://github.com/browserslist/browserslist

.browserslistrc 文件中配置

// vue.config.js
module.exports = {
  // 代理服务器
  devServer: {
    proxy: {
      '/app': {
        target: 'https://11.239.175.78',
        pathRewrite: {
          '/app': '/app'
        },
        changeOrigin: true // target是域名的话，需要这个参数，
      }
    },
    https: true,
    disableHostCheck: true,
    host: 'localhost',// 0.0.0.0
    port: 888
  }
} 

 

。生命周期

 export default {
    data() {
      return {
        value: true
      }
    },
    beforeCreate() {
    },
    created() {
    },
    beforeMount() {
    },
    mounted() {
      this.$nextTick(() => {
        console.log("dom 全部渲染完成");
      })
    },
    beforeUpdate() {
    },
    updated() {
    },
    beforeDestroy() {
    },
    destroyed() {
    },
    methods: {
      /**
       * 
       */
      change() {
         this.value=!this.value;
      }
    },
    computed: {
      key() {
        return this.$route.fullPath
      }
    },
    filters: {
      /**
       * 
       */
      tofixed(value) {
        return value.toFixed(2);
      }
    },
    watch: {
      value(newValue, oldValue) {
        console.log(oldValue, newValue);
      }
    }
  };

。指令

v-if
v-show
v-for
:    相当于 v-bind
@
v-text
v-html
v-model

。父子组件间的传值

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="submit">子传父</button>
  </div>
</template>

<script>
  export default {
    name: "HelloWorld",
    props: {
      msg: String
    },
    methods: {
      submit() {
        this.$store.dispatch("hvuex",Math.random());
        this.$emit("changeValue",Math.random());
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h3 {
    margin: 40px 0 0;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
</style>

<template>
  <div id="app">
    <router-view :key="key"></router-view>
    <div @click="change">{{1.0000000|tofixed}}</div>
    <HelloWorld :msg="msg" @changeValue="changeValue"></HelloWorld>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: true,
        msg:"父组件传递的信息"
      }
    },
    beforeCreate() {
    },
    created() {
    },
    beforeMount() {
    },
    mounted() {
      this.$nextTick(() => {
        console.log("dom 全部渲染完成");
      })
    },
    beforeUpdate() {
    },
    updated() {
    },
    beforeDestroy() {
    },
    destroyed() {
    },
    methods: {
      /**
       * 
       */
      change() {
         this.value=!this.value;
      },
      /**
       * @param {string} value
       */
      changeValue(value){
        console.log("子传父",value);
      }
    },
    computed: {
      key() {
        return this.$route.fullPath
      }
    },
    filters: {
      /**
       * 
       */
      tofixed(value) {
        return value.toFixed(2);
      }
    },
    watch: {
      value(newValue, oldValue) {
        console.log(oldValue, newValue);
      }
    }
  };
</script>

<style>
  #app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

。路由

官网文档：https://router.vuejs.org/zh/guide/#javascript

router/index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);

const routes = [
  {
    path: '/',
    component: resolve => require(['../views/index.vue'], resolve),
    meta:{require:false},
    children:[]
  },
  {
    path: '/detail/:projectId?',//  /detail/:projectId?
    component: resolve => require(['../views/detail.vue'], resolve),
    meta:{require:true}
  },
  {
    path: '/page2',//  
    component: resolve => require(['../views/page2.vue'], resolve),
    meta:{require:false}
  },
  {
    path: '*',
    component: resolve => require(['../views/index.vue'], resolve),
    meta:{require:true}
  }
]

const router = new Router({
  history: true,
  routes
});

/**
 * 路由守卫
 * @param {Object} to
 * @param {Object} from
 * @param {Function} next
 */
router.beforeEach((to, from, next) => {
  // 确保一定要调用 next()
  console.log(to, from, next);
  if (to.matched.some(record => record.meta.require)) {
      console.warn("need auth");
      next()
    
  } else {
    next() 
  }
});

export default router;

获取路由参数

this.$route.params.projectId

this.$route.query.userId

路由跳转：https://router.vuejs.org/zh/guide/essentials/navigation.html

//this.$router.push("/page2?userId=222");
        //this.$router.push({ name: 'page2', params: { userId: '123' }})
          this.$router.push({ path: '/page2', query: { userId: '123' }})
        //this.$router.push({ path: 'page2', query: { userId: '123' }})

。vuex

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 55
  },
  mutations: {
    increment(state, v) {
      state.count += v;
    }
  },
  actions: {
    hvuex({ state, commit }, value) {
      commit('increment', value)
    }
  }
});

export default store;

。

detail.vue

<template>
  <div>
    {{projectId}}

    <button @click="toUrl">跳转</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        projectId: this.$route.params.projectId
      }
    },
    created() {
      console.log(this.$route.params)
    },
    methods:{
      toUrl(){
        //this.$router.push("/page2?userId=222");
        //this.$router.push({ name: 'page2', params: { userId: '123' }})
          this.$router.push({ path: '/page2', query: { userId: '123' }})
        //this.$router.push({ path: 'page2', query: { userId: '123' }})
      }
    }
  }
</script>

page2.vue

<template>
  <div>
     {{userId}}
  </div>
</template>
<script>
export default {
  data(){
    return{
      userId:this.$route.query.userId
    }
  },
  created(){

  },
  mounted(){

  }
}
</script>

import Vue from "vue";
import App from "./App.vue";
import router from "./router/index";
import HelloWorld from "./components/HelloWorld";
import store from "./vuex/index";

Vue.config.productionTip = false;

Vue.component("HelloWorld",HelloWorld);

window.hv=new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");