一、基础
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 事件。
