zhangax2008
管理员
管理员
  • UID1
  • 粉丝0
  • 关注0
  • 发帖数37
阅读:3008回复:8

Vue3 教程 笔记

楼主#
更多 发布于:2023-06-20 16:01

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>
gogogo
管理员
管理员
  • UID25
  • 粉丝0
  • 关注0
  • 发帖数1381
沙发#
发布于: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>
gogogo
管理员
管理员
  • UID25
  • 粉丝0
  • 关注0
  • 发帖数1381
板凳#
发布于: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>
gogogo
管理员
管理员
  • UID25
  • 粉丝0
  • 关注0
  • 发帖数1381
地板#
发布于: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>
gogogo
管理员
管理员
  • UID25
  • 粉丝0
  • 关注0
  • 发帖数1381
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>
gogogo
管理员
管理员
  • UID25
  • 粉丝0
  • 关注0
  • 发帖数1381
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
*/
gogogo
管理员
管理员
  • UID25
  • 粉丝0
  • 关注0
  • 发帖数1381
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>
gogogo
管理员
管理员
  • UID25
  • 粉丝0
  • 关注0
  • 发帖数1381
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>
gogogo
管理员
管理员
  • UID25
  • 粉丝0
  • 关注0
  • 发帖数1381
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>
游客


返回顶部