使用单文件组件开发todolist
App.vue
<template>
<div>
<input v-model="inputValue" />
<button class="button" @click="handleAddItem">提交</button>
</div>
<ul>
<list-item
v-for="(item,index) in list"
:key="index"
:msg="item"
></list-item>
</ul>
</template>
<script>
import { reactive,ref } from "vue";
import ListItem from './components/ListItem.vue'
export default {
name: 'App',
components:{ ListItem },
setup(){
const inputValue=ref('');
const list = reactive([]);
const handleAddItem = ()=>{
list.push(inputValue.value);
inputValue.value=' ';
};
return { inputValue, list,handleAddItem }
}
}
</script>
<style>
.button{
margin-left: 20px;
color: red;
}
</style>
ListItem.vue
<template>
<li class="button">{{ msg }}</li>
</template>
<script>
export default {
name: 'ListItem',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
路由Router
路由是根据url的不同，展示不同的内容
1.在创建项目时选择Router属性
2.main.js中,使用路由
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
views目录下，配置路由
App.vue中,跳转不同的路由，展示对应的内容
*router-link 是跳转路由的标签
*router-view 负责展示当前路由对应的组件内容
<template>
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/login">Login</router-link>
</nav>
<router-view/>
</template>
router/index.js中，编写路径和组件之间的关系，进行配置
import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Login from '../views/Login.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
**异步加载路由：
（1）当访问首页不会加载其他页面的代码，防止加载过多代码，提高加载首页的速率
（2）页面跳转会慢一些
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
运行结果：
点击Home
点击About
点击login
VueX语法
VueX：数据管理框架
创建项目时选择VueX属性
main.js中,
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).mount('#app')
store： VueX提供的一个全局仓库
*VueX创建了一个全局唯一的仓库，用来存放全局的数据
store/index.js中，
import { createStore } from 'vuex'
export default createStore({
state: {
name:'dell'
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})
使用store中的全局数据
return this.$store.state.name;
HomeView组件中
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<h1>{{myName}}</h1>
</div>
</template>
<script>
export default {
name: 'HomeView',
computed:{
myName(){
return this.$store.state.name;
}
}
}
</script>
*改变全局数据
1.调用 dispatch 方法，派发一个 action，名字叫做 change
2.感知到change这个 action，执行 store 中 action 下面的方法 change
3.commit提交一个叫做 change 的数据改变
4.mutation感知到提交的change改变，执行change方法，改变数据
想要改变about界面的数据
about.vue中
<template>
<div class="about">
<h1 @click="handleClick">This is an about page</h1>
<h1>{{myName}}</h1>
</div>
</template>
<script>
export default {
name: 'AboutView',
computed:{
myName(){
return this.$store.state.name;
}
},
methods:{
handleClick(){
//想改变数据，VueX要求第一步必须派发一个action
this.$store.dispatch('change')
// this.$store.commit('change')//不涉及到异步操作，只是同步修改数据，可以简化
}
}
}
</script>
store/index.js中
*mutation里面只允许写同步代码，不允s许写异步代码
*actions放异步代码
*dispatch与actions做关联，commit与mutation做关联
import { createStore } from 'vuex'
export default createStore({
state: {
name:'dell'
},
getters: {
},
mutations: {
//第四步：对应的mutation被执行
change(){
//第五步：在mutation中修改数据
this.state.name="lee";
}
},
actions: {
//第二步：store感知到你触发的一个叫做change的action，执行change方法1
change(){
//第三步：提交一个commit,触发一个mutation
setTimeout(()=>{
this.commit('change');
},2000)
}
},
modules: {
}
})
mutations: {
change(state,str){
state.name=str;
}
},
actions: {
change(store,str){
setTimeout(()=>{
store.commit('change',str);
},2000)
}
},
*改变数据的另一种方法
AboutView.vue中，
methods:{
handleClick(){
this.$store.dispatch('change','hello world');
}
}
store/index.js中，
mutations: {
change(state,str){
state.name=str;
}
},
actions: {
change(store,str){
setTimeout(()=>{
store.commit('change',str);
},2000)
}
},
对store进行局部拆分的功能
modules: {
}
CompositionAPI使用VueX
AboutView.js中，
通过uesStore函数获得全局数据对象
<template>
<div class="about">
<h1 @click="handleClick">This is an about page</h1>
<h1>{{name}}</h1>
</div>
</template>
<script>
import { toRefs } from "vue";
//通过uesStore获得全局数据对象
import { useStore } from "vuex";
export default {
name: 'AboutView',
setup(){
const store = useStore();
const { name } = toRefs(store.state);
const handleClick = ()=>{
store.dispatch('getData');
}
return{
name,handleClick
}
}
}
</script>
store/index.js中
import { createStore } from 'vuex'
export default createStore({
state: {
name:'dell'
},
getters: {
},
mutations: {
changeName(state,str){
state.name=str;
}
},
actions: {
getData(store){
setTimeout(()=>{
store.commit('changeName',"hei!marry");
},2000)
}
},
modules: {
}
})
使用axios发送ajax请求
从远程的网站上获取数据
先在terminal终端下载axios
npm install axios --save
引入axios
import axios from "axios";
在store/index.js中，
import { createStore } from 'vuex'
import axios from "axios";
export default createStore({
state: {
name:'dell'
},
getters: {
},
mutations: {
changeName(state,str){
state.name=str;
}
},
actions: {
getData(store){
axios.get('https://www.fastmock.site/mock/ae8e9031947a302fed5f92425995aa19/jd/api/user/register')
.then((response)=>{
console.log(response);
const msg = response.data.desc;
console.log(msg);
store.commit('changeName',msg)
});
}
},
//对store进行局部拆分的功能
modules: {
}
})
