006 V 指令+事件+语法糖

不二如是

                               
登录/注册后可看大图

上一讲我们搞定了过滤器，本次来学习三个很使用的操作。

指令（Directives）是Vue模版中最常用的一项，它带有前缀“v-”，之前的课程中我们已经看到了。

比如，v-if、v-html、v-pre等，指令的职责就是：

当其表达式的值改变时，相应的将某些行为应用到DOM上。

下面我们拿最常用的v-if来举例，创建div：

1. <div id="myApp">
   
2. <p v-if="show">一起说：我爱鱼C</p>
   
3. </div>

复制代码

创建Vue实例：

1. <script>
   
2.     var app = new Vue({
   
3.         el:"#myApp",
   
4.         data:{
   
5.             show:true
   
6.         }
   
7.     })
   
8. </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：

1. <div id="myApp">
   
2.     <a v-bind:href="url">鱼C主页</a>
   
3. </div>

复制代码

创建Vue实例：

1. <script>
   
2.     var app = new Vue({
   
3.         el:"#myApp",
   
4.         data:{
   
5.             url:"https://ilovefishc.com/"
   
6.         }
   
7.     })
   
8. </script>

复制代码

通过v-bind，一个正常的链接就搞定了。

留一个作业，模仿上面的调用，写一个图片的链接，见课后作业3。

上面就是v-bind最基本的用法，更厉害的用法，见后续教程哈～

v-on，用来：

绑定事件监听器

这样我们就可以做一些交互了。

div：

1. <div id="myApp">
   
2.     <p v-if="show">我爱鱼C</p>
   
3.     <button v-on:click="trueLove">显式/隐藏</button>
   
4. </div>

复制代码

vue：

1. <script>
   
2.     var app = new Vue({
   
3.         el:"#myApp",
   
4.         data:{
   
5.             show:true
   
6.         },
   
7.         methods:{
   
8.             trueLove:function(){
   
9.                 if(this.show == false){
   
10.                     this.show = true;
    
11.                 }
    
12.                 else{
    
13.                     this.show = false;
    
14.                 }
    
15.             }
    
16.         }
    
17.     })
    
18. </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，直接写一个“:”：

1. :href="url"

复制代码

v-on，可以直接用“@”来缩写：

1. <button @click="trueLove">显式/隐藏</button>

复制代码

说白了就是老手必备的装x神奇！

---

课后作业


1、指令的职责是什么？

2、Vue的核心理念是什么？

3、补充？处代码，完成图片调用：

1. <div id="myApp">
   
2.     <img ?:src="imgUrl">
   
3. </div>
   
4. <script>
   
5.     var app = new Vue({
   
6.         el:"#myApp",
   
7.         data:{
   
8.            ？:"https://i0.hdslb.com/bfs/album/c72530a36fbe6c57c2e14b90942728812f76b27a.png@518w_1e_1c.webp"
   
9.         }
   
10.     })
    
11. </script>

复制代码

4、v-on监听原生的DOM事件其表达式的方法名写在哪里？



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

无符号整形

1.当其表达式的值改变时，相应的将某些行为应用到DOM上
2.数据驱动DOM
另外，Vue真是好用哈~

不二如是

无符号整形 发表于 2018-9-1 17:31
1.当其表达式的值改变时，相应的将某些行为应用到DOM上
2.数据驱动DOM
另外，Vue真是好用哈~

成熟框架，肯定好用哈，标准化的锤子一般场景都好用

差点夹不住屁

已学习,谢谢老板

Ruide

1.指令的职责是当其表达式发生变化时，将相应的变化应用到DOM中
2.Vue的核心理念是数据驱动DOM
3.空，imgUrl
4.v-on监听原生的DOM事件其表达式的方法名写在Vue实例的methods属性中

优时风

1

Leslie994730

谢谢

一笙彤

0

suweixuan1998

当其表达式的值改变时，相应的将某些行为应用到DOM上。
数据驱动DOM
v-bind   imgUrl
METHODS

HanYanShuang

学习

jack6666

1