> 本文最初发表于[博客园](),并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我,一起入门和进阶前端。 > 以下是正文。 ## Vue初体验 新建一个空的项目,引入vue.js文件。写如下代码: ```html Title
{{name}}
``` 显示效果: ![](http://img.smyhvae.com/20180313_0955.png) 如果我们在控制台输入`myVue.$data.name = 'haha'`,页面会**自动更新**name的值。意思是,当我们直接修改data数据,页面会自动更新,而不用去操作DOM。 下面来讲一下Vue的各种系统指令。 ## v-on:注册事件 ### v-on 的用法举例 ```html Title
{{name}}
``` 上方代码中,我们给button按钮绑定了点击事件。注意,这个button标签要写在div区域里(否则点击事件不生效),因为下方的View module接管的是div区域。 ### `v-on`的简写形式 例如: ```html ``` 可以简写成: ```html ``` ### v-on的常用事件 - v-on:click - v-on:keydown - v-on:keyup - v-on:mousedown - v-on:mouseover - v-on:submit - .... ### v-on的事件修饰符 `v-on` 提供了很多事件修饰符来辅助实现一些功能。事件修饰符有如下: - `.stop` 阻止冒泡。本质是调用 event.stopPropagation()。 - `.prevent` 阻止默认事件。本质是调用 event.preventDefault()。 - `.capture` 添加事件监听器时,使用 capture 模式。 - `.self` 只有当事件是从侦听器绑定的元素本身触发时,才触发回调。 - ``.{keyCode | keyAlias}` 只当事件是从侦听器绑定的元素本身触发时,才触发回调。 - ``.native` 监听组件根元素的原生事件。 写法示范: ```html
``` **举例**:(`.prevent`的用法举例) 现在有一个form表单: ```html
``` 我们知道,上面这个表单因为`type="submit"`,因此它是一个提交按钮,点击按钮后,这个表单就会被提交到form标签的action属性中指定的那个页面中去。这是表单的默认行为。 现在,我们可以用`.prevent`来阻止这种默认行为。修改为:点击按钮后,不提交到服务器,而是执行我们自己想要的事件(在submit方法中另行定义)。如下: ```html Document
``` 上方代码中,我们通过`.prevent`阻止了提交按钮的默认事件,点击按钮后,执行的是`mySubmit()`方法里的内容。这个方法名是可以随便起的,我们甚至可以起名为`submit`,反正默认的submit已经失效了。 ## 插值表达式 {{}} 数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值。例如: ```html Message: {{ msg }} ``` Mustache 标签将会被替代为对应数据对象上 msg 属性(msg定义在data对象中)的值。 无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会**自动更新**。 `{{}}`对JavaScript 表达式支持,例如: ```javascript {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ name == 'smyhvae' ? 'true' : 'false' }} {{ message.split('').reverse().join('') }} ``` 但是有个限制就是,每个绑定都**只能包含单个表达式**,如下表达式无效: ```html {{ var a = 1 }} {{ if (ok) { return message } }} ``` ## v-text v-text可以将一个变量的值渲染到指定的元素中。例如: ```html Title
``` 结果: ![](http://img.smyhvae.com/20180313_1645.png) ## v-html `v-text`是纯文本,而`v-html`会被解析成html元素。 注意:使用v-html渲染数据可能会非常危险,因为它很容易导致 XSS(跨站脚本) 攻击,使用的时候请谨慎,能够使用{{}}或者v-text实现的不要使用v-html。 ## v-cloak `v-cloak`:保持和元素实例的关联,直到结束编译后自动消失。 这个指令和CSS 规则一起用的时候,可以隐藏未编译的标签直到实例准备完毕。比如说,在网络很慢的情况下,通过`v-cloak`隐藏元素,当加载完毕后,再显示出来。 ```html Title
{{name}}
``` ## v-bind `v-bind`:给html元素或者组件**动态绑定**一个或多个特性,例如动态绑定style和class。 比如说: ```html
``` 上方代码中的`imageSrc`和`size`其实是Vue实例里面的变量。 上面两行代码可以简写成: ```html
``` **举例:** ```html Title
超链接
``` 效果: ![](http://img.smyhvae.com/20180313_1745.png) ## v-model:双向数据绑定 上面的一段中,我们通过v-bind,给``标签绑定了`data`对象里的`name`属性。当`data -> name`的值发生改变时,``标签里的内容会自动更新。 可我现在要做的是:我在``标签里修改内容,要求`data -> name`的值自动更新。从而实现双向数据绑定。该怎么做呢?这就可以利用`v-model`这个属性。 代码举例如下: ```html Document
``` 此时,便可实现我们刚刚要求的双向数据绑定的效果。 ## v-for:for循环 **作用**:根据数组中的元素遍历指定模板内容生成内容。 ### 引入 比如说,如果我想给一个`ul`中的多个`li`分别赋值1、2、3...。如果不用循环,就要挨个赋值: ```html
``` 效果: ![](http://img.smyhvae.com/20180329_1713.png) 为了实现上面的效果,如果我用`v-for`进行赋值,代码就简洁很多了: ```html
``` 接下来,我们详细讲一下`v-for`的用法。需要声明的是,Vue 1.0的写法和Vue 2.0的写法是不一样的。本文全部采用Vue 2.0的写法 ### 数组的遍历赋值 针对下面这样的数组: ```html ``` 将数组中的**值**赋给li: ```html
  • {{item}}
  • ``` 将数组中的**值和index**赋给li: ```html
  • 值:{{item}} --- 索引:{{index}}
  • ``` 效果如下: ![](http://img.smyhvae.com/20180329_1856.png) ### 对象的遍历赋值 针对下面这样的对象: ```html ``` 将上面的`obj1`对象的数据赋值给li,写法如下: ```html
    ``` 效果如下: ![](http://img.smyhvae.com/20180329_1850.png) ## v-if:设置元素的显示和隐藏 **作用**:根据表达式的值的真假条件,来决定是否渲染元素,如果为false则不渲染(达到隐藏元素的目的),如果为true则渲染。 在切换时,元素和它的数据绑定会被销毁并重建。 举例如下:(点击按钮时,切换和隐藏盒子) ```html Document
    我是盒子
    ``` 效果如下: ![](http://img.smyhvae.com/20180329_1920.gif) ## v-show:设置元素的显示和隐藏 **作用**:根据表达式的真假条件,来切换元素的 display 属性。如果为false,则在元素上添加 `display:none`属性;否则移除`display:none`属性。 举例如下:(点击按钮时,切换和隐藏盒子) 我们直接把上一段代码中的`v-if`改成`v-show`就可以了: ```html Document
    我是盒子
    ``` 效果如下: ![](http://img.smyhvae.com/20180329_2040.gif) **v-if和v-show的区别**: `v-if`和`v-show`都能够实现对一个元素的隐藏和显示操作。但是`v-if`是添加/删除DOM元素,而`v-show`是在这个元素上添加/移除`style="display:none"`属性。 ## 我的公众号 想学习**代码之外的软技能**?不妨关注我的微信公众号:**生命团队**(id:`vitateam`)。 扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外: ![](http://img.smyhvae.com/2016040102.jpg)