封面型网页网站有哪些,北京品牌建设网站公司,东莞 企业网站建设,秦皇岛网络推广公司文章目录 1.创建Vue项目1.1创建项目1.2 初始项目 2.vue3 语法2.1 复杂写法2.2 简易写法2.3 reactive#xff08;对象类型#xff09;2.4 ref#xff08;简单类型#xff09;2.5 computed(计算属性)2.6 watch#xff08;监听#xff09; 3.vue3 生命周期4.vue3 组件通信4.… 文章目录 1.创建Vue项目1.1创建项目1.2 初始项目 2.vue3 语法2.1 复杂写法2.2 简易写法2.3 reactive对象类型2.4 ref简单类型2.5 computed(计算属性)2.6 watch监听 3.vue3 生命周期4.vue3 组件通信4.1 父传子defineProps4.1 子传父defineEmits 5.vue3 跨组件通信5.1 跨层传递数据5.2 跨层传递方法 6.vue3 跨组件通信pinia6.1 下载pinia6.2 pinia的全局注册6.3 pinia的使用 1.创建Vue项目
1.1创建项目 项目文件下运行 npm init vuelatest npm init vuelatest1.2 初始项目 npm install2.vue3 语法
2.1 复杂写法
script
export default {setup() {const message 年后;const messagehandle () {console.log(message);};return {message,messagehandle,};},
};
/script2.2 简易写法
script setup
const message 你好呀;
const logHandle () {console.log(message);
};
/script 响应式api完成响应式数据 2.3 reactive对象类型
script setup
//引入响应式对象
import { reactive } from vue;
//执行响应式对象
const state reactive({status: 0,
});
//自定义匿名函数
const addCunt () {state.status;
};
/script2.4 ref简单类型 ref执行的响应式数据要用.value接受, import { ref } from vue;const state ref(0);const addCunt () {state.value;
};2.5 computed(计算属性) 调用computed返回值用一个常量接受。 script setup
import { ref } from vue;
import { computed } from vue;
const list ref([1, 2, 3, 4, 5, 6, 7, 8]);const computedList computed(() {return list.value.filter((item) item 2);
});
/script2.6 watch监听 1.监听单个值的变化 2.watch 默认是监听ref浅层监听。 //监听数据的变化
watch(count, (newValue, oldValue) {console.log(newValue, , oldValue);
});2.监听多个值的变化 //监听数据的变化
watch([count, name], ([newCount, newName], [oldCount, oldName]) {console.log(newCount, newName, , oldCount, oldName);
});immediate在为触发前执行一次 watch(count,() {console.log(11);},{immediate: true,}
);4.深度监听 watch(count,() {console.log(111);},{deep: true,}
);3.vue3 生命周期 vue3的生命周期和vue2类似。 4.vue3 组件通信
4.1 父传子defineProps 1.在父组件在vue3中引入子组件直接使用不需要注册 2.在子组件通过defineProps接受数据 父
script setup
import { ref } from vue;
import sonCom from ./components/son.vue;
const number ref(100);
/scripttemplatedivsonCom message小明 :numbernumber/sonCom/div
/template子
templatediv{{ message }}{{ number }}/div
/templatescript setup
const count defineProps({message: String,number: Number,
});
console.log(count.message);
/scriptstyle/style4.1 子传父defineEmits
script setup
import sonCom from ./components/son.vue;
import { ref } from vue;
const getMessage (msg) {console.log(msg);
};
/scripttemplatedivsonCom get-messagegetMessage/sonCom/div
/template
templatebutton clicksendMsg按钮/button
/templatescript setup
const emit defineEmits([get-message]);
const sendMsg () {emit(get-message, 5555);
};
/scriptstyle/style
5.vue3 跨组件通信 provide 发送消息inject接受消息 5.1 跨层传递数据
发送消息
provide(data-key, count);接受消息
const message inject(data-key);5.2 跨层传递方法
const count ref(0);
const addcount () {count.value;
};provide(methods, addcount);const methods inject(methods);6.vue3 跨组件通信pinia
pinia官网
6.1 下载pinia
npm install pinia6.2 pinia的全局注册
import ./assets/main.cssimport { createApp } from vue
import { createPinia } from pinia
import App from ./App.vueconst piniacreatePinia()createApp(App).use(pinia).mount(#app)
6.3 pinia的使用 import {defineStore} from pinia
import { ref } from vue
export const useCounterStoredefineStore(counter,(){//定义数据const countref(0)//定义方法const addCount(){count.value}//以对象返回数据return{count,addCount}
})使用pinia script setup
//导入方法
import { useCounterStore } from ./stores/counter;
//执行方法得到实例对象
const useCounter useCounterStore();
console.log(useCounter);
/scripttemplatedivbutton clickuseCounter.addCount{{ useCounter.count }}/button/div
/template
