您当前的位置: 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
vue项目第六天
发布时间:2020-05-19 17:43:34编辑:雪饮阅读()
组件切换的淡入淡出效果
本质:在app.vue主组件中的router-view外层套一个transition组件并提供淡入淡出样式
<transition name="fade" mode="out-in">
<router-view/>
</transition>
样式如:
<style scoped>
/*淡入淡出*/
.fade-enter-active, .fade-leave-active {
transition: opacity 1s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.mint-tabbar{
position: fixed;
}
</style>
关于npm安装命令
npm i -g @vue/cli
i:install
g:global
@:该符号后面是scope,一般是公司或组织
Vue ui
让vue版本达到3.6.1
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm i -g @vue/cli@3.6.1
C:\Users\xy>vue -V
3.6.1
然后运行vue ui命令
C:\Users\xy>vue ui
� Starting GUI...
� Ready on http://localhost:8000
创建项目
功能根据所需,这里就用这几个
这里面也根据情况自己选择就行
然后保存并创建项目
如果创建过程报错,请尝试安装你当前目录的vue也到3.6.1
创建完成
项目运行
项目运行只需要在项目目录执行npm run serve
Vuex
定义属性与属性读取
在刚才新建项目的store/index.js中定义一个num属性如
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
num:1
},
mutations: {
},
actions: {
},
modules: {
}
})
则在app.vue中读取该属性如
<template>
<div id="app">
<div id="nav">
{{$store.state.num}}
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
使用获取器获取属性值
首先定义一个获取器在store/index.js中
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
num:1
},
getters:{
getNum(state){
return state.num;
}
},
mutations: {
},
actions: {
},
modules: {
}
})
然后app.vue中如:
<div id="nav">
直接获取:{{$store.state.num}}
获取器获取:{{$store.getters.getNum}}
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
获取器结合computed获取
首先在app.vue中
定义computed如
<script>
export default {
name:'app',
computed:{
getMyNum(){
return this.$store.getters.getNum;
}
}
}
</script>
然后在app.vue中调用时如
<div id="nav">
直接获取:{{$store.state.num}}
获取器获取:{{$store.getters.getNum}}
获取器结合computed获取:{{getMyNum}}
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
属性值的修改
首先在store/index.js中定义一个属性值修改的方法
mutations: {
addNum(state){
state.num++;
}
},
然后再app.vue中定义一个method
export default {
name:'app',
computed:{
getMyNum(){
return this.$store.getters.getNum;
}
},
methods:{
add(){
this.$store.commit("addNum")
}
}
}
然后app.vue调用有
<div id="nav">
直接获取:{{$store.state.num}}
获取器获取:{{$store.getters.getNum}}
获取器结合computed获取:{{getMyNum}}
<button @click="add">增加state.num</button>
<router-link to="/about">About</router-link>
</div>
安装vuejs-devtools
首先下载该工具的源代码
git clone https://github.com/vuejs/vue-devtools.git
然后进入下载后的vue-devtools目录中将该源代码切换到5.1.1版本
git log命令后一直往下找,找到该版本
commit 2fd3b3b72396df6bb92ade7363abeeba98c01e8b (tag: v5.1.1)
Author: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Thu Jun 27 01:22:11 2019 +0200
然后切换到该版本
git check 2fd3b3b72396df6bb92ade7363abeeba98c01e8b
然后cnpm install
然后
C:\Users\xy\vue-devtools>cnpm run build
> vue-devtools@5.1.1 build C:\Users\xy\vue-devtools
> cd shells/chrome && cross-env NODE_ENV=production webpack --progress --hide-modules
98% after emitting SizeLimitsPlugin
DONE Compiled successfully in 11609ms 3:20:32 PM
Hash: eb10b0b5368f146f3df3
Version: webpack 4.43.0
Time: 11609ms
Built at: 2020-05-19 3:20:32 PM
Asset Size Chunks Chunk Names
backend.js 398 KiB 0 [emitted] [big] backend
background.js 2.59 KiB 1 [emitted] background
detector.js 4.31 KiB 2 [emitted] detector
devtools-background.js 2.22 KiB 4 [emitted] devtools-background
devtools.js 1.22 MiB 3 [emitted] [big] devtools
hook.js 28.2 KiB 5 [emitted] hook
proxy.js 1.3 KiB 6 [emitted] proxy
Entrypoint hook = hook.js
Entrypoint devtools [big] = devtools.js
Entrypoint background = background.js
Entrypoint devtools-background = devtools-background.js
Entrypoint backend [big] = backend.js
Entrypoint proxy = proxy.js
Entrypoint detector = detector.js
C:\Users\xy\vue-devtools>
然后打开shells>chrome>manifest.json并把json文件里的"persistent":false改成true
然后打开chrome浏览器,打开更多工具>扩展程序;
然后再点击“加载已解压的扩展程序”,然后把shells>chrome文件夹放入
然后回到你的项目中修改main.js为调试
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
Vue.config.devtools=true
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
然后重新编译下打开浏览器就可以使用了
使用vue调试工具 点击上面我们做的可以修改属性值的按钮会发现调试工具这个选项卡下左侧会随着我们每次点击就主动增加操作记录,点击某个操作记录还可以在右侧看到具体操作详情
可传参的commit
对于上面增加属性的操作也可以传递要增加的值的方式进行添加属性值。
则同样在store/index.js中需要新增对应mutaction
mutations: {
addNum(state){
state.num++;
},
addByNum(state,num){
state.num+=num;
}
},
那么app.vue中也要定义对应的方法
methods:{
add(){
this.$store.commit("addNum")
},
addByNum(){
this.$store.commit("addByNum",20)
}
}
然后app.vue中调用如
<div id="nav">
直接获取:{{$store.state.num}}
获取器获取:{{$store.getters.getNum}}
获取器结合computed获取:{{getMyNum}}
<button @click="add">增加state.num</button>
<button @click="addByNum">增加state.num(可传参的commit)</button>
<router-link to="/about">About</router-link>
</div>
异步的commit
Index.js
mutations: {
addNum(state){
state.num++;
},
addByNum(state,num){
state.num+=num;
},
addByNumAsync(state,num){
setTimeout(function(){
state.num+=num;
},0)
}
},
app.vue
methods:{
add(){
this.$store.commit("addNum")
},
addByNum(){
this.$store.commit("addByNum",20)
},
addByNumAsync(){
this.$store.commit("addByNumAsync",30)
}
}
app.vue
<div id="nav">
直接获取:{{$store.state.num}}
获取器获取:{{$store.getters.getNum}}
获取器结合computed获取:{{getMyNum}}
<button @click="add">增加state.num</button>
<button @click="addByNum">增加state.num(可传参的commit)</button>
<button @click="addByNumAsync">异步的commit操作</button>
<router-link to="/about">About</router-link>
</div>
会发现异步的操作,记录条数没有问题(下图是操作了4次),但是操作数据总值总会少一次操作产生的值。
异步的commit在dispatch中操作
Index.js,index.js中的commit是从接受的state中析构出来的
actions: {
addByNumAction({commit},num){
setTimeout(function(){
commit("addByNum",num);
},0)
}
},
app.vue
methods:{
add(){
this.$store.commit("addNum")
},
addByNum(){
this.$store.commit("addByNum",20)
},
addByNumAsync(){
this.$store.commit("addByNumAsync",30)
},
addByNumAction(){
this.$store.dispatch("addByNumAction",40)
}
}
app.vue
<div id="nav">
直接获取:{{$store.state.num}}
获取器获取:{{$store.getters.getNum}}
获取器结合computed获取:{{getMyNum}}
<button @click="add">增加state.num</button>
<button @click="addByNum">增加state.num(可传参的commit)</button>
<button @click="addByNumAsync">异步的commit操作</button>
<button @click="addByNumAction">异步的commit在dispatch中操作</button>
<router-link to="/about">About</router-link>
</div>
这样虽然也是异步操作,但是值和记录数是能够保证一致性的。
利用展开运算符结合computed实现简易多个获取器的定义与调用
Index.js
getters:{
getNum(state){
return state.num;
},
getText(state){
return `[[${state.num}]]`
}
},
app.vue
import { mapGetters } from 'vuex'
export default {
name:'app',
computed:{
...mapGetters(['getNum','getText'])
},
app.vue
<div id="nav">
简易获取getNum:{{getNum}}
简易获取getText:{{getText}}
<button @click="add">增加state.num</button>
<button @click="addByNum">增加state.num(可传参的commit)</button>
<button @click="addByNumAsync">异步的commit操作</button>
<button @click="addByNumAction">异步的commit在dispatch中操作</button>
<router-link to="/about">About</router-link>
</div>
Vuex的模块化
在刚才index.js中除了vuex.store实例对象中除了modules以外都拷贝出来并在index.js同目录创建如num.js并引入vue并用刚才拷贝的内容在这里导出,如
import Vue from 'vue';
export default {
state: {
num:1
},
getters:{
getNum(state){
return state.num;
},
getText(state){
return `[[${state.num}]]`
}
},
mutations: {
addNum(state){
state.num++;
},
addByNum(state,num){
state.num+=num;
},
addByNumAsync(state,num){
setTimeout(function(){
state.num+=num;
},0)
}
},
actions: {
addByNumAction({commit},num){
setTimeout(function(){
commit("addByNum",num);
},0)
}
},
}
然后新的index.js如
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import num from './num.js';
export default new Vuex.Store({
modules: {
num:num
}
})
然后之前app.vue上面什么都不需要修改,除非有多个命名空间的时候才会需要区分吧。
Vuex对于没有预定义的对象属性操作的坑
假如我们的存储对象中之前没有预定义一个叫name的属性,但是我们后面要对该属性进行赋值,则
Num.js中获取器、action、mutation先定义如
import Vue from 'vue';
export default {
state: {
num:1
},
getters:{
getNum(state){
return state.num;
},
getText(state){
return `[[${state.num}]]`
},
getName(state){
return state.name;
}
},
mutations: {
addNum(state){
state.num++;
},
addByNum(state,num){
state.num+=num;
},
addByNumAsync(state,num){
setTimeout(function(){
state.num+=num;
},0)
},
addProps(state, name) {
state.name=name;
}
},
//正确操作属性流程是actions=>mutations
actions: {
addByNumAction({commit},num){
setTimeout(function(){
commit("addByNum",num);
},0)
},
addProps({commit},name){
commit('addProps',name);
}
},
}
app.vue中
<div id="nav">
简易获取getNum:{{getNum}}
简易获取getText:{{getText}}
获取getName:{{getName}}
<button @click="add">增加state.num</button>
<button @click="addByNum">增加state.num(可传参的commit)</button>
<button @click="addByNumAsync">异步的commit操作</button>
<button @click="addByNumAction">异步的commit在dispatch中操作</button>
<router-link to="/about">About</router-link>
</div>
App.vue中
import { mapGetters } from 'vuex'
export default {
name:'app',
created() {
setTimeout(()=>{
//在原有属性添加数量,ok
this.$store.dispatch("addByNumAction",50);
this.$store.dispatch('addProps','jack');
},1000)
},
会发现原本不存在的name虽然能够增加上,但是页面上并没有及时显示出来
而原本存在的num则没有这个问题
该问题的解决也很简单,对于不存在于存储对象中的属性需要手动实现响应式,所以num.js中mutations中修改该不存在的name属性方法变更如
addProps(state, name) {
//不存在的属性需要手动实现响应式
if(!state.name){
Vue.set(state,'name',name);
}
else{
state.name=name;
}
}
关键字词:transition,淡入淡出,vue,npm,命令,参数,ui,项目管理器,vuex,actions,mutations,getters