vue之我不会
计算属性
例子:
注意:调用计算属性时,不可以带括号,那样调用的就是方法,如:以下调用
fullName
时不可funnName()
<div id="root">姓:<input type="text" v-model="firstName"> <br/><br/>名:<input type="text" v-model="lastName"> <br/><br/>测试:<input type="text" v-model="x"> <br/><br/>全名:<span>{{fullName}}</span> <br/><br/><!-- 全名:<span>{{fullName}}</span> <br/><br/> //在调用fullName就是从内存里面取了全名:<span>{{fullName}}</span> <br/><br/>全名:<span>{{fullName}}</span> --></div>data:{firstName:'张',lastName:'三',x:'你好'}computed:{fullName:{//get有什么作用?当有人读取fullName时,get就会被调用,且返回值就作为fullName的值//get什么时候调用?1.初次读取fullName时。2.所依赖的数据发生变化时。get(){console.log('get被调用了')// console.log(this) //此处的this是vmreturn this.firstName + '-' + this.lastName},//set什么时候调用? 当fullName被修改时。set(value){console.log('set',value)const arr = value.split('-')this.firstName = arr[0]this.lastName = arr[1]}}}
简写:
vueX的使用
vue默认vue3版本,vuex默认vuex4版本,vuex4只能在vue3中使用,在vue2中能使用vuex3,那么不能默认下载最新的版本
如果你出现了版本的问题只需要npm install vuex@3 --save
重新安装对应版本就好的
1创建src/store/index.vue
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {token: ''},mutations: {updateToken (state, newToken) {state.token = newToken}}
})
export default store
2.在main.js中
import store from '@/store'
new Vue({router,store, //<<<<<<--------这里render: h => h(App)
}).$mount('#app')