006 V 指令+事件+语法糖
本帖最后由 不二如是 于 2018-9-2 12:01 编辑https://xxx.ilovefishc.com/forum/201808/24/170823gj1tj61c4apj6o1e.jpg
上一讲我们搞定了过滤器，本次来学习三个很使用的操作。
指令（Directives）是Vue模版中最常用的一项，它带有前缀“v-”，之前的课程中我们已经看到了。
比如，v-if、v-html、v-pre等，指令的职责就是：
当其表达式的值改变时，相应的将某些行为应用到DOM上。
下面我们拿最常用的v-if来举例，创建div：
<div id="myApp">
<p v-if="show">一起说：我爱鱼C</p>
</div>
创建Vue实例：
<script>
var app = new Vue({
el:"#myApp",
data:{
show:true
}
})
</script>
当我们将show对应的值从true改为false，上面那段文本就不见了。
当数据show的值为true，p元素会被插入，为false会被移除。
数据驱动DOM是Vue的核心理念。
所以不到万不得已不要主动操纵DOM，我们只需要维护好数据，Vue会帮你自动处理好DOM。
Vue内置了很多指令，可以快速帮助我们完成DOM操作。
比如，循环渲染，显式与隐藏等，后面我们会详细介绍到。
本次主要掌握两个：v-bind和v-on。
v-bind的基本用途是：
动态更新HTML元素上的属性，比如id，class等。
创建div：
<div id="myApp">
<a v-bind:href="url">鱼C主页</a>
</div>
创建Vue实例：
<script>
var app = new Vue({
el:"#myApp",
data:{
url:"https://ilovefishc.com/"
}
})
</script>
通过v-bind，一个正常的链接就搞定了。
留一个作业，模仿上面的调用，写一个图片的链接，见课后作业3。
上面就是v-bind最基本的用法，更厉害的用法，见后续教程哈～
v-on，用来：
绑定事件监听器
这样我们就可以做一些交互了。
div：
<div id="myApp">
<p v-if="show">我爱鱼C</p>
<button v-on:click="trueLove">显式/隐藏</button>
</div>
vue：
<script>
var app = new Vue({
el:"#myApp",
data:{
show:true
},
methods:{
trueLove:function(){
if(this.show == false){
this.show = true;
}
else{
this.show = false;
}
}
}
})
</script>
在button按钮上，使用了v-on:click给该元素绑定了一个点击事件。
在普通元素上，v-on可以监听原生的DOM事件，除了click外，还有dbclick、keyup、mousemove等。
表达式可以是一个方法名，这些方法以函数形式写在Vue实例的methods属性。
函数内的this指向的是当前Vue实例本身，因此可以直接使用this.xxx的形式来访问或修改数据。
this.show = false，把数据修改为false，点击就会移除文本，反之则显示。
语法糖
在JS：实用#JS语法糖系列中科普过JS的，其实Vue同理。
语法糖就是指：
在不影响功能的情况下，添加某种方法实现同样的效果。
Vue的v-bind和v-on指令都提供了语法糖，也可以说是缩写。
比如v-bind，可以省略v-bind，直接写一个“:”：
:href="url"
v-on，可以直接用“@”来缩写：
<button @click="trueLove">显式/隐藏</button>
说白了就是老手必备的装x神奇！
课后作业
1、指令的职责是什么？
2、Vue的核心理念是什么？
3、补充？处代码，完成图片调用：
<div id="myApp">
<img ?:src="imgUrl">
</div>
<script>
var app = new Vue({
el:"#myApp",
data:{
？:"https://i0.hdslb.com/bfs/album/c72530a36fbe6c57c2e14b90942728812f76b27a.png@518w_1e_1c.webp"
}
})
</script>
4、v-on监听原生的DOM事件其表达式的方法名写在哪里？
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif 1.当其表达式的值改变时，相应的将某些行为应用到DOM上
2.数据驱动DOM
另外，Vue真是好用哈~{:10_297:} 无符号整形 发表于 2018-9-1 17:31
1.当其表达式的值改变时，相应的将某些行为应用到DOM上
2.数据驱动DOM
另外，Vue真是好用哈~
成熟框架，肯定好用哈，标准化的锤子一般场景都好用 已学习,谢谢老板 1.指令的职责是当其表达式发生变化时，将相应的变化应用到DOM中
2.Vue的核心理念是数据驱动DOM
3.空，imgUrl
4.v-on监听原生的DOM事件其表达式的方法名写在Vue实例的methods属性中 1 谢谢 0 当其表达式的值改变时，相应的将某些行为应用到DOM上。
数据驱动DOM
v-bind imgUrl
METHODS 学习 1
页:
[1]