VUE從開始到結束,一般遇到的知識點(轉的:看別人寫的不錯)
阿新 • • 發佈:2018-11-30
-------------搭建專案----------------------------------------------------------------------- npm install --global vue-cli vue init webpack my-project -------------引入jquery----------------------------------------------------------------------- npm install jquery --save-dev 在webpack.base.conf.js裡配置 var webpack=require('webpack')methos plugins: [ new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", "windows.jQuery":"jquery" }) 在main.js中輸入 import $ from 'jquery' ------------scss-------------------------------------------------------------------------- npm install --save-dev sass-loader npm install --save-dev node-sass 在build資料夾下的webpack.base.conf.js的rules裡面新增配置 { test: /\.sass$/, loaders: ['style', 'css', 'sass'] } <style lang="scss"> -----------路由跳轉----------------------------------------------------------------------- <router-link to="/index">index</router-link> <router-link :to="{path:'/test/1',query:{name:'child'}}">index</router-link> <router-link :to="..." replace>replace</router-link> this.$router.push({path: '/login?url=' + this.$route.path}); this.$router.push({path: '/backend/order', query: {selected: "2"}}); this.$router.replace(...) 獲取值 {{this.$route.params.id}} {{this.$route.query.name}} -------------methods和computed和watch-------------------------------------------------------- methods:{ 函式宣告... } watch:一個數據影響多個數據 watch: { name1: function(val){ this.yourName = val + '-'+ this.name2+'-'+this.name3 } } this.name1='ddd'; console.log(this.yourName) computed:一個數據受多個數據影響 computed:{ yourName2: function(){ return this.name1 + '-'+ this.name2+'-'+this.name3 } } this.name1='ddw'; this.name2='wwge'; {{ this.yourName2 }} -------------父子元件傳值-------------------------------------------------------------------------- 使用props向子元件傳遞資料 props:['logo'] 從父元件獲取資料 子元件主要通過事件傳遞資料給父元件 子元件: <input v-model="username" @change="setUser" /> methods:{ setUser: function(){ this.$emit('transferUser',this.username) } } 'transferUser'是一個自定義的事件,功能類似於一箇中轉。 父元件: <header @transferUser="getUser"></header> methods:{ getUser(msg){ this.user = msg } } msg就是從子元件傳遞過來的引數username -------------同級元件傳值-------------------------------------------------------------------------- man.js window.eventBus = new Vue(); header.vue 傳值 eventBus.$emit('eventBusName','helloKugou'); footer.vue 接值 created() { eventBus.$on('eventBusName',function(val){ console.log(val); }) } ------vuex----- ( http://www.imooc.com/article/14741 [什麼是mapState]) npm install --save vuex npm install babel-polyfill --save-dev(https://blog.csdn.net/bright2017/article/details/77850525) 建立一個store.js(https://blog.csdn.net/h5_queenstyle12/article/details/75386359) import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex) const state = { count:1 } const mutations={ add(state){ state.count+=1; }, reduce(state){ state.count-=1; } } export default new Vuex.Store({ state }); 使用{{$store.state.count}} ---------------ajax------------------------------------------------------------------------------ fetch.js fetch是基於Promise的,未來的趨勢。 https://github.com/github/fetch axios.js Vue 2.0 官方推薦。 https://github.com/axios/axios 解決跨域問題(https://www.cnblogs.com/wangyongcun/p/7665687.html / https://segmentfault.com/a/1190000011007043) 開啟config/index.js,在proxyTable中添寫如下程式碼: proxyTable: { '/api': { //使用"/api"來代替"http://f.apiplus.c" target: 'http://f.apiplus.cn', //源地址 changeOrigin: true, //改變源 pathRewrite: { '^/api': 'http://f.apiplus.cn' //路徑重寫 } } } 使用axios請求資料時直接使用“/api” ----------------中英文切換------------------------------------------------------------------------ npm install vue-i18n language.js ( https://segmentfault.com/a/1190000011782935 )-------------- import VueI18n from 'vue-i18n' import Vue from 'vue' Vue.use(VueI18n) const i18n = new VueI18n({ locale: 'cn', // 語言標識 messages: { 'cn': require('./lang/cn'), // 中文語言包 'en': require('./lang/en') // 英文語言包 }, }) export default i18n main.js import i18n from './i18n' new Vue({ el: '#app', router, store, i18n: i18n, render: h => h(App) }) 改變中英文 已經顯示 this.$i18n.locale = val; {{ $t("message.index") }} ———————————————————————————————————— 一般匯出一個屬性或者物件用 export default 一般匯出模組或者說檔案使用 module.exports ---------------表單驗證---------------------------------------------------------------------- https://monterail.github.io/vuelidate/#examples main.js import Vuelidate from 'vuelidate' Vue.use(Vuelidate) --------------打包--------------------------------------------------------------------------- config/index.js裡的assetsPublicPath改成'./' --------------filter------------------------------------------------------------------------- 1.元件中定義 filters: { capitalize: function (value) { return ... } } 2.全域性定義過濾器 main.js Vue.filter('capitalize', function (value) { return ... } --------------tab切換------------------------------------------------------------------------- <button v-on:click="tabFun('simple01')">備選一</button> <button v-on:click="tabFun('simple02')">備選二</button> <div style="margin:20px 0"></div> <keep-alive> //快取資料 <component v-bind:is="tabView"></component> //切換模組 </keep-alive> ------------------------------------- import simple01 from './simple01.vue' import simple02 from './simple02.vue' export default { name: 'Test2', data() { return { tabView: 'simple01' } }, methods: { tabFun(value) { this.tabView = value; } }, components: { simple01, simple02 } } --------------遞迴元件--------------------------------------------------------------------------- https://blog.csdn.net/badmoonc/article/details/80380557 子元件 <ul> <li v-for="item in tree" :key="item.label"> <p>{{item.label}}</p> <Simple01 v-if="item.children" :tree="item.children"></Simple01> </li> </ul> props: ['tree'] 父元件 <simple01 :tree="tree"></simple01> data() { return { tabView: 'simple01', tree:[{ label:'A1-1', children: [{ label: 'B1-1', children: [{ label:'C1-1' }] }] },{ label:'A2-1', children: [{ label: 'B2-1', children: [{ label:'C2-1' }] }] }] } } --------------------- 作者:Devin_you 來源:CSDN 原文:https://blog.csdn.net/Devin_you/article/details/82883662