-------------路由跳转-----------------------------------------------------------------------
<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);
})
}
--------------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") }}
--------------表单验证------------------------------------------------------------------------
https://monterail.github.io/vuelidate/#examples
main.js
import Vuelidate from ‘vuelidate’
Vue.use(Vuelidate)
--------------filter-----------------------------------------------------------------------
1.组件中定义
filters: {
capitalize: function (value) {
return …
}
}
2.全局定义过滤器 main.js
Vue.filter(‘capitalize’, function (value) {
return …
}
--------------tab切换-----------------------------------------------------------------------
备选一
备选二
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
}
}
--------------到底了-----------------------------------------------------------------------