Vue 会根据不同的【指令】，针对标签实现不同的【功能】
指令：带有 v- 前缀 的 特殊 标签属性
1.v-html:
作用：设置元素的 innerHTML
语法：v-html = "表达式 "
<div v-html="msg"></div>
如果使用了v-html则标签内不能再写内容了，会被v-html的结果覆盖掉
如果msg没有h1的标签，则在上边写 <h1>{{msg}}</h1>
2.Vue 指令 v-show vs v-if
v-show
作用： 控制元素显示隐藏
语法： v-show = "表达式" 表达式值 true 显示， false 隐藏
原理： 切换 display:none 控制显示隐藏
场景： 频繁切换显示隐藏的场景
v-if
作用： 控制元素显示隐藏（条件渲染）
语法： v-if = "表达式" 表达式值 true 显示， false 隐藏
原理： 通过创建/删除DOM元素来实现盒子的显示隐藏
场景： 要么显示，要么隐藏，不频繁切换的场景
3.Vue 指令 v-else v-else-if
作用： 辅助 v-if 进行判断渲染
语法： v-else v-else-if = "表达式"
注意： v-else 必须紧贴着 v-if 来编写, 中间不能有任何标签间隔 (注释除外)
4.Vue 指令 v-on
语法：
① v-on:事件名 = "内联语句"
② v-on:事件名 = "methods中的函数名"
简写: v-on: => @
v-on:事件名="内联语句" 适合极其简单的场景, 一行代码就搞定
v-on:事件名="事件处理函数" 适合复杂的逻辑处理
注意：methods函数内的 this 指向 Vue 实例
this可以访问data里的数据
怎么修改 count 呢?
console.log(count)
因为 count 被挂载到了 app 对象上, 所以可以使用 app.count 访问
但是不推荐, 因为如果 app 变量修改了, 所有用到数据的地方都得一起修改, 不方便!
app.count--
推荐使用 this
为什么可以用 this ?
因为 methods 中的所有函数也会被挂载到 app 实例对象上!
Vue 指令-v-on-内联语句
<body>
<div id="app">
<button @click="fn">-</button>
<span>{{ count }}</span>
<!--
v-on 指令: 绑定事件
语法:
v-on:事件名="内联代码"
v-on:事件名="事件处理函数"
v-on: 可以简写成 @
函数定义在 methods 中
-->
<button v-on:click="count++">+</button>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script>
<script>
// 目标: 点击 - 让数字减一, 点击 + 让数字加一
const app = new Vue({
el: '#app',
data: {
count: 5
},
methods: {
fn() {
// console.log('我被点了')
this.count--
}
}
})
</script>
Vue 指令-v-on-配置methods函数
<div id="app">
<button @click="change">切换显示隐藏</button>
<!-- 在模板(HTML)中访问数据不需要加 this, 以后也不要加 -->
<!-- <button @click="isShow = !isShow">切换显示隐藏</button> -->
<h1 v-show="isShow">黑马程序员</h1>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script>
<script>
/**
* 目标:
* 点击切换 h1 标签显示隐藏
*/
const app = new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
change() {
this.isShow = !this.isShow
}
}
})
</script>
Vue 指令-v-on-参数传递
事件传参:
在 Vue 中, 只有绑定事件时, 事件处理函数加 () 不代表立即调用函数!!
依然是在绑定事件处理函数, 该函数还是在触发事件时执行
<div id="app">
<div class="box">
<h3>小黑自动售货机</h3>
<button @click="buy(5)">可乐5元</button>
<button @click="buy(10)">咖啡10元</button>
</div>
<p>银行卡余额：{{ money }}元</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script>
<script>
/**
* 目标:
* 点击不同按钮, 银行卡余额减少对应的金额
*/
const app = new Vue({
el: '#app',
data: {
money: 100
},
methods: {
buy(n) {
this.money -= n
}
}
})
5.Vue 指令 v-bind
- 作用： 动态的设置html的标签属性→ src url title ...
没有v-bind只能写固定链接，加了v-bind就可以传入一个变量
2. 语法： v-bind:属性名="表达式"
3. 注意： 简写形式 :属性名="表达
支持简写:
:属性名="表达式"
-->
<!-- <img :src="imgUrl" v-bind:title="msg" alt=""> -->
<img :src="imgUrl" :title="msg" alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
/**
* 目标:
* 使用 v-bind 指令动态绑定标签属性
*/
const app = new Vue({
el: '#app',
data: {
imgUrl: './imgs/10-02.png',
msg: 'hello 波仔'
}
})
6.Vue 指令 v-for
作用： 基于数据循环， 多次渲染整个元素→ 数组、对象、数字...
遍历数组语法：
v-for = "(item, index) in 数组"
item 每一项， index 下标
省略 index: v-for = "item in 数组"
7.v-for 中的 key的作用
语法： key="唯一值"
作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。
按照以往，我们没有用vue框架之前的做法：以下是4个li，如果删除其中一个，删除方法是;页面的所有li全部删除，然后再重新把未删除的数据重新渲染到页面上，消耗性能
不加 key的情况
vue自带的属性会重新复用li；只删除一个li，不会重新创建新的li
Vue 不会轻易删除 DOM 并重新创建 DOM, 因为这样很消耗性能, 它会想尽一切办法少的去销毁 DOM
v-for 的默认复用策略: 就地更新, 当前删除一个元素后, 还剩 3 个 li, 那么 Vue 就会把最后一个 li 删除, 里面的内容平移, 以复用所有现存的 li
v-for 的默认行为会尝试 原地修改元素 （就地复用），但是会删除
加了key的情况：如图下所示，相当于根据唯一标识，把li删除了
key 的设置要求:
1. 一定要在当前 v-for 中唯一
Duplicate keys detected: '1'. This may cause an update error.
报错信息的意思：重复的key出现了，说明你的key不是唯一的
2. 必须是 string 或 number
Avoid using non-primitive value as key, use string/number value instead.
报错信息的意思：用的不是一个number或string类型
Key的作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用
注意点：
1. key 的值只能是 字符串 或 数字类型
2. key 的值必须具有 唯一性
3. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）
8.v-model
作用: 给表单元素使用, 双向数据绑定，可以快速获取或设置 表单元素内容
① 数据变化 → 视图自动更新
② 视图变化 → 数据自动更新
语法: v-model = '变量'
1082
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
