Vue 是一套渐进式 JavaScript 框架，用于动态构建用户界面。内容涵盖 Vue 核心概念、HelloWorld 示例、v-bind 与 v-model 指令、el 与 data 配置方式、Object.defineProperty 原理、事件处理及修饰符、计算属性等。通过代码示例演示了数据绑定、事件监听和计算属性的实现方法，帮助开发者快速掌握 Vue 基础语法与工作原理。
Vue 是一套用来动态构建用户界面的渐进式 JavaScript 框架。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>初识 Vue</title>
<!-- 通过网络引入 Vue -->
<script type="text/javascript" src="./js/vue-2.5.17.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<!-- 获取 Vue 实例中 data 中的数据 -->
<h1>Hello，{{name}}，{{address}}</h1>
</div>
<script type="text/javascript">
//创建 Vue 实例
new Vue({
el:'#root', //el 用于指定当前 Vue 实例与哪个容器绑定，此处绑定 id 值为 root 的容器
data:{ //data 中用于存储数据，数据供 el 所指定的容器去使用
name:'周杰伦',
address:'台北'
}
})
</script>
</body>
</html>
注意：
v-bind:属性名 = "JS 表达式"，表示将 JS 表达式的值赋值给此属性（单向绑定）
:属性名 = "JS 表达式"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<!-- 通过网络引入 Vue -->
<script type="text/javascript" src="./js/vue-2.5.17.js"></script>
</head>
<body>
<div id="root">
<!-- 插值表达式获取 data 中的属性值 -->
<h3>你好，{{name}}</h3>
<!-- 单向绑定 data 中的属性值赋值给 href 属性 -->
<a v-bind:href="school.url.toUpperCase()">点我去{{school.name}}学习</a>
<!-- 简写方式 -->
<a :href="school.url">点我去学习</a>
</div>
<script type="text/javascript">
//阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:'Jack',
school:{
name:'霍格沃茨',
url:'http://www.baidu.com',
}
}
})
</script>
</body>
</html>
注意：
v-model:value = "JS 表达式"，表示双向绑定，也就是 data 中的值被修改，页面的值也会被修改；页面的值被修改，对应的 data 属性值也会随之修改
v-model = "JS 表达式"，即双向绑定默认操作的属性就是 value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
<!-- 通过网络引入 Vue -->
<script type="text/javascript" src="./js/vue-2.5.17.js"></script>
</head>
<body>
<div id="root">
<!-- 普通写法 -->
双向数据绑定：<input type="text" v-model:value="name"><br/>
<!-- 简写 -->
双向数据绑定：<input type="text" v-model="name"><br/>
<div>data 属性的值：{{name}}</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
name:'Bruno Mars'
}
})
</script>
</html>
注意：
new Vue({
el: '#root', //绑定 id 为 root 的容器
data: { //定义数据
}
})
const vm = new Vue({
data: { //定义数据
}
})
vm.$mount('#root') //绑定 id 为 root 的容器
两种方式的区别：
new Vue({
el: '#root', //定义 data 对象，然后在其中定义属性
data: {
name:'Nicki Minaj'
}
})
new Vue({
el: '#root', //定义 data 函数，然后在返回值中定义属性
data(){
return{
//返回值是定义的数据
name:'Nicki Minaj'
}
}
})
注意：
先看一段 JS 代码，将一个变量的值赋值给一个属性：
let number = 18
let person = {
name:'张三',
sex:'男',
age:number //age 值为 18
}
如果通过这种方式给 age 赋值，只有第一次代码执行到赋值语句时才会将 age 的值修改为 18，如果以后 number 的值发生变化，则 age 不会跟着变化。
此方法用于给对象定义属性使用，参数 1 表示给哪个对象定义属性，参数 2 表示给对象中的哪个属性赋值，参数 3 写赋予值的配置对象（对属性值进行一些高级的操作），如下所示：
let person = {
name:'张三',
sex:'男',
}
Object.defineProperty(person,'age',{
value:18, //这个属性值为 18
enumerable:true, //控制属性是否可以枚举（被遍历），默认值是 false
writable:true, //控制属性是否可以被修改，默认值是 false
configurable:true //控制属性是否可以被删除，默认值是 false
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script type="text/javascript">
let number = 12
let person = {
name:'张三',
sex:'男',
}
Object.defineProperty(person,'age',{
//当有人读取 person 的 age 属性时，get 函数（getter）就会被调用，且返回值就是 age 此时的值
get(){
console.log('有人读取 age 属性，get 方法被调用')
return number //返回定义的 number 变量值
},
//当有人修改 person 的 age 属性时，set 函数（setter）就会被调用，且参数是要赋予 age 属性的值
set(value){
console.log('有人修改 age 属性，set 方法被调用，修改值为',value)
//age 的值取决于 number，修改 number 的值就可以修改 age 的值
//并没有直接修改 age 属性值
number = value
}
})
</script>
</html>
上述代码完成了一种功能：person 对象中有 age 这个属性，但是 age 属性的值并不是固定的，可以随时读取，随时修改。
v-on:事件名 = "xxx"，xxx 表示事件发生时要执行的函数，也可以写一些简单的逻辑语句
@事件名 = "xxx"
事件对象： 事件触发的时候会执行某个函数，该函数的形参（如果只有一个）会自动接收一个事件对象（即使调用函数时没有传递任何实参），这个事件对象中包含这个事件的各种信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
<!-- 通过网络引入 Vue -->
<script type="text/javascript" src="./js/vue-2.5.17.js"></script>
</head>
<body>
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<!-- 调用函数时没有传递任何参数 -->
<button @click="showInfo1">点我提示信息 1</button>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
name:'霍格沃茨',
},
//定义的方法要写在 methods 对象中
methods:{
showInfo1(event){
//event 表示事件对象，target 表示发生这个事件时的标签
//event 可以更改成其他的任何字母（都表示事件对象）
console.log(event.target) //innerText 表示标签中的文本
console.log(event.target.innerText)
},
}
})
</script>
</html>
如果想要事件发生时既要传递实参又要在函数中使用事件对象，那么就必须在调用函数时使用 $event 来表示传递的是事件对象，如下代码所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
<!-- 通过网络引入 Vue -->
<script type="text/javascript" src="./js/vue-2.5.17.js"></script>
</head>
<body>
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<!-- 调用函数时没有传递任何参数 -->
<button @click="showInfo1($event, 22)">点我提示信息 1</button>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
name:'霍格沃茨',
},
//定义的方法要写在 methods 对象中
methods: {
showInfo1(event, number) {
// event 表示事件对象，number 表示接收的实参
console.log(event.target)
console.log('参数数字是' + number)
},
}
})
</script>
</html>
methods 中定义的方法属于被 Vue 实例所管理的方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
<!-- 通过网络引入 Vue -->
<script type="text/javascript" src="./js/vue-2.5.17.js"></script>
</head>
<body>
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<!-- a 标签的默认行为是跳转到指定的页面，prevent 阻止跳转，只执行函数 -->
<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
name:'霍格沃茨',
},
//定义的方法要写在 methods 对象中
methods: {
showInfo1(event, number) {
// event 表示事件对象，number 表示接收的实参
console.log(event.target)
console.log('参数数字是' + number)
},
}
})
</script>
</html>
点击之后只弹出提示信息，没有跳转到百度页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
<!-- 通过网络引入 Vue -->
<script type="text/javascript" src="./js/vue-2.5.17.js"></script>
</head>
<body>
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<!-- div 标签是外层标签，拥有与内层标签一致的点击事件 -->
<div @click = "showInfo2">
<!-- 默认点击按钮之后，内部标签的事件触发，外部标签的事件也会随之触发（事件冒泡） -->
<!-- 使用 stop 阻止了事件冒泡，不会触发外层标签的同一事件 -->
<button @click.stop = "showInfo"> 按钮 </button>
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
name:'霍格沃茨'
},
methods:{
showInfo(){ alert('showInfo 同学你好！') },
showInfo2(){ alert('showInfo2 同学你好！') }
}
})
</script>
</html>
只弹出一次提示信息，如果不阻止事件冒泡，则会弹出两次提示信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
<!-- 通过网络引入 Vue -->
<script type="text/javascript" src="./js/vue-2.5.17.js"></script>
</head>
<body>
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<div>
<!-- 事件只会执行一次，之后再点击也不会触发事件了 -->
<button @click.once="showInfo"> 按钮 </button>
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
name:'霍格沃茨'
},
methods:{
showInfo(){ alert('showInfo 同学你好！') },
}
})
</script>
</html>
事件只会执行一次，之后再点击也不会触发事件了
@事件名。按键修饰符名称 = "要执行的方法"
用来和按键事件绑定在一起，修饰特定按键事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 通过网络引入 Vue -->
<script type="text/javascript" src="./js/vue-2.5.17.js"></script>
</head>
<body>
<div id="root">
<!-- 只有按下并抬起回车键后才会执行对应的方法 -->
<input type="text" placeholder="请按下对应的按键" @keyup.enter="showInfo"></input>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#root',
methods:{
// event 是事件对象
showInfo(event){
//获取按键名
console.log(event.key)
//获取按键编码
console.log(event.keyCode)
}
}
})
</script>
</html>
可以使用上述方式得到所有按键的按键名，故可以使用的按键修饰符不仅仅是默认的 9 个。
如果一个属性要通过已有的属性计算出来，那么可以使用计算属性。计算属性的读取和修改必须通过定义 getter/setter 来进行。
注：计算属性的底层借助了 Object.defineProperty 方法提供的 getter 和 setter 来完成读取和修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 通过网络引入 Vue -->
<script type="text/javascript" src="./js/vue-2.5.17.js"></script>
</head>
<body>
<div id="root">
姓：<input type="text" v-model="firstName">
<br/><br/>
名：<input type="text" v-model="lastName">
<br/><br/>
<!-- 调用两次计算属性 -->
全名：<span>{{fullName}}</span>
<br/><br/>
全名：<span>{{fullName}}</span>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
},
methods: {},
// 定义计算属性必须使用 computed 对象
computed:{
// 一个新的属性 fullName，需要通过已有的属性计算出来
fullName:{
// 读取计算属性的值
get(){
console.log('计算属性被调用了')
// this 表示 Vue 实例，读取 data 中的属性
// 计算属性 fullName 依赖已有的属性
return this.firstName + '-' + this.lastName
},
// 修改计算属性的值
set(value){
console.log('set',value)
const arr = value.split('-')
// 修改 data 中的属性（依赖的已有属性）
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
})
</script>
</html>
（此处省略图片展示）
当计算属性只读不改的时候可以使用简写形式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 通过网络引入 Vue -->
<script type="text/javascript" src="./js/vue-2.5.17.js"></script>
</head>
<body>
<div id="root">
姓：<input type="text" v-model="firstName">
<br/><br/>
名：<input type="text" v-model="lastName">
<br/><br/>
<!-- 调用两次计算属性 -->
全名：<span>{{fullName}}</span>
<br/><br/>
全名：<span>{{fullName}}</span>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
},
methods: {},
computed:{
//完整写法
/*
fullName:{
get(){
console.log('get 被调用了')
return this.firstName + '-' + this.lastName
}
}
*/
//简写
//fullName 直接当作 get 方法来用
fullName(){
console.log('get 被调用了')
return this.firstName + '-' + this.lastName
}
}
})
</script>
</html>
注意：
使用简写形式之后，fullName 仍然是一个属性而不是方法，所以调用的时候不能加小括号。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online