《Vue3 零基础速成手册》

m0_63785403

930人浏览 · 2025-12-20 17:02:06

m0_63785403 · 2025-12-20 17:02:06 发布

Vue3 快速入门

1.创建一个 vue 应用程序

Vue.js - 渐进式 JavaScript 框架

"渐进式"是指可以按需引入Vue.js的部分功能, 而不必全量引入整个框架

通过 CDN 使用 Vue

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

<div id="app">{{ message }}</div>

<script>

  Vue.createApp({
    setup() {
      const message = Vue.ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

使用全局构建版本

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

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

使用 ES 模块构建版本

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

2 ref和reactive

html

<div id="app">

    <h3>web.title: {{ web.title }}</h3>
    <h3>web.url: {{ web.url }}</h3>
    <h3>web.number: {{ number }}</h3>
</div>

js

<script type="module">
    import { createApp, ref, reactive } from './vue.esm-browser.js'
    
    createApp({
        setup() {
            const number = ref(10) //ref用于存储单个基本类型的数据, 如:数字、字符串等
            number.value = 20 //使用ref创建的响应式对象, 需要通过.value属性来访问和修改其值

            const web = reactive({ //用于存储复杂数据类型, 如:对象或数组等
                title: "邓瑞编程",
                url: "dengruicode.com"
            })
            web.url = "www.dengruicode.com" //使用reactive创建的响应式对象, 可以直接通过属性名来访问和修改值

            return {
                number,
                web
            }
        }
    }).mount("#app")
</script>

3 .绑定事件 v-on 简写@

html

<div id="app">
    <h3>{{ msg }}</h3>
    <h3>{{ web.url }}</h3>
    <h3>{{ web.user }}</h3>
    <h3>{{ sub(100, 20) }}</h3>

    <!-- v-on:click 表示在 button 元素上监听 click 事件 -->
    <button v-on:click="edit">修改</button> <br>

    <!-- @click 简写形式 -->
    <button @click="add(20, 30)">加法</button> <br>
</div>

js

<script type="module">
    import { createApp, reactive } from './vue.esm-browser.js'
    
    createApp({
        setup() {
            const web = reactive({
                title: "邓瑞编程",
                url: "dengruicode.com",
                user: 0
            })

            const edit = () => {
                web.url = "www.dengruicode.com"
                //msg = "邓瑞编程" //错误示例 不能直接改变msg的值,因为msg是一个普通变量, 不是响应式数据
            }

            const add = (a, b) => {
                web.user += a + b
            }

         

            return {
                msg: "success", //普通变量, 非响应式数据, 在模板中普通变量不会自动更新
                web, //响应式数据
                edit, //方法
                add,
              
            }
        }
    }).mount("#app")

</script>

4 显示和隐藏 v-show

html

<div id="app">
    <h3>{{ web.show }}</h3>
    <p v-show="web.show">邓瑞编程 dengruicode.com</p>

    <button @click="toggle">点击切换显示状态</button>
</div>

js

<script type="module">
    import { createApp, reactive } from './vue.esm-browser.js'
    
    createApp({
        setup() {
            const web = reactive({
                show: true
            })

            const toggle = () => {
                web.show = !web.show
            }

            return {
                web,
                toggle
            }
        }
    }).mount("#app")

</script>

5.条件渲染 v-if

html

<div id="app">
    <h3>{{ web.show }}</h3>
    <p v-show="web.show">邓瑞编程</p>
    <p v-if="web.show">dengruicode.com</p>

    <button @click="toggle">点击切换显示状态</button>

    <p v-if="web.user < 1000">新网站</p>
    <p v-else-if="web.user >= 1000 && web.user < 10000">优秀网站</p>
    <p v-else-if="web.user >= 10000 && web.user < 100000">资深网站</p>
    <p v-else>超级网站</p>
</div>

js

<script type="module">
    /*
        v-show 通过 css display属性 来控制元素的显示或隐藏
        v-if 用于对元素进行条件渲染. 当条件为 true 时, 渲染该元素, 为 false 时, 则不渲染

        v-show 适用于频繁切换元素的显示状态, 因为只改变 display 属性, 不需要重新渲染整个组件
        v-if 适用于较少改变的场景, 因为频繁从 dom 中删除或添加元素, 会导致性能下降
    */
    import { createApp, reactive } from './vue.esm-browser.js'

    createApp({
        setup() {
            const web = reactive({
                show: true,
                user: 500
            })

            const toggle = () => {
                web.show = !web.show
            }

            return {
                web,
                toggle
            }
        }
    }).mount("#app")
</script>

6.动态属性绑定 v-bind 简写：

html

<div id="app">
    <!-- :value -->
    <h3>value="dengruicode.com"</h3>
    <input type="text" value="dengruicode.com">

    <h3>v-bind:value="web.url"</h3>
    <input type="text" v-bind:value="web.url">

    <h3>简写 :value="web.url"</h3>
    <input type="text" :value="web.url">

    <!-- :src -->
    <h3>src="windows.jpg"</h3>
    <img src="windows.jpg">

    <h3>:src="web.img"</h3>
    <img :src="web.img">

    <!-- :class -->
    <h3>class="textColor"</h3>
    <b class="textColor">邓瑞编程</b>

    <h3>:class="{textColor:web.fontStatus}"</h3>
    <b :class="{textColor:web.fontStatus}">dengruicode.com</b>
</div>

js

<script type="module">
    import { createApp, reactive } from './vue.esm-browser.js'

    createApp({
        setup() {
            const web = reactive({
                url: "www.dengruicode.com",
                img: "windows.jpg",
                fontStatus: true
            })

            return {
                web
            }
        }
    }).mount("#app")
</script>

7.遍历数组或对象 v-for

html

<div id="app">
    <ul>
        <li v-for="(value, index) in data.number">
            index=> {{ index }} : value=> {{ value }}
        </li>
    </ul>

    <ul>
        <li v-for="value in data.user">
            value=> {{ value }}
        </li>
    </ul>

    <ul>
        <li v-for="(value, key) in data.user">
            key=> {{ key }} : value=> {{ value }}
        </li>
    </ul>

    <ul>
        <li v-for="(value, key, index) in data.user">
            index=> {{ index }} : key=> {{ key }} : value=> {{ value }}
        </li>
    </ul>



    <ul>
        <!-- :key="value.id" 为 每个 li 元素设置一个唯一的 key 值 -->
        <li v-for="(value, index) in data.teacher" :title="value.name" :key="value.id">
            index=> {{ index }} : value.id=>{{ value.id }} value.name=>{{ value.name }} value.web=>{{ value.web }}
        </li>
    </ul>
</div>

js

<script type="module">
    import { createApp, reactive } from './vue.esm-browser.js'

    createApp({
        setup() {
            const data = reactive({
                number: ["十", "十一", "十二"], //数组
                user: { //对象
                    name: "Luna",
                    gender: "女"
                },
                teacher: [ //包含两个对象的数组
                    { id: 100, name: "邓瑞", web: "dengruicode.com" },
                    { id: 101, name: "David", web: "www.dengruicode.com" }
                ]
            })

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

8.双向数据绑定 v-model

html

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

    <!-- 单向数据绑定 当数据发生改变时, 视图会自动更新. 但用户手动更改 input 的值, 数据不会自动更新 -->
    单向数据绑定 <input type="text" :value="data.text">

    <hr>
    <!-- 
        双向数据绑定 当数据发生改变时, 视图会自动更新. 当用户手动更改 input 的值, 数据也会自动更新
        对于 <input type="text">, v-model 绑定的是 input 元素的 value 属性
     -->
    双向数据绑定 <input type="text" v-model="data.text">

    <hr>
    <!-- 
        单选框
        对于 <input type="radio">, v-model 绑定的是 input 元素的选中状态
     -->
    <input type="radio" v-model="data.radio" value="1">写作
    <input type="radio" v-model="data.radio" value="2">画画

    <hr>
    <!-- 
        复选框
        对于 <input type="checkbox">, v-model 绑定的是 input 元素的选中状态
     -->
    <input type="checkbox" v-model="data.checkbox" value="a">写作
    <input type="checkbox" v-model="data.checkbox" value="b">画画
    <input type="checkbox" v-model="data.checkbox" value="c">运动

    <hr>
    <!-- 记住密码 -->
    <input type="checkbox" v-model="data.remember">记住密码

    <hr>
    <!-- 
        下拉框
        对于 <select>, v-model 绑定的是 select 元素的选中状态
     -->
    <select v-model="data.select">
        <option value="">请选择</option>
        <option value="A">写作</option>
        <option value="B">画画</option>
        <option value="C">运动</option>
    </select>
</div>

js

<script type="module">
    import { createApp, reactive } from './vue.esm-browser.js'

    createApp({
        setup() {
            const data = reactive({
                text: "dengruicode.com", //文本框
                radio: "", //单选框
                checkbox: [], //复选框
                remember: false, //单个复选框-记住密码
                select: "" //下拉框
            })

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

9.v-model修饰符

html

<div id="app">
    <h3>url: {{ web.url }}</h3>
    <h3>user: {{ web.user }}</h3>

    实时渲染 <input type="text" v-model="web.url"> <br>

    在失去焦点或按下回车键之后渲染 <input type="text" v-model.lazy="web.url"> <br>

    <!-- 输入 100人, web.user 的值仍为 100 -->
    输入框的值转换为数字类型 <input type="text" v-model.number="web.user"> <br>

    去除首尾空格 <input type="text" v-model.trim="web.url">
</div>

js

<script type="module">
    import { createApp, reactive } from './vue.esm-browser.js'

    createApp({
        setup() {
            const web = reactive({
                url: "dengruicode.com",
                user: 10
            })

            return {
                web
            }
        }
    }).mount("#app")
</script>

10.渲染数据 v-text 和 v-html

html

<div id="app">
    <h3>{{ web.title }}</h3>

    <!-- v-text 将数据解析为纯文本格式 -->
    <h3 v-text="web.title"></h3>

    <!-- v-html 将数据解析为 html 格式 -->
    <h3 v-html="web.url"></h3>
</div>

js

<script type="module">
    import { createApp, reactive } from './vue.esm-browser.js'

    createApp({
        setup() {
            const web = reactive({
                title: "邓瑞编程",
                url:"<i style='color:blue;'>www.dengruicode.com</i>"
            })

            return {
                web
            }
        }
    }).mount("#app")
</script>

11.计算属性 computed

html

<div id="app">
    <h3>add: {{ add() }}</h3>
    <h3>add: {{ add() }}</h3>

    <h3>sum: {{ sum }}</h3>
    <h3>sum: {{ sum }}</h3>

    x <input type="text" v-model.number="data.x"> <br>
    y <input type="text" v-model.number="data.y">
</div>

js

<script type="module">
    import { createApp, reactive, computed } from './vue.esm-browser.js'

    createApp({
        setup() {
            const data = reactive({
                x: 10,
                y: 20
            })

            //方法-无缓存
            let add = () => {
                console.log("add") //打印两次
                return data.x + data.y
            }

            //计算属性-有缓存 [计算属性根据其依赖的响应式数据变化而重新计算]
            const sum = computed(() => {
                console.log("sum") //打印一次
                return data.x + data.y
            })

            return {
                data,
                sum,
                add
            }
        }
    }).mount("#app")
</script>

12.侦听器 watch

html

<div id="app">
    爱好
    <select v-model="hobby">
        <option value="">请选择</option>
        <option value="1">写作</option>
        <option value="2">画画</option>
        <option value="3">运动</option>
    </select>

    <hr>

    年
    <select v-model="date.year">
        <option value="">请选择</option>
        <option value="2023">2023</option>
        <option value="2024">2024</option>
        <option value="2025">2025</option>
    </select>

    月
    <select v-model="date.month">
        <option value="">请选择</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>
</div>

js

<script type="module">
    import { createApp, ref, reactive, watch } from './vue.esm-browser.js'

    createApp({
        setup() {
            const hobby = ref("") //爱好
            const date = reactive({ //日期
                year: "2023",
                month: "10"
            })

            //监听 hobby
            watch(hobby, (newValue, oldValue) => {
                console.log("oldValue", oldValue, "newValue", newValue)

                if (newValue == "2") {
                    console.log("画画")
                }
            })

            //监听 date
            watch(date, (newValue, oldValue) => {
                /*
                    JS中对象和数组是通过引用传递的, 而不是通过值传递
                    当修改对象或数组的值时, 实际上修改的是对象或数组的引用, 而不是创建一个新的对象或数组
                    所以，如果修改了对象或数组的值，那么打印出来的结果则是修改后的值
                */
                console.log("oldValue", oldValue, "newValue", newValue)

                if (newValue.year == "2025") {
                    console.log("2025")
                }

                if (newValue.month == "11") {
                    console.log("11")
                }
            })

            //监听 date 中的某个属性 year
            watch(() => date.year, (newValue, oldValue) => {
                console.log("oldValue", oldValue, "newValue", newValue)

                if (date.year == "2024") {
                    console.log("2024")
                }
            })

            return {
                hobby,
                date
            }
        }
    }).mount("#app")
</script>

13.自动侦听器 watchEffect

html

<div id="app">
    爱好
    <select v-model="hobby">
        <option value="">请选择</option>
        <option value="1">写作</option>
        <option value="2">画画</option>
        <option value="3">运动</option>
    </select>

    <hr>

    年
    <select v-model="date.year">
        <option value="">请选择</option>
        <option value="2023">2023</option>
        <option value="2024">2024</option>
        <option value="2025">2025</option>
    </select>

    月
    <select v-model="date.month">
        <option value="">请选择</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>
</div>

js

<script type="module">
    /*
        watchEffect需要显式指定要监听的属性, 并且只有当监听的属性发生变化时才会执行
        若需要更精细地控制或需要获取到原值, 需要使用watch
    */
    import { createApp, ref, reactive, watchEffect } from './vue.esm-browser.js'

    createApp({
        setup() {
            const hobby = ref("") //爱好
            const date = reactive({ //日期
                year: "2023",
                month: "10"
            })

            //自动监听
            watchEffect(() => {
                console.log("------ 监听开始")

                if (hobby.value == "2") {
                    console.log("画画")
                }

                if (date.year == "2025") {
                    console.log("2025")
                }

                if (date.month == "11") {
                    console.log("11")
                }

                console.log("------ 监听结束")
            })

            return {
                hobby,
                date
            }
        }
    }).mount("#app")
</script>

14 引用Element Plus

浏览器直接引入

<head>
  <!-- Import style -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
  <!-- Import Vue 3 -->
  <script src="https://unpkg.com/vue@3"></script>
  <!-- Import component library -->
  <script src="https://unpkg.com/element-plus"></script>
</head>
 <body>
    <div id="app">
      <el-button>{{ message }}</el-button>
    </div>
    <script>
	 const { createApp, ref } = Vue
      const app = Vue.createApp({
           setup() {
            let message = ref("hello vue")
         
            //返回数据
            return {
                message,
              
            }
        }
      });
      app.use(ElementPlus);
      app.mount("#app");
    </script>
  </body>

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

AI Agent 对比和选型

AI Agent技术社区

2026企业微信AI Agent实测：7款技术方案对比

会话审计、敏感词管理、聊天质检、敏感行为识别、舆情、属性、词频及竞品分析覆盖服务风险；线索公海、客户、产品、商机、订单、回款、发票和业绩目标则连接销售全过程。快创助手负责快速建运营任务，策略生成把目标拆成方案，智能客服回答系统使用咨询，数据报表处理自然语言查数，AI洞察联合标签、订单和会话分析客户。我们设计了客户筛选、订单关联、销售交接、会话质检和异常恢复任务，配合技术访谈与行业公开资料复核。准备