|
阅读：3124回复：8
Vue3 教程 笔记Vue3 起步 传递给 createApp 的选项用于配置根组件。在使用 mount() 挂载应用时，该组件被用作渲染的起点。 Vue.createApp(HelloVueApp).mount('#hello-vue') 一个应用需要被挂载到一个 DOM 元素中，以上代码使用 mount('#hello-vue') 将 Vue 应用 HelloVueApp 挂载到 <div id="hello-vue"></div> 中。 <div id="hello-vue" class="demo"> pw_ message </div> <script> const HelloVueApp = { data() { return { message: 'Hello Vue!!' } } } Vue.createApp(HelloVueApp).mount('#hello-vue') </script> |
|
|
沙发#
发布于：2023-06-27 11:35
v-for列表渲染及扩展用法及注意事项 <body> <div id="app"> <!-- 普通列表(死数据) --> <ul> <li>长秀</li> <li>长歌</li> <li>藏剑</li> </ul> <!-- 列表渲染--获取item --> <!-- in 可以改为 of --> <ul v-for="item in titles"> <li>pw_itempw_index</li> </ul> <!-- 列表渲染--获取序号和item --> <!-- 这种写法循环的是ul本身, 与小程序不同 --> <ul v-for="(item,index) in titles"> <li>pw_itempw_index</li> </ul> <!-- vue风格的列表渲染(推荐这种写法) --> <!-- 这种写法循环的是li , 把v-for加在什么标签上就是循环什么 --> <ul> <li v-for="(item,index) of titles">pw_itempw_index</li> </ul> <!-- 遍历对象--获取键、值、序号 --> <ul> <li v-for="(value,key,index) of book">pw_valuepw_keypw_index</li> </ul> </div> </body> <script> const { createApp } = Vue // 定义数组 const titles = ['七秀','长歌','藏剑'] const app = { setup() { return { titles, book:{ title:'百年孤独', author:'马尔克斯', pubdate:'2000' } } } } createApp(app).mount('#app') </script> |
|
|
板凳#
发布于：2023-06-27 12:13
2-4、Vue3.0中的watch函数--高级用法监听reactive对象下单个属性 <body> <div id="app"> <input v-model="name.firstName"> <input v-model="name.lastName"> <div>pw_name.fullName</div> </div> </body> <script> const { createApp, ref, reactive, watch } = Vue const name = reactive({//reactive的包装是深层次的里面的属性也包装成了响应式对象 firstName:'', lastName:'', fullName:'' }) const app = { setup() { // 监听响应式对象下的部分属性: watch监听回调函数 或 getter方法 watch(()=>name.firstName,(newVal, oldVal)=>{ name.fullName = name.firstName + name.lastName }) watch(()=>name.lastName,(newVal, oldVal)=>{ name.fullName = name.firstName + name.lastName }) return { name } } } createApp(app).mount('#app') </script> |
|
|
地板#
发布于：2023-06-27 14:48
3-1、watch小结与引入computed计算属性 建议通常使用watch监听单个属性, 或者监听reactive某一个属性变化. 最好不要监听一整个对象的变化. computed 计算属性 : 比watch更适合计算一个属性, 并且绑定。 3-2、computed函数的基本用法 <body> <div id="app"> <input v-model="firstName"> <input v-model="lastName"> <div>pw_fullName</div> </div> </body> <script> const { createApp, ref, reactive, watch, computed } = Vue const firstName = ref('') const lastName = ref('') // 当我们计算一个属性并且显示它的时候, 最简单的做法就是用computed; const app = { setup() { // computed 计算属性 : 适合计算一个属性, 并且绑定. // computed将监听它里面所有的变量, 里面变量发生变化就会触发结果重新计算 // 计算出来的结果是只读的, 所以fullName是不能被改变的 const fullName = computed(()=> firstName.value + lastName.value ) return { firstName, lastName, fullName } } } createApp(app).mount('#app') </script> |
|
|
4楼#
发布于：2023-06-27 14:55
3-3、watch、computed、普通js函数的使用场景和区别 <body> <div id="app"> <input v-model="firstName"> <input v-model="lastName"> <div>pw_getFullName()</div> </div> </body> <script> const { createApp, ref, reactive, watch, computed } = Vue const firstName = ref('') const lastName = ref('') /* watch、computed、普通js函数的区别: watch和computed如何选择?在于使用场景上 watch 重点为了监听做事情. 看重的不是返回结果, 而是属性的变化. computed 重点为了得到一个属性值,看重的是它的返回结果. 普通js函数和computed的区别: computed性能会更好一些, 它有一个计算缓存; 普通js函数没有计算缓存. 如果computed里面的变量或值没有发生变化, 那么就不会重新执行计算, 而是从计算缓存中读取结果. 所以优先使用watch和computed */ const app = { setup() { // 普通js函数 function getFullName() { return firstName.value + lastName.value } return { firstName, lastName, getFullName } } } createApp(app).mount('#app') </script> |
|
|
5楼#
发布于：2023-06-27 15:46
1-2、Vue4.xCli创建Vue3项目或者使用Vite创建Vue3项目 /*用脚手架快速创建初始实例应用程序的两种方法: cli创建 或 vite创建 vue的cli创建应用程序: sp1.终端命令 安装npm, 验证 $ npm -v 安装vue的脚手架工具-cli, $ sudo npm i -g @vue/cli sp2.创建vue的应用程序 $ cd 存放项目的文件夹目录下 $ vue create 项目名 可以自定义安装, 通过空格选中和取消选中 sp3.项目升级到vue3.0 $ vue add vue-next vite是vue3提供的小工具, 旨在替换webpack sp1. 创建一个名为old-time-vite的项目 回退到项目根目录 $ cd .. $ npm init vite-app old-time-vite sp2.运行项目 $ cd old-time-vite/ $ npm install $ npm run dev */ |
|
|
6楼#
发布于：2023-06-28 16:33
1-2 自定义组件的自定义事件与传参 (最常用)
在swiper.vue中: <template> <!-- @click.native触发原生的onClick事件 --> <img @click="onImgClick" class="size" :src="url" > <span>pw_num</span> </template> <script> const testNum = 'a' export default { name: 'Swiper', props: { url:{ type: String, default:'' }, num:{ type: Number } }, setup(props,context){ function onImgClick() { //sp1.创建自定义事件: 参数一:自定义事件名; 参数二:自定义事件参数 context.emit('sub-event', testNum) } return { onImgClick } } } </script> 在App.vue中: <template> <div id="app"> <img src="./assets/home/logo.png"> <!-- sp2.响应子组件的自定义事件 --> <swiper @sub-event="onTestClick" :url="m3" ></swiper> </div> </template> <script> import Swiper from '@/components/swiper.vue' import m3 from '@/assets/home/logo.png' export default { name: 'App', components: { Swiper }, setup(){ // sp3.接收子组件自定义事件传递过来的参数 function onTestClick(event) { console.log(event) } return { m3, onTestClick } } } </script> |
|
|
7楼#
发布于：2023-06-29 09:02
2-11、多项条件渲染
<body> <div id="app"> <!-- if else --> <div v-if="flag" v-text="message1"></div> <div v-else v-html="message2"></div> <!-- if elseif else --> <div v-if="number===1" v-text="message1"></div> <div v-else-if="number===2" v-html="message2"></div> <div v-else>hello, 10月</div> </div> </body> <script> const { createApp } = Vue const message1 = "hello, 8yue" const message2 = "<div style='background-color:red'>hello, 9yue" const flag = false const number = 1 const app = { setup() { return { message1, message2, flag, number } } } createApp(app).mount('#app') </script> 2-12、v-for列表渲染及扩展用法及注意事项 <body> <div id="app"> <!-- 普通列表(死数据) --> <ul> <li>长秀</li> <li>长歌</li> <li>藏剑</li> </ul> <!-- 列表渲染--获取item --> <!-- in 可以改为 of --> <ul v-for="item in titles"> <li>pw_itempw_index</li> </ul> <!-- 列表渲染--获取序号和item --> <!-- 这种写法循环的是ul本身, 与小程序不同 --> <ul v-for="(item,index) in titles"> <li>pw_itempw_index</li> </ul> <!-- vue风格的列表渲染(推荐这种写法) --> <!-- 这种写法循环的是li , 把v-for加在什么标签上就是循环什么 --> <ul> <li v-for="(item,index) of titles">pw_item pw_index</li> </ul> <!-- 遍历对象--获取键、值、序号 --> <ul> <li v-for="(value,key,index) of book">pw_value pw_index</li> </ul> </div> </body> <script> const { createApp } = Vue // 定义数组 const titles = ['七秀','长歌','藏剑'] const app = { setup() { return { titles, book:{ title:'百年孤独', author:'马尔克斯', pubdate:'2000' } } } } createApp(app).mount('#app') </script> |
|
|
8楼#
发布于：2023-06-29 10:21
1-1、双向数据绑定 <body> <div id="app"> <!-- js数据可以流向html, html数据发生变化后可以反向流回js --> <!-- v-model双向绑定指令: 实质是v-bind和v-on--> <!-- 所以v-model不是双向数据绑定的核心, 核心是响应式对象 --> <input v-model="age" type="text"> <button @click="onClick">提交</button> </div> </body> <script> const { createApp, ref, reactive } = Vue // ref()可以把原来的数据类型变为响应式对象 const age = ref(18)// ref()把18保证成ref响应式对象,长的类似普通对象{ value:18 } console.log(age) // reactive()也可以把原来的数据类型变为响应式对象 const profile = reactive({ age:18 }) // ref和reactive的区别: ref()传入的是js的基本数据类型; reactive()中传入的是object普通对象 const app = { setup() { function onClick() { // 1.原生js document.getELe // 2.小程序 event alert(age.value)//对象取值用.value } return { age, onClick } } } createApp(app).mount('#app') </script> |
|
