一,是整个项目的思维导图
二,总结
mcv是啥
m:modules模型 数据库PHP,mysql
c:ctrl 控制 后端
v:views 页面 前端vue
他们之间的关系总结如下:
从数据库拿到数据
存到电脑的内存中
后端将数据进行整合打包
前端收到展示到页面上
二,生命周期
<template> <h1>vue3的生命周期</h1> <div id="dom">{{ msg }}--{{ num }}</div> <!-- v-on:事件名="事件方法"绑定事件 简写@符号--> <!-- 事件及方法直接声明在setup内 --> <button v-on:click="handleClick">click me</button><hr/> <!-- v-model:双向数据绑定 --> <!-- input:输入事件有 blur:失去焦点 focus:获取焦点 change:内容更改 --> <input type="text" placeholder="请输入姓名" v-model="userName"> <br/> <input type="text" placeholder="请输入电话" v-model="userphone" @focus="handleFocus" @blur="handleBlur" @change="handleChane" @input="handleInput" > <br/> <textarea placeholder="请输入您的建议" id="" cols="30" rows="10" v-model="userInput"></textarea> <p>{{userName}}---{{userInput}}</p> <button @click="submit" >提交</button> </template> <script> import { reactive,toRefs,onBeforeMount,onMounted,onBeforeUpdate, onUpdated, } from "vue"; export default { // name: "about", setup() { const data = reactive({ msg: "你好", msg1: "您好1", num: 0, userName:"", userInput:"", userphone:"", }); // 数据渲染前 onBeforeMount(() => { console.log("onBeforeUnmount", document.querySelector("#dom")); }); // 数据渲染后 onMounted(() => { console.log("onBeforeUnmount", document.querySelector("#dom")); setTimeout(() => { // data.msg = "hello"; // data.msg1="hello"这里只能有一个 }, 2000); }); // 数据更新前 onBeforeUpdate(() => { console.log("onBeforeUnmount", document.querySelector("#dom")); }); // 数据更新后 onUpdated(() => { console.log("onBeforeUnmount", document.querySelector("#dom")); // data.num + =1;触发死循环,尽量不要在这里写 }); // 事件及方法 const handleClick = () => { alert("您好") } const submit =() => { alert('${data.userName} 的建议是 ${data.userInput}') } const handleFocus =() => { console.log("获取焦点"); } const handleBlur =() => { console.log("失去焦点"); if(!data.userphone){ alert("手机号必填") } } const handleInput =() => { //正则验证手机号 if(!/^[1][3,4,5,7,8][0-9]{9}$/.test(data.userphone)){ console.log("不符合手机号"); } } return { ...toRefs(data), handleClick, submit, handleBlur, handleFocus, handleInput }; }, }; </script>
三,路由
在vuex的store中的index.js文件代码:
// import { reject } from 'core-js/fn/promise' import { createStore } from 'vuex' import number from "./state/num.state.js" export default createStore({ //全局的状态初始值 state: { count: 1, }, //判断,类似于计算state的计算属性,获取state的对应值 getters: { countStatus(state){ return state.count>=1 } }, //更新状态的方法-更新state的唯一方法,commit mutatios mutations: { setCount(state,num){ state.count=num+1 } }, //可以异步操作,可以返回promise,更改数据还是回传递到mutations去更改 actions: { setCountPromise(context,num){ return new Promise((resolve,reject)=>{ if(num>100){ reject("值不能大于100") }else{ context.commit("setCount",num) resolve(num) } }) } }, //数据比较多,分模块 modules: { number } })