手机网站模板 餐饮,wxparse wordpress,网络销售网站推广,wordpress 发送邮件插件阅读文章你将收获#xff1a;
1 了解不使用组件化工具时#xff0c;vue在html是如何使用的
2 知道vue2的生命周期函数有哪些
3 知道如何在组件化开发中使用vue
4 大致了解了vue2和vue3在使用上什么不同
最后#xff1a;vue2和vue3除了下面我列出的有差异化的地方
1 了解不使用组件化工具时vue在html是如何使用的
2 知道vue2的生命周期函数有哪些
3 知道如何在组件化开发中使用vue
4 大致了解了vue2和vue3在使用上什么不同
最后vue2和vue3除了下面我列出的有差异化的地方还有其他地方不一样比如vue2中只能有一个根组件而vue3不做限制,对于一些细致的地方需要自己去详细了解........ 原生的vue结构
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapph3{{ title }}/h3divbutton clickcount---/buttonspan{{ count }}/spanbutton clickcount/buttondiv计算属性{{doubleCount}}/divdiv 响应式数据 {{count}} /divdivbutton clickchangeAge 修改对象的年龄/button/div/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({// 通过el绑定对象el里面可以填一个选择器el: #app,// 声明响应式数据data: {count: 100,title: 计数器,obj: {name: jack,age: 18}},// 声明计算属性computed: {// 简单写法属性只读doubleCount () {return this.count * 2},// 复杂写法可以修改属性值特殊场景使用一般不用doubleCountPlus: {get() {return this.count * 2},set(value) {return value}}},// 声明方法methods: {saiHello () {console.log(hello);},changeAge () {// 修改对象的年龄this.obj.age 20}},// 监视器 -监视数据变化watch: {// 简单写法count (oldValue,newValue) {console.log(oldValue,newValue);},// 完整写法 --obj: {deep: true, //深度监视可以监听到数据中的对象属性的变化这里是基本变量所以immediate: true, //立刻执行handler (newValue) {console.log(newValue);}}},// vue的生命周期函数// 1. 创建阶段准备数据beforeCreate(){console.log(数据未初始化之前this.count);},created(){console.log(数据完成初始化后this.count);},// 2. 挂载阶段渲染模板beforeMount(){console.log(渲染模板之前document.querySelector(span).innerHTML);},mounted(){console.log(渲染模板之后document.querySelector(span).innerHTML);},// 3. 更新阶段(修改数据 → 更新视图)beforeUpdata(){console.log(数据变化之前this.count);},updated(){console.log(数据变化之后this.count);},// 4. 卸载阶段beforeDestroyed(){console.log(对象销毁之前this.count);},destroyed(){console.log(对象销毁之后this.count);}})/script
/body
/html vue2组件化结构
main.js
import Vue from vue
import App from ./App.vue
import router from ./router
import store from ./storeVue.config.productionTip falsenew Vue({router,store,render: h h(App)
}).$mount(#app)App.vue
templatediv idapprouter-view//div
/templatestyle langless/stylevuex
import Vue from vue
import Vuex from vuex// 注册仓库
Vue.use(Vuex)// 导出仓库
export default new Vuex.Store({state: {},getters: {},mutations: {},actions: {},modules: {}
})router
import Vue from vue
import VueRouter from vue-routerVue.use(VueRouter)const routes [{ path: /home, component: () import(/views/home.vue) }
]const router new VueRouter({routes
})export default routerhome组件
templatedivdiv这是home组件/divspan666/spandiv响应式数据{{ count }}/divdivbutton clicksaiHello调用saiHello方法/button/divdiv计算属性{{ doubleCount }}/divdiv {{ doubleCountPlus }}button clickdoubleCountPlus 60 修改计算属性/button/divdivbutton clickchangeAge修改obj的年龄触发监视器/button/div/div
/templatescript
export default {name: homeIndex,// 定义响应式数据data () {return {count: 10,list: [],obj: {name: jack,age: 18}}},// 定义方法methods: {saiHello () {console.log(hello,vue2)},changeAge () {this.obj.age}},// 定义计算属性computed: {// 简化版doubleCount () {return this.count * 2},// 完整版 (在特定的场景使用)doubleCountPlus: {get () {return this.count * 5},set (value) {console.log(value)}}},// 定义监视器watch: {count (oldValue, newValue) {console.log(oldValue, newValue)},obj: {// 立即执行immediate: true,deep: true,handler (newValue) {console.log(newValue)}}},// vue的生命周期函数// 1. 创建阶段准备数据beforeCreate () {console.log(数据未初始化之前 this.count)},created () {console.log(数据完成初始化后 this.count)},// 2. 挂载阶段渲染模板beforeMount () {console.log(渲染模板之前 document.querySelector(span).innerHTML)},mounted () {console.log(渲染模板之后 document.querySelector(span).innerHTML)},// 3. 更新阶段(修改数据 → 更新视图)beforeUpdata () {console.log(数据变化之前 this.count)},updated () {console.log(数据变化之后 this.count)},// 4. 卸载阶段beforeDestroyed () {console.log(对象销毁之前 this.count)},destroyed () {console.log(对象销毁之后 this.count)}}
/scriptstyle/stylevue3组件化结构
mian.js import { createApp } from vue
import { createPinia } from piniaimport App from ./App.vue
import router from ./routerconst app createApp(App)app.use(createPinia())
app.use(router)app.mount(#app)App.vue
script setup
/scripttemplateRouterView /
/templatestyle scoped/stylerouter(路由)
import { createRouter, createWebHistory } from vue-routerconst router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: /home, component: () import(/views/home.vue)},{path: /login, component: () import(/views/login.vue)}]
})export default routerpinia(仓库)
import { ref, computed } from vue
import { defineStore } from piniaexport const useCounterStore defineStore(counter, () {const count ref(10)const doubleCount computed(() count.value * 2)function increment() {count.value}return { count, doubleCount, increment }
})vue3_home组件
script setup
import { computed, onBeforeMount, onBeforeUnmount, onMounted, onUnmounted, onUpdated, reactive, ref, watch } from vue;
import testComponent from /components/testComponent.vue// 导入仓库内容
import { useCounterStore } from /stores/counter;
import { onBeforeRouteLeave, useRoute, useRouter } from vue-router;
// 实例化仓库对象
const counter useCounterStore()
console.log(输出仓库对象count counter.count)const route useRoute()
const router useRouter()
const login () {router.push(/login?name${obj.name})
}
// 定义响应式数据
const count ref(10)
// 使用reactive定义的响应式数据可以直接通过对象获取属性obj.name
const obj reactive({age: 18,name: 李四
})// 定义方法
const saiHello () {console.log(hello,vue3);
}
function changeCount () {count.value
}
const changeName () {obj.age
}//定义计算属性
const doubleCount computed(() {return count.value * 3
})
// 计算属性的完整写法
const doubleCountPlus computed({get () {return count.value * 4},set (value) {return count.value * value}
})//watch 监视器 watch(obj,(oldValue,newValue) {console.log(oldValue, newValue);
},{deep: true,immediate: true
})// vue的生命周期函数// 这二个方法在vue3中被setup语法糖替代了// function beforeCreate(){// console.log(数据未初始化之前this.count);// }// function created(){// console.log(数据完成初始化后this.count);// }// 2. 挂载阶段渲染模板onBeforeMount(() {console.log(渲染模板之前);}) onMounted(() {console.log(渲染模板之后);})// 3. 更新阶段(修改数据 → 更新视图)onBeforeRouteLeave(() {console.log(数据变化之前);})onUpdated(() {console.log(数据变化之后);})// 4. 卸载阶段onBeforeUnmount(() {console.log(对象销毁之前);})onUnmounted(() {console.log(对象销毁之前);})
/scripttemplatediv我是home页面/divdivbutton clicksaiHellosaiHello/button/divdivcount变量{{ count }} button clickchangeCount/button /divdiv计算属性{{ doubleCount }} /divdivage:button clickchangeName/button/divdivobj:{{obj}}/divtestComponentv-我是默认插槽的内容template v-slot:test我是具名插槽的内容/template/testComponentdiv{{ counter.count }}/divbutton clicklogin点击按钮跳转到登录页/button/templatestyle scoped/stylevue2和vue3不同点总结
指令
相同点 v-html,v-show,v-if ,v-else,v-esle-if,v-bind,v-on 这七个指令的用法和简写方式不管是在vue2还是vue3用法都是一样的
不同点 v-model 作用于表单元素用法一样 作用于其他元素 vue2 :value属性和input事件 vue3 :valuemode属性和update:modelValue事件 响应式数据 在vue中要想将变量定义成响应式数据需要将变量定义到data中
在vue中如果要定义响应式数据需要使用ref和reactive这二个函数来定义 methods方法 在vue2中所有的不同方法都需要写在选项methos中
在vue3引入了组合式api的概念只要在script setup/script加入了setup这个语法糖那么就可以将普通方法和变量定义到script的里面 computed计算属性 在vue2中要定义计算属性需要将方法或者对象定义到computed选项中
在vue3中要定义计算属性需要将方法或者对象定义到computed函数中 watch监听器
在vue2中要定义计算属性需要将方法或者对象定义到watch选项中
在vue3中要定义计算属性需要将方法或者对象定义到watch函数中
生命周期函数 组件通信
父子关系的组件通信
相同点同样是使用props和emit来实现
不同点在vue中要获取pros和emit这二个对象需要通过defineProps和defineEmits这二个自定义宏来获取 获取dom元素
在vue2中使用ref和refs来绑定和获取dom元素 在vue3获取绑定对象
声明变量 绑定dom元素 插槽
vue2和vue3中插槽的用法是一样的
声明 使用 路由
相同点
1 都是使用vue-router这个插件来实现路由来切换页面
2 声明式导航 router-link的用法是一样的
不同点
初始化路由的方式不一样 编程路由获取和使用方式不一样 vue2:通过$route和$router(都是内置的对象)
获取路由参数 $route
编程式路由跳转$router vue3:通过useRoute和useSouter这二个函数来获取route和router对象 仓库
vuex
vue2中使用vuex来管理 vue 通用的数据 (多组件共享的数据)
官网Vuex官网
定义 使用
获取仓库变量 调用仓库的mutatios方法 调用仓库的actions方法 带哦用仓库的getters属性 pinia
vue3中使用pinia来管理 vue 通用的数据 (多组件共享的数据)
官方文档 Pinia
pinia和vuex的用法用法基本一样但不同的是在pinia中没有moudel和mutatios这二个选项
然后使用的方式也有一些小差别想了解更多可以查看上面的官网
声明 使用
