Vue3CDN导入式使用教程

置顶补充：Composition API 和 Options API 的区别

Vue 3 提供了两种编写组件逻辑的方式：Options API（选项式 API）和**
（组合式 API）**。它们的主要区别在于代码组织方式、逻辑复用能力和适用场景。

1. Options API（选项式 API）

Options API 是 Vue 2 和 Vue 3 都支持的写法，通过不同的选项（data、methods、computed、watch等）组织代码。

特点

代码按选项分类
适合简单组件，逻辑清晰
逻辑分散，复杂组件维护性降低

示例

export default {
  data() {
    return {
      count: 0,
      message: "Hello",
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  }
};

优点：

结构清晰
学习成本低

缺点：

逻辑分散
复用困难

2. Composition API（组合式 API）

Composition API 是 Vue 3 引入的新写法，基于函数式编程，允许更灵活地组织逻辑。

特点

逻辑按功能组织
更好的代码复用
需要手动管理响应式数据

示例

import { ref } from "vue";

export default {
  setup() {
    const count = ref(0);
    
    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};

优点：

逻辑集中
复用性强

缺点：

学习曲线高
需要手动管理响应式

3. 主要区别对比

特性	Options API	Composition API
代码组织	按选项分类	按功能组织
响应式	自动	手动
复用性	弱	强
适用场景	简单组件	复杂组件

4. 如何选择？

新手/简单组件 → Options API
大型项目 → Composition API
Vue 2 → Options API
Vue 3 → 推荐 Composition API

总结

Options API 适合简单场景，Composition API 适合复杂场景。Vue 3 推荐使用 Composition API，但 Options API 仍然可用。

补充：本地导入 vs CDN导入

CDN 优势

✅ 更快的首次加载（如果 CDN 缓存命中）
✅ 减少服务器带宽消耗（Vue 由 CDN 提供）
✅ 适合原型开发或小型项目

本地导入优势

✅ 更稳定的加载（不依赖第三方 CDN）
✅ 更好的缓存控制（长期缓存策略）
✅ 适合大型应用（代码优化、Tree Shaking）
✅ 支持现代构建工具（Vite/Webpack 优化）

一、CDN引入

国内用这个：

// 含有debug的大型开发模式
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.21/vue.global.js"></script>
//可以上线的小型
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.21/vue.global.prod.js"></script>
// 这个好用↑！！

添加备用源

<script src="https://unpkg.com/vue@3.4.21/dist/vue.global.prod.js"></script>
<script>
    // 备用源
    if(!window.Vue) {
        document.write('<script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>');
    }
</script>

二、基础用法

1 基本语法模板这种写法是`Options API`

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.21/vue.global.js"></script>
</head>
<body>
    <div id="Application">
        <h1>{{ count }}</h1>
        <button v-on:click="clickButton">点击</button>
    </div>
    
    <script>
        // 定义一个Vue组件，名字为App
        const App={
            // 定义组件中的数据
            data(){
                return {
                    // 这里存放变量
                    count:0
                }
            },
			// 计算属性  使用时:{{type}}
			// 计算属性与函数的不同点在于，其执行结果会被缓存。即下次访问计算属性时，只要其依赖的值没有变化，其内的逻辑代码就不会被重复执行
			// 计算属性 (computed) 的语法应该是 函数形式 或 对象形式（带 get 和 set）
			computed:{
				type(){
					return this.count >10 ? "大" : "小";
				}
			},
            // 定义组件中的函数
            methods:{
                // 实现单击按钮的方法
                clickButton(){
                    this.count = this.count + 1
                }
            }

        }
        // 将Vue组件绑定到页面上id为Application的元素上
        // 在DOM加载完成后初始化Vue
        document.addEventListener('DOMContentLoaded', () => {
            Vue.createApp(App).mount("#Application");
        });
    </script>
</body>
</html>

或

document.addEventListener("DOMContentLoaded",function(){
    const app = Vue.createApp({
        methods: {
            sendRequest(){
                const target_url = document.getElementById("sendRequest");
                console.log(target_url);
            }
        },
    })

    app.mount(".login");
})

1.1 计算属性的取值与赋值

计算属性 (computed) 的语法应该是函数形式或对象形式（带 get 和 set）
下面为对象形式的实例

<script>
const App = {
        data(){
            return {
                count:8
            }
        },
        computed:{
			type:{
                // 实现计算属性的get方法，用来取值
                get(){
                    return this.count >10 ? "大" : "小";
                },
                // 实现计算属性的set方法，用来设置值
                set(newValue){
                    if(newValue == "大"){
                        this.count=11
                    }else{
                        this.count=0
                    }
                }

				
			}
		},
        methods:{
            add(){
                this.count ++
            }
        }
    }
    let instance = Vue.createApp(App).mount("#Application");
</script>

2 常用方法

2.1 常用指令

v-on:click="handleClick(自定义事件)" 为元素绑定事件处理函数。简写：@
v-bind:id="id1(自定义变量)" 为属性插值，简写：:
v-if="show" 当show的值为true时渲染该区域，为false时不渲染
v-else-if="show"
v-else
v-show="show" 当show的值为true时展示该区域，为false时不展示(无论show的值为什么都会渲染)(渲染逻辑不同，需要频繁切换时推荐)
v-for="item in lists" 和Python的for循环差不多,每次都会生成一个新的v-for所属的标签
v-html="value" HTML代码插值({{value}}不能直接插入html代码)
v-model="inputText" 属性监听，可以监听某个属性的变化，如输入框用户输入

补充：`:class`

class="{ className1: condition1, className2: condition2, ... }"

键： CSS类名
值：布尔表达式，控制是否启用这个类

2.2 模板语法

{{ count }}:在元素里插值，count为自定义变量名
<template></template>:分组标签(浏览器不会渲染该标签本身)
列表方法
- push() 向列表尾部追加一个元素
  - pop() 删除列表尾部的一个元素
  - shift() 向列表头部插入一个元素
  - unshift() 删除列表头部的一个元素
  - splice() 对列表进行分割操作
  - sort() 对列表进行排序操作
  - reverse() 对列表进行逆序

2.3 调用定义的属性数据

也可以在外面动态地改变变量的值。

<script>
    const App = {
        data(){
            return {
                count:10
            }
        },
        methods:{
            add(){
                this.count ++
            }
        }
    }
    let instance = Vue.createApp(App).mount("#Application");
    console.log(instance.count);
    console.log(instance.$data.count);
    // 这两种方法访问的区域是相同的
    instance.$data.count++
    instance.add()
    console.log(instance.$data.count)
</script>

3 常用指令示例

3.1 `v-if="show"`/`v-show="show"`

<div id="Application">
    <h1 :id="id1">这里是模板的内容：{{count + 10}}次点击</h1>
    <h2 v-if="show">Show <p style="color: red;">SOS</p> </h2>
    <button type="button" @click="clicked">加1</button>
</div>

<script>
    const App = {
        data(){
            return {
                // 这里存放变量
                count:0,
                show:true,
            }
        },
        // 定义组件中的函数
        methods:{
            clicked(){
                this.count=this.count+1;
                if(this.show==true){
                    this.show=false;
                }else{
                    this.show=true;
                }
            }
        }
    }
    // 将组件绑定
    Vue.createApp(App).mount("#Application")
</script>

3.2 `v-for="item in lists"`

形式1：

<div id="Application">
	<div v-for="i in lists">
		{{i}}
	</div>
</div>

<script>
	const App = {
		data(){
			return {
				// 这里存放变量
				count:0,
				show:true,
				lists:[1,2,5,9,3]
			}
		},
		// 定义组件中的函数
		methods:{
			clicked(){
				this.count=this.count+1;
				if(this.show==true){
					this.show=false;
				}else{
					this.show=true;
				}
			}
		}
	}
	// 将组件绑定
	Vue.createApp(App).mount("#Application")
</script>

形式2：
在for循环中，也可以获取到当前遍历项的索引值(从0开始)

<div id="Application">
	<div v-for="(item,index) in lists">
		{{index}}
	</div>
</div>

形式3：
还可以对一个对象进行遍历(在JS中，列表本身也是一种特殊的对象)

<div id="Application">
	<div v-for="(value,key,index) in lists">
		{{key}}:{{value}}
	</div>
</div>

<script>
	const App = {
		data(){
			return {
				// 这里存放变量
				count:0,
				show:true,
				lists:{
					name:"changchang",
					age:18,
					num:"001"
				}
			}
		},
		// 定义组件中的函数
		methods:{
			clicked(){
				this.count=this.count+1;
				if(this.show==true){
					this.show=false;
				}else{
					this.show=true;
				}
			}
		}
	}
	// 将组件绑定
	Vue.createApp(App).mount("#Application")
</script>

注：value,key,index三个值的顺序固定不能调换

参数	含义	是否可选	示例值（根据你的代码）
`value`	当前属性值	必选	`"changchang"`, `18`, `"001"`
`key`	当前属性名	可选	`"name"`, `"age"`, `"num"`
`index`	当前遍历索引（从 0 开始）	可选	`0`, `1`, `2`

3.3 `v-html="value"`

<div id="Application">
	<div v-for="item in lists">
		{{item}}
	</div>
	<div><span v-html="value"></span> </div>
</div>

<script>
	const App = {
		data(){
			return {
				// 这里存放变量
				count:0,
				show:true,
				lists:[1,3,5,7,9],
				value:"<h1>HTML插值</h1>"
			}
		},
		// 定义组件中的函数
		methods:{
			clicked(){
				this.count=this.count+1;
				if(this.show==true){
					this.show=false;
				}else{
					this.show=true;
				}
			}
		}
	}
	// 将组件绑定
	Vue.createApp(App).mount("#Application")
</script>

3.4 `v-model="inputText"`

监听输入框，输入字符长度超过10弹出警报

<div id="Application">
	<input type="text" v-model="inputtext">
</div>

<script>
    const App = {
        data(){
            return {
                count:8,
                inputtext : "1"
            }
        },
        watch:{
			// 顺序不能变，第一个参数是更新后的值，第二个参数是旧值
            inputtext(newValue,oldValue){
                if(newValue.length > 10){
                    alert("文本太长了")
                }
                console.log(oldValue)
                console.log(newValue)
            }
        }
    }
    let instance = Vue.createApp(App).mount("#Application");
    
</script>

三、Vue事件大全

"冒泡"(Bubbling) 是指事件从触发元素开始，沿着 DOM 树向上传播的过程。

<div @click="outerClick">
    <button @click="innerClick">点击我</button>
</div>

点击按钮时，会先触发 innerClick，然后事件冒泡到外层 div 触发 outerClick。

1. Vue鼠标事件列表

Vue 事件名	对应原生事件	是否冒泡	说明
`@click`	`click`	✅	点击事件
`@dblclick`	`dblclick`	✅	双击事件
`@mousedown`	`mousedown`	✅	鼠标按键按下
`@mouseup`	`mouseup`	✅	鼠标按键释放
`@mouseover`	`mouseover`	✅	鼠标移入元素（会冒泡）
`@mouseout`	`mouseout`	✅	鼠标移出元素（会冒泡）
`@mouseenter`	`mouseenter`	❌	鼠标进入元素（不冒泡）
`@mouseleave`	`mouseleave`	❌	鼠标离开元素（不冒泡）
`@mousemove`	`mousemove`	✅	鼠标在元素内移动
`@contextmenu`	`contextmenu`	✅	右键菜单事件
`@wheel`	`wheel`	✅	鼠标滚轮滚动

四、常用修饰符

修饰符	说明
`.stop`	阻止事件冒泡
`.prevent`	阻止默认行为
`.self`	仅当事件是从元素本身触发时触发
`.once`	只触发一次
`.passive`	提升滚动性能

示例代码

<template>
  <div 
    @click="handleClick"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
    @mousemove.stop="handleMouseMove"
  >
    鼠标交互区域
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('点击事件');
    },
    handleMouseEnter() {
      console.log('鼠标进入');
    },
    handleMouseLeave() {
      console.log('鼠标离开');
    },
    handleMouseMove() {
      console.log('鼠标移动（已阻止冒泡）');
    }
  }
}
</script>

五、响应式变量(Composition API中)

为什么 inputText 在 data() 中不需要 ref？

ref 是 Composition API 的用法，而上述代码模板是 Options API。
在 data() 里直接返回普通变量，Vue 会自动让它们变成响应式的。不需要手动用 ref() 包裹。

使用示例

在 setup() 里，普通变量不是响应式的，必须用 ref() 或 reactive() 包裹。

import { ref } from "vue";
export default {
  setup() {
    const inputText = ref(""); // 需要 ref 包裹
    return { inputText };
  },
};

const inputText = ref('');
这行代码使用 ref 函数创建了一个响应式数据引用：

创建了一个响应式变量 inputText，初始值为空字符串 ''
在模板中使用时，Vue 会自动追踪这个变量的变化
当这个值变化时，Vue 会自动更新相关的 DOM

posted @ 2026-07-03 06:16 畅畅c 阅读(3) 评论(0) 收藏举报

刷新页面返回顶部

畅畅c