vue基础用法-初步使用vue

Posted 2023-06-01 Young_Yang_Yang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue基础用法-初步使用vue相关的知识，希望对你有一定的参考价值。

1.基本使用步骤

导入vue.js的script脚本文件
在页面中声明一个将要被vue所控制的DOM区域
创建vm实例对象（vue实例对象）

<!DOCTYPE html>
<html lange="en">
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 希望 Vue 能够控制下面的这个div，帮我们在把这个数据填充到 div 内部 -->
		<div id="app">username</div>

		<!-- 1.导入Vue的库文件，在weindow全局就有了Vue这个构造函数 -->
		<script src="lib/vue-2.6.12.js"></script>
		<!-- 2.创建Vue的实例对象 -->
		<script>
			//创建Vue的实例对象
			const vm = new Vue(
				// el 属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
				el: \'#app\',
				// data对象就是要渲染到页面上的数据
				data: 
					username: \'zhangsan\'
				
			)
		</script>
	</body>
</html>

vue-vuex初步封装与高级用法

目标：将vuex的使用文件分离。一般按状态state，获取state，同步修改state，异步修改state 分离

vuex存放目录：

技术图片

store/index.js

/*
 * @Author: lingxie
 * @Date: 2020-04-23 13:35:57
 * @Descripttion: 
 */ 
import Vue from ‘vue‘
import Vuex from ‘vuex‘
import state from ‘./state‘
import getters from ‘./getters‘
import mutations from ‘./mutations‘
import actions from ‘./actions‘

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
})

store/state.js

/*
 * @Author: lingxie
 * @Date: 2020-06-04 10:29:48
 * @Descripttion: 
 */ 
export default{
    msg:‘‘,
    token:‘‘,
    time:"2020-5-20",
    week:"星期一",
    count:0,
}

store/getters.js

/*
 * @Author: lingxie
 * @Date: 2020-06-04 10:22:18
 * @Descripttion: 
 */ 
export default{
    g_week(state){
         return state.week = ‘星期二‘;
    }, 
}

store/mutations.js

/*
 * @Author: lingxie
 * @Date: 2020-06-04 10:22:29
 * @Descripttion: 
 */ 

export default {
    add(state,n) {
        console.log(‘增加count,有参数‘);
        state.count+=n;
    },
    reduceCount(state){
        console.log(‘减少count，无参数‘);
        state.count--;
    },
}

store/actions.js

/*
 * @Author: lingxie
 * @Date: 2020-06-04 10:22:38
 * @Descripttion: 
 */ 
export default{
    // async getToken({commit}){
    //     var res = await axios.get(‘/xxxxx‘)
    //     commit(‘setToken‘,res)
    // },
    reduce({commit}){
        setTimeout(()=>{
            console.log(‘10秒后减少数量‘)
            commit(‘reduceCount‘)
        },10);
    },
}

页面使用

<!--
 * @Author: lingxie
 * @Date: 2020-06-04 10:17:53
 * @Descripttion: 
--> 
<template>
    <div>
        <h1>vuex-vue状态管理</h1>
        <p>信息：{{msg}}</p>
        <p>token：{{token?‘token‘:‘null‘}}</p>
        <p>时间：{{time}}</p>
        <p>星期： {{week}}</p>

        <h3>数量：{{count}}</h3>
        <p>
            <button @click="add(6)">同步传参增加</button>
        </p>
        <p>
             <button @click="reduce(6)">异步传承减少</button>
        </p>
    </div>
</template>
<script>
import { mapState, mapGetters,mapMutations,mapActions } from "vuex";
export default {
    data(){
        return{

        }
    },
    computed:{
        /* 相当于
            time(){return this.$store.state.time},
            token(){return this.$store.state.token}
        */ 
        ...mapState([‘time‘,‘token‘,‘count‘]),

        /*相当于
            msg(state){ return state.msg = ‘hello‘}
        */ 
        ...mapState({
            msg:state => state.msg = ‘hello‘
        }),
         /*相当于
            week(state){return state.g_week}
        */ 
        ...mapGetters({
            week:‘g_week‘
        })
    },
    methods:{
        /*相当于
            add(){
                this.$store.commit(‘add‘)
            }
        */ 
        ...mapMutations([‘add‘]),
         /*相当于
            reduce(){
                this.$store.dispatch(‘add‘)
            }
        */ 
        ...mapActions([‘reduce‘])
    }
}
</script>
<style lang="less" scoped>

</style>

以上是关于vue基础用法-初步使用vue的主要内容，如果未能解决你的问题，请参考以下文章

vue基础用法-初步使用vue

1.基本使用步骤

vue-vuex初步封装 与 高级用法

vue-vuex初步封装与高级用法