Vue2基础
一、基础
1.el:挂载点
el
选项用于指定 Vue 实例挂载的 DOM 元素。这一元素被称为挂载点。通过 el
选项,Vue.js 知道在页面的哪个部分渲染 Vue 实例,并接管页面的内容。
1.1挂载方式
- el选项挂载
<div id="app">
{{message}}
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
message:"hello vue!"
}
});
</script>
- 手动挂载
<div id="app">
{{message}}
</div>
<script>
let vue = new Vue({
// el:"#app",
data:{
message:"hello vue!"
}
});
vue.$mount('#app')
</script>
1.2注意事项
- 单页应用的典型模式:在 Vue 单页应用中,通常在
index.html
文件中有一个空的div
元素作为挂载点,Vue 实例接管此元素,并将整个应用渲染到其中。 el
选项接受一个 CSS 选择器字符串或一个 HTML 元素对象:你可以直接传递一个选择器字符串(如'#app'
),也可以传递一个 DOM 元素对象(如document.getElementById('app')
)。- 确保挂载点在页面中存在:在 Vue 实例被创建时,指定的
el
挂载点必须已经存在于页面中,否则 Vue 无法挂载。
2.data数据对象
在 Vue 实例或组件中,data
通常是一个返回对象的函数,该对象包含了所有需要在模板中使用的数据。
2.1**data
中的数据类型**
-
data
对象可以包含各种数据类型,包括:- 对象:例如
user: { name: 'John', age: 30 }
- 字符串:例如
message: 'Hello World'
- 数字:例如
count: 42
- 布尔值:例如
isVisible: true
- 数组:例如
items: [1, 2, 3]
- 对象:例如
-
示例:
<div id="app">
{{message}}
<h2>{{school.name}}{{school.mobile}}</h2>
<ul v-for="capu in capus">
<li>{{capu}}</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
message:"你好",
school:{
name:"老王技术学院",
mobile:"128913891318"
},
capus:["北极","南极","上海","广州","福建"]
}
})
二、本地引用
1.v-text
v-text
是一个用于更新元素的文本内容的指令。它将绑定的数据渲染为纯文本,替换元素内部的任何现有内容。
1.1基本用法
v-text
指令的作用类似于使用 Mustache 语法(双大括号 {{ }}
),不过 v-text
直接操作的是元素的 textContent
,不会保留元素内的任何子内容。它可以防止 XSS 攻击,因为它不会将 HTML 解析为标签,只会作为纯文本输出。
- 示例:
<div id="app">
<h2 v-text="message"></h2>
<h2 v-text="info"></h2>
<h2>{{message+"?"}}</h2>
</div>
<script>
new Vue({
el:"#app",
data:{
message:"比老外",
info:"vue亲啊后端"
}
})
</script>
1.2与 {{ }}
的区别
-
v-text
和 Mustache 语法(
{{ message }}
)的主要区别在于:
v-text
会直接替换元素的整个文本内容,v-text
会直接覆盖<p>
标签内部的所有内容,只显示message
的值。- Mustache 语法 会在元素内部插入文本内容,同时保留原有的 HTML 结构。
<p>{{ message }}</p>//可以进行字符串拼接
//这个语法会将 message 的值插入到 <p> 标签中,但它保留了 <p> 标签内的任何其他内容。
1.3防止 XSS 攻击
由于 v-text
渲染的是纯文本,而不是 HTML 内容,它可以有效防止 XSS(跨站脚本攻击)。即使绑定的数据包含 HTML 标签或脚本,v-text
也会将它们作为普通文本显示,而不会执行任何脚本。
2.v-html
v-html
直接将数据绑定为 HTML 内容,插入到指定的元素中。它适用于需要动态插入 HTML 的场景,比如从服务器获取的富文本内容。
2.1.与 v-text
的区别
v-text
只会将绑定的数据渲染为纯文本,不解析其中的 HTML 标签。v-html
将绑定的内容作为 HTML 解析,并插入到 DOM 中。它允许你动态地插入和渲染 HTML 代码片段。
<div id="app">
<p v-html="content"></p>
<p v-text="content"></p>
</div>
<script>
new Vue({
el:"#app",
data:{
content:"<a href='http://www.raokang.top/'>辞南的博客</a>"
}
})
</script>
2.2插入组件的注意事项
如果你希望在 v-html
插入的内容中使用 Vue 组件,这样做是不可行的,因为 v-html
渲染的内容不会被 Vue 解析为模板,也不会激活 Vue 组件。要在动态内容中使用 Vue 组件,需要手动构建模板,或者使用插槽、动态组件等方式。
3.v-on
3.1基本语法
v-on
的基本语法是 v-on:事件名="方法名"
。它用于绑定事件到 DOM 元素,并在事件触发时调用 Vue 实例中的一个方法。
<div id="app">
<button v-on:click="greet">Click me</button>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
message: 'Hello, Vue!'
};
},
methods: {
greet() {
alert(this.message);
}
}
});
3.2简写语法
Vue.js 提供了 v-on
的简写方式,可以将 v-on:事件名
简写为 @事件名
。这是一个更简洁的语法,在大多数情况下都使用简写。
<div id="app">
<button @click="greet">Click me</button>
<button @click="changeFood">{{food}}</button>
<button @dblclick="greet">dblclick me</button>//双击事件
</div>
<script>
new Vue({
el: '#app',
data() {
return {
message: 'Hello, Vue!',
food:"西兰花"
};
},
methods: {
greet() {
alert(this.message);
},
changeFood(){
this.food="西红柿"
}
}
});
3.3内联表达式
除了绑定方法,你还可以在 v-on
中使用内联表达式。这些表达式可以是简单的 JavaScript 表达式。
<div id="app">
<button @click="count++">Clicked {{ count }} times</button>
</div>
new Vue({ el: '#app',
data() {
return {
count: 0
};
}
});
3.4事件修饰符
- Vue.js 提供了一些事件修饰符,可以修改事件处理器的行为。这些修饰符可以在事件名后面添加。
.once
:只触发一次事件。.stop
:阻止事件的冒泡行为。.prevent
:阻止事件的默认行为。.capture
:使用事件的捕获模式。.self
:只在事件由自身元素触发时才触发处理函数。
4.v-show
4.1基本用法
v-show
的语法是 v-show="expression"
,其中 expression
是一个返回布尔值的表达式。当表达式的结果为 true
时,元素将显示;当结果为 false
时,元素将隐藏。
<div id="app">
<input type="button" value="切换显示状态" @click="changeShow">
<img src="/images/preview.jpg" alt="" v-show="isShow">
</div>
<script>
new Vue({
el:"#app",
data:{
isShow:false
},
methods:{
changeShow(){
this.isShow=!this.isShow;
}
}
})
</script>
5.v-if
v-if
是 Vue.js 中用于条件渲染的指令。它根据表达式的值决定是否在 DOM 中渲染元素。与 v-show
不同,v-if
会完全移除或添加元素到 DOM 中,而不仅仅是改变元素的可见性。
<div id="app">
<input type="button" value="切换显示状态" @click="changeShow">
<img src="/images/preview.jpg" alt="" v-show="isShow">
<img src="/images/preview.jpg" alt="" v-if="isShow">
</div>
<script>
new Vue({
el:"#app",
data:{
isShow:false,
age:17
},
methods:{
changeShow(){
this.isShow=!this.isShow;
this.age++;
}
}
})
</script>
5.1**v-else
和 v-else-if
**
- **
v-else
:**用于在v-if
表达式为false
时渲染一个替代块。v-else
必须紧跟在v-if
或v-else-if
元素之后。 - **
v-else-if
:**用于在前一个v-if
或v-else-if
表达式为false
时,提供一个新的条件。
5.2性能对比:v-if
vs v-show
- **
v-show
:**当条件为false
时,元素仍然存在于 DOM 中,只是不可见(display: none;
)。适用于需要频繁切换可见性的场景。 - **
v-if
:**当条件为false
时,元素不会渲染到 DOM 中。如果条件在运行时切换,Vue 将销毁或重建元素。适用于不经常切换条件的场景,因为每次切换都会触发元素的销毁或重建。
6.v-bind
v-bind
是 Vue.js 中的一个指令,用于动态地绑定元素的属性、Class 或 Style。通过 v-bind
,你可以将数据或表达式的值绑定到元素的属性上,实现动态更新。
6.1简写语法
Vue.js 提供了 v-bind
的简写方式,可以将 v-bind:attribute
简写为 :attribute
。这种简写方式使代码更加简洁。
<style>
.active{
border: 1px solid red;
}
</style>
<body>
<div id="app">
<img :src="imgSrc" alt="" :title="imgTitle" :class="isActive?'active':''" @click="changeActive">
<br>
</div>
<script>
new Vue({
el:"#app",
data:{
imgSrc:"/images/DM_20240807212841_001.jpg",
imgTitle:"二次元",
isActive:false
},
methods:{
changeActive(){
this.isActive=!this.isActive
}
}
})
</script>
7.v-for
v-for
是 Vue.js 中的指令,用于循环渲染列表。它能够遍历数组、对象,甚至是指定的数字范围,并为每一项生成一个对应的 DOM 元素。
<div id="app">
<ul>
<li v-for="(item,index) in items" :title="item.name">
{{index+1+":"+item.name}}
</li>
</ul>
<input type="button" value="添加" @click="add">
<input type="button" value="移除" @click="remove">
</div>
<script>
new Vue({
el:"#app",
data:{
items:[
{name:"北京"},
{name:"南极"},
{name:"上海"},
{name:"深圳"},
]
},
methods:{
add(){
this.items.push({name:"瑞典"});
},
remove(){
this.items.pop();
}
}
})
</script>
8.v-model
v-model
是 Vue.js 中的一个双向数据绑定指令,它允许在表单控件(如输入框、复选框、单选按钮等)和数据模型之间建立双向绑定。当用户在表单控件中输入或修改数据时,数据模型会自动更新,反之亦然。
<div id="app">
<label>
<input type="radio" v-model="picked" value="One"> One
</label>
<label>
<input type="radio" v-model="picked" value="Two"> Two
</label>
<p>Picked: {{ picked }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
picked: ''
}
});
</script>
三、网络应用
1.axios基本用法
axios
是一个基于 Promise 的 HTTP 客户端,用于在浏览器和 Node.js 中发送异步请求。它可以处理 GET、POST、PUT、DELETE 等 HTTP 请求,并支持请求和响应的拦截、取消请求、自动转换 JSON 数据等功能。
<div id="app">
<input type="button" value="get请求" @click="get">
<input type="button" value="post请求" @click="post">
</div>
<script>
new Vue({
el:"#app",
methods:{
get(){
axios.get("https://autumnfish.cn/api/joke/list?num=6")
.then(function (response){
console.log(response);
},function (err){
console.log(err)
})
},
post(){
axios.post("https://autumnfish.cn/api/user/reg").then(function (response){
console.log(response);
},function (err){
console.log(err)
})
}
}
})
</script>
四、补充
1.常用的事件修饰符
1.1. .stop
- 作用: 阻止事件冒泡到父元素。
<div id="app">
<div id="div1" @click="method1">
<button @click.stop="method2">
确定
</button>
</div>
</div>
<script>
Vue.createApp({
data(){
},
methods:{
method1(){
alert("div被点击了")
},
method2(){
alert("buttn被点击了")
},
}
}).mount("#app")
2.2..prevent
- 作用: 阻止事件的默认行为。
<div id="app">
<div id="div1" @click="method1">
<a @click.prevent.stop="method3" href="http://baidu.com">百度</a>
</div>
</div>
<script>
Vue.createApp({
data(){
},
methods:{
method3(){
alert("超链接被点击了")
}
}
}).mount("#app")
</script>
2.3..capture
- 作用: 以捕获模式来监听事件。事件会在捕获阶段触发,而不是在冒泡阶段。
<div id="app">
<div @click.capture="handleCapture" style="width: 200px;height: 100px;background-color: red">
<button @click="handleClick">Click Me</button>
</div>
</div>
<script>
Vue.createApp({
methods: {
handleCapture() {
alert('Capture phase: Parent div clicked');
},
handleClick() {
alert('Bubble phase: Button clicked');
}
}
}).mount("#app")
</script>
2.4..self
- 作用: 只有当事件的目标是事件绑定的元素本身时才触发事件,子元素的点击不会触发。
<div id="app">
<div @click.self="handleDivClick" style="width: 200px;height: 100px;background-color: red">
<button @click="handleButtonClick">Click Me</button>
</div>
</div>
<script>
Vue.createApp({
methods: {
handleDivClick() {
alert('Div clicked');
},
handleButtonClick() {
alert('Button clicked');
}
}
}).mount("#app")
</script>
2.5..once
- 作用: 事件只会触发一次,然后会自动移除事件监听器。
<div id="app">
<button @click.once.prevent="handleClick">Click Me</button>
</div>
<script>
Vue.createApp({
methods: {
handleClick() {
alert('Button clicked once and default action prevented.');
}
}
}).mount("#app")
</script>
2.6..passive
- 作用: 将事件监听器标记为被动,意味着它不会调用
event.preventDefault()
。这对于提高滚动性能特别有用。
2.7..native
(Vue 2.x)
注意:native
修饰符在 Vue 3.x 中已经被废弃。对于 Vue 3.x,事件绑定直接在组件上监听原生事件即可。
- 作用: 用于在组件上监听原生 DOM 事件。