Vue3快速入门/Vue3基础速通

Vue3

渐进式的javascript框架，我们可以逐步引入vue的功能

你可以借助 script 标签直接通过 CDN 来使用 Vue：

复制代码

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

通过 CDN 使用 Vue 时，不涉及"构建步骤"。这使得设置更加简单，并且可以用于增强静态的 HTML 或与后端框架集成。但是，你将无法使用单文件组件 (SFC) 语法。

简单的web页面不需要使用复杂的vue框架构建即可呈现出精美的效果，因此我们先使用cdn的方式来学习vue，以后逐步过渡到完整框架。

vue一般有两种开发方式，一种是组件式，一种是组合式。vue3官方文档主推组合式的编写，因此我们也使用组合式开发

组合式学习

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <p>{{ web.title }} {{ web.url }}</p>
    </div>

    <script>
        Vue.createApp({
            // setup选项，用于设置响应式数据和方法等
            setup(){
                const message = Vue.ref('Hello Vue!')
                // 这是个对象，可以直接在模板中使用
                const web = Vue.reactive({
                    title: 'Vue.js',
                    url: 'https://cn.vuejs.org/'    
                })
                return {
                    message: message,
                    // web: web
                    web
                }
            }
        }).mount('#app')
    </script>

</body>
</html>

在开发时我们也可以使用模块化开发的方式大家看上面的代码示例，每一个vue方法前都有一个Vue.，比如Vue.createApp,然而我们可以直接

html 复制代码

import { createApp , reactive} from './vue.esm-browser.js'

即可不加Vue.来直接编写vue代码，也不用导入

html 复制代码

  <script src="vue.global.js"></script>

因此两种方式视自己喜好选择即可。

接下来我们将逐步认识各个方法

ref 与 reactive

ref是一个引用，修改使用.value, 而reactive则直接修改对应属性即可

ref也可以存储数组

绑定事件 v-on 简写 @

显示和隐藏 v-show

html 复制代码

<p v-show="show">...</p>
当show为false就隐藏

条件渲染 v-if

html 复制代码

<p v-if="show"> ... </p>
不适用于频繁切换显示状态

以下是更好的用法
<p v-if="show < 1000">用户较少</p>
<p v-else-if="show > 1000 && show < 10000 ">用户较多</p>
<p v-else>用户很多</p>

动态属性绑定v-bind

html 复制代码

<input type="text" :value="web.url">
这样文本框的值就是web.url的值
简写直接用:
这个绑定可以用在class, img, src等用法，实现其值的动态绑定

放在li中为每行元素设置title和key

:title="value.name"

:key="value.id"

v-for 遍历数组和对象

html 复制代码

<p>遍历数组或对象</p>
<ul>
         <li v-for="value in arr">{{ value }}</li>
</ul>
const arr = Vue.reactive([1,2,3,4,5])

双向数据绑定 v-model

单向数据绑定：当数据发生改变时，视图会自动更新，但是用户手动修改input的值，数据不会自动更新

双向数据绑定会自动更新数据的值

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.global.js"></script>
</head>

<body>
    <div id="app">
        <h3>文本框 {{ data.text }}</h3>
        <h3>单选框 {{ data.radio }}</h3>
        <h3>多选框 {{ data.checkbox }}</h3>
        <h3>下拉框 {{ data.select }}</h3>
        <h3>记住密码 {{ data.remember }}</h3>

        双向数据绑定 <input type="text" v-model="data.text">
        <br>
        <input type="radio" value="male" v-model="data.radio"> 男
        <input type="radio" value="female" v-model="data.radio"> 女
        <br>
        <input type="checkbox" value="apple" v-model="data.checkbox"> 苹果
        <input type="checkbox" value="banana" v-model="data.checkbox"> 香蕉
        <input type="checkbox" value="orange" v-model="data.checkbox"> 橘子
        <br>
        <select v-model="data.select">
            <option value="">请选择</option>
            <option value="apple">苹果</option>
            <option value="banana">香蕉</option>
            <option value="orange">橘子</option>
        </select>
        <br>
        <input type="checkbox" v-model="data.remember"> 记住密码
    </div>

    <script>
        Vue.createApp({
            // setup选项，用于设置响应式数据和方法等
            setup() {
                const data = Vue.reactive({
                    text: 'hello',
                    radio: '',
                    checkbox: [],
                    select: '',
                    remember: false
                })

                return {
                    data
                }
            }
        }).mount('#app')
    </script>

</body>

</html>

v-model修饰符

之前的双向数据绑定是实时渲染的(默认形式)，现在我们不需要实时渲染，只要按enter等才改

在失去焦点或enter后修改 v-model.lazy
输入框的值转为数字类型 v-model.number
去除首尾空格 v-model.trim

以上是常用的三种

渲染数据 v-text 和 v-html

v-html可以将数据解析为html格式，而v-text会解析为纯文本格式

计算属性computed

可以避免重复计算

侦听器watch

监听元素的变化

js 复制代码

setup(){
    const date = reactive({
        year:2023,
        month:10
    })
    watch(date.year, (newValue, oldValue))=>{
        console.log("new:", newValue, "old:", oldValue);
    }
}
// 注意，json中对象和数组是通过引用传递的，所以old也是修改后的值，如果是普通变量，则会通过赋值传递，会保留old值

自动监听watchEffect

将不需要手动设定监听的对象

接下来我们做一个图片轮播案例

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.global.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{number}}</h1>
        <h1>imageSrc: {{imageSrc}}</h1>
        <img :src="imageSrc" style="width: 300px;"> <br>
        <button @click="next">+</button>
        <button @click="prev">-</button>
        <ul>
            <li v-for="value in 6">
                <button  @click="jump(value)">{{value}}</a>
            </li>
        </ul>
    </div>

    <script>
        Vue.createApp({
            // setup选项，用于设置响应式数据和方法等
            setup() {

                const number = Vue.ref(1)
                // 这是个对象，可以直接在模板中使用
                const next = () => {
                    number.value++
                    if (number.value == 6) {
                        number.value = 1
                    }
                }
                const prev = () => {
                    number.value--
                    if (number.value == 1) {
                        number.value = 6
                    }
                }

                const web = Vue.reactive({
                    title: 'Vue.js',
                    url: 'https://cn.vuejs.org/'
                })

                const imageSrc = Vue.computed(() => {
                    return `image/${number.value}.jpg`
                })

                const jump = (value) => {
                    number.value = value
                }

                return {
                    number,
                    next,
                    // web: web
                    imageSrc,
                    prev,
                    jump,
                    web
                }
            }
        }).mount('#app')
    </script>
    </script>
</body>

</html>

end