一、概述
1.1、特点
渐进式框架:Vue 是渐进式的,意味着你可以根据项目的需求逐步采用 Vue 的不同功能。你可以从一个简单的组件开始,逐渐引入路由、状态管理等功能,而不必一开始就采用整个 Vue 生态系统。这种灵活性使得 Vue 可以方便地集成到现有的项目中。
响应式数据绑定:Vue 采用了响应式系统,当数据发生变化时,与之绑定的 DOM 元素会自动更新。通过简单的语法,开发者可以将数据绑定到 DOM 节点上,实现数据与视图的同步。
组件化开发:Vue 鼓励使用组件化的方式来构建应用。组件是 Vue 应用中可复用的、独立的代码块,每个组件都有自己的模板、逻辑和样式。组件化使得代码的可维护性和可复用性大大提高。例如,一个按钮组件可以在多个地方重复使用。
1.2、应用场景
单页面应用(SPA):由于 Vue Router 和 Vue 的轻量级特性,非常适合开发单页面应用。单页面应用在用户体验上更加流畅,避免了页面的刷新,常见的如企业官网、电商平台的前台页面等。
移动应用:结合 Vue Native 或 Weex 等技术,Vue 可以用于开发跨平台的移动应用,实现一次开发,多平台部署。
数据可视化:Vue 可以与各种数据可视化库(如 ECharts、D3.js 等)结合使用,用于构建交互式的数据可视化界面,如报表系统、监控系统等。
二、基本用法
2.1、差值表达式
基本语法及使用
Vue 差值表达式使用双大括号 {{ }}
包裹要显示的数据
{{message}}
引入我们所需要使用的工具
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<h1>差值表达式</h1>
<lable>欢迎语:</lable><lable>{{message}}</lable><br/>
<lable>姓名:</lable><lable>{{person.name}}</lable><br/>
<lable>年龄:</lable><lable>{{person.age}}</lable><br/>
<lable>性别:</lable>{{person.gender==1?'男':'女'}}<br/>
<lable>欢迎语大写:</lable>{{message.toUpperCase()}}<br/>
<lable>{{number1}} / {{number2}} = </lable>{{number1/number2}}<br/>
</div>
<script>
//获得vue工具库
const {createApp} = Vue
//创建vue数据结构
createApp({
data(){//处理跟数据相关的
return {//返回数据
message:'Hello Vue',//字符串
person:{//对象
name:'张三',
age:18,
gender:1
},
number1:10,//数字
number2:5
}
}
}).mount('#app')//将vue处理过程绑定到页面中div元素上
</script>
运行效果
2.2、强制数据绑定
在 Vue 里,有时候需要强制更新数据绑定,以确保视图能及时响应数据的变化。
在 Vue 中,v-bind
指令用于动态地绑定一个或多个 HTML 属性、组件的 props
、类名(class)属性、样式(style)属性、 布尔属性、。
<div id="app">
<h1>{{title}}</h1>
<p>
<lable>用户名称:</lable><input type="text" v-bind:value="username">
<label>{{username_info}}</label>
</p>
<p>
<lable>用户密码:</lable><input type="text" :value="password">
<label>{{password_info}}</label>
</p>
</div>
<script>
const {createApp} = Vue
createApp({
data(){
return {
title:'强制数据绑定,可以将数据绑定至元素的属性上',
username:'admin',
password:'123123',
password_info:'请输入密码',
username_info:'请输入用户名'
}
}
}).mount("#app")
</script>
运行结果
2.3、事件绑定
Vue 使用 v-on
指令来绑定事件,它有缩写形式
<div id="app">
<h1>{{title}}</h1>
<p>
<lable>用户名称:</lable><input type="text" v-bind:value="username">
<lable>{{username_info}}</lable>
</p>
<p>
<lable>用户密码:</lable><input type="text" :value="password">
</p>
<p>
<button type="button" v-on:click="fillAdmin">使用ADMIN用户</button>
<button type="button" @click="fillGuest">使用GUEST用户</button>
<button type="button" @click="fillXiaopaopao('xiaopaopao')">使用Xiaopaopao用户</button>
</p>
</div>
<script>
const {createApp} = Vue
createApp({
data(){//与数据相关的
return {
title:'强制数据绑定,可以将数据绑定至元素的属性上',
username:'wahaha',
password:'123123',
username_info:'请输入用户名'
}
},
methods:{//自定义函数
fillAdmin:function(){
this.username = 'admin'
this.password = '111111'
},
fillGuest(){
this.username = 'guest'
this.password = '000000'
},
fillXiaopaopao:function(name){
this.username = name
this.password = name
}
}
}).mount("#app")
</script>
当你点击按钮时两个输入框中的值随之发生改变
2.4、默认事件 形参
在 JavaScript 中,当处理 DOM 事件时,事件处理函数通常会接收一个事件对象作为参数。这个事件对象包含了与事件相关的各种信息,如鼠标位置、键盘按键状态等。有时候,我们可能希望为事件处理函数的参数提供默认值,以便在没有传递实际参数时也能正常工作。
<div id="app">
<button type="button" @click="getText">按钮</button>
<button type="button" @click="getText2($event,'Tom')">按钮2-向函数中传递数据</button>
<form action="http://www.163.com" method="post">
<button type="submit" @click="go1">跳转到网易-阻止跳转行为</button>
<button type="submit" @click.prevent="go2">跳转到网易-阻止跳转行为</button>
</form>
</div>
<script>
const {createApp} = Vue
createApp({
data(){
return{}
},
methods:{
getText:function(event){
//默认情况下会提供形参,用于接收元素的数据
alert(event.target.innerHTML)
},
getText2:function(e,name){
alert(name+"点击了"+e.target.innerHTML)
},
go1(e){
//阻止跳转行为
e.preventDefault()
},
go2(){}
}
}).mount("#app")
</script>
2.5、停止事件冒泡行为
<div id="app">
<div style="width: 300px;height: 300px; background-color: aqua;" @click="showAqua">
<div style="width: 150px;height: 150px;background-color: green;" @click.stop="showGreen"></div>
</div>
</div>
<script>
const {createApp} = Vue
createApp({
data(){
return{}
},
methods:{
showAqua(){
alert('aqua')
},
// showGreen(event){
// alert('greeen')
// event.stopPropagation()
// }
showGreen(event){
alert('greeen')
}
}
}).mount("#app")
</script>
当你点击绿色方块,提示框就会有“green”的提示,点击蓝色方块就会有“aqua”的提示
2.6、键盘监听
在 Vue 中,事件监听可以使用多种修饰符来改变事件的默认行为,使事件处理更加灵活和便捷。
事件捕获修饰符.capture,
阻止事件冒泡修饰符.stop,
阻止默认行为修饰符.prevent,
按键修饰符.enter
、.tab
、.delete
、.esc
、.space
、.up
、.down
、.left
、.right
等,鼠标按钮修饰符.left
、.right
、.middle,
一次性事件修饰符.once,
自调用修饰符.self
<div id="app">
<input type="text" value="" @keyup="test1">
<input type="text" value="" @keyup.enter="test2">
</div>
<script>
const {createApp} = Vue
createApp({
data(){
return{}
},
methods:{
test1(event){
if(event.keyCode == 13){
alert("你按了回车键")
}
},
test2(){
alert("你按了回车键")
}
}
}).mount("#app")
</script>
2.7、双向数据绑定
Vue.js 提供了便捷的双向数据绑定语法 v-model
。
在 Vue 实例中定义了 message
作为数据模型。
使用 v-model
指令将输入框和 message
进行双向绑定,输入框内容改变时 message
会自动更新,message
改变时输入框内容也会更新。
<div id="app">
<h1>双向数据绑定的演示</h1>
<p>
用户名称:<input type="text" v-model="user.username">
</p>
<p>
用户密码:<input type="password" v-model="user.password">
</p>
<p>
性别:
<input type="radio" name="gender" value="man" v-model="user.gender">男
<input type="radio" name="gender" value="woman" v-model="user.gender">女
</p>
<p>
爱好:
<input type="checkbox" name="hobbys" value="sport" v-model="user.hobbys">运动
<input type="checkbox" name="hobbys" value="read" v-model="user.hobbys">读书
</p>
<p>
学历:
<select v-model="user.education">
<option value="专科">专科</option>
<option value="本科">本科</option>
<option value="研究生">研究生</option>
</select>
</p>
<p>
用户描述:<textarea ></textarea>
</p>
<p>
<button type="button" @click="show">显示绑定数据</button>
</p>
</div>
<script>
const {createApp} = Vue
createApp({
data(){
return{
user:{
username:'张三',
password:'123123',
gender:'man',
hobbys:['sport','read'],
education:'本科'
}
}
},
methods:{
show(){
alert(JSON.stringify(this.user))
this.user.username = 'guest'
this.user.password = 'guest'
this.user.gender = 'woman'
}
}
}).mount("#app")
</script>
2.8、绑定非控件元素的文本与HTML
在 Vue.js 中,可以使用 {{}}
语法绑定文本,使用 v-html
指令绑定 HTML 内容。
<div id="app">
<p v-text="link1"></p>
<p v-html="link2"></p>
</div>
<script>
const {createApp} = Vue
createApp({
data(){
return{
link1:'<a href="http://www.163.com">网易</a>',
link2:'<a href="http://www.163.com">网易</a>'
}
},
methods:{
}
}).mount("#app")
</script>
2.9、class与style绑定
Vue.js 提供了便捷的语法来实现 class
和 style
绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>class与style绑定</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
.btn1 {
width: 100px;
height: 30px;
font-size: 16px;
color: #999;
}
.btn2 {
background-color: #efefef;
border-left: solid 1px #ccc;
border-top: solid 1px #ccc;
border-right: solid 2px #666;
border-bottom: solid 2px #666;
}
</style>
</head>
<body>
<div id="app">
<button type="button" :class="className1">按钮1</button>
<button type="button" :class="{btn1:btn1_boolean,btn2:btn2_boolean}">按钮2</button>
<button type="button" :class="[className1,className2]">按钮3</button>
<button type="button" :class="btn1_boolean?'btn1':'btn2'">按钮4</button>
<button type="button" :style="style1">按钮1</button>
<button type="button" :style="{width:btn_width,height:btn_height}">按钮2</button>
<button type="button" :style="[style1,style2]">按钮3</button>
<button type="button" :style="{backgroundColor:style2.backgroundColor}">按钮4</button>
</div>
<script>
const {createApp} = Vue
createApp({
data(){
return{
className1:'btn1',
btn1_boolean:true,
btn2_boolean:true,
className2:'btn2',
style1:{
width:'100px',
height:'30px',
fontSize:'16px',
color:'#999'
},
btn_width:'100px',
btn_height:'30px',
btn_fontSize:'16px',
btn_color:'#999',
style2:{
backgroundColor:'blue'
}
}
},
methods:{
}
}).mount("#app")
</script>
</body>
</html>