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