Vue.js

Vue.js教程

Vue.js的安装

1 独立版本

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 

  修改颜色

  

  

    v-bind:class 指令

  

    

表达式

Vue.js 都提供了完全的 JavaScript 表达式支持。

JavaScript 表达式

{{5+5}}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

菜鸟教程

 

指令

指令是带有 v- 前缀的特殊属性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：

实例

    

v-if="seen">现在你看到我了

    

    

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：

 v-on:click="doSomething">

在这里参数是监听的事件名。

修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

 v-on:submit.prevent="onSubmit">

用户输入

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

双向数据绑定

<div id="app"> <p>{{ message }}p> <input v-model="message"> div> <script> new Vue({ el: '#app', data: { message: 'Runoob!' } }) script>

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

以下实例在用户点击按钮后对字符串进行反转操作：

 字符串反转

    

{{ message }}

    反转字符串

 

 

过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

{{ message | capitalize }}

 v-bind:id="rawId | formatId">

过滤器函数接受表达式的值作为第一个参数。

以下实例对输入的字符串第一个字母转为大写：

实例

  {{ message | capitalize }}

过滤器可以串联：

{{ message | filterA | filterB }}

过滤器是 JavaScript 函数，因此可以接受参数：

{{ message | filterA('arg1', arg2) }}

这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

缩写

v-bind 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

 v-bind:href="url">

 :href="url">

v-on 缩写

 v-on:click="doSomething">

 @click="doSomething">

Vue.js条件与循环

条件判断

v-if

条件判断使用 v-if 指令：

v-if 指令

在元素 和 template 中使用 v-if 指令：

<div id="app"> <p v-if="seen">现在你看到我了p> <template v-if="ok"> <h1>菜鸟教程h1> <p>学的不仅是技术，更是梦想！p> <p>哈哈哈，打字辛苦啊！！！p> template> div> <script> new Vue({ el: '#app', data: { seen: true, ok: true } }) script>

这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

在字符串模板中，如 Handlebars ，我们得像这样写一个条件块：

{{#if ok}}

  

Yes

{{/if}}

v-else

可以用 v-else 指令给 v-if 添加一个 "else" 块：

v-else 指令

随机生成一个数字，判断是否大于0.5，然后输出对应信息：

<div id="app"> <div v-if="Math.random() > 0.5"> Sorry div> <div v-else> Not sorry div> div> <script> new Vue({ el: '#app' }) script>

v-else-if

v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：

v-else 指令

判断 type 变量的值：

<div id="app"> <div v-if="type === 'A'"> A div> <div v-else-if="type === 'B'"> B div> <div v-else-if="type === 'C'"> C div> <div v-else> Not A/B/C div> div> <script> new Vue({ el: '#app', data: { type: 'C' } }) script>

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

v-show

我们也可以使用 v-show 指令来根据条件展示元素：

v-show 指令

    

v-show="ok">Hello!

模板中使用 v-for：

v-for

  

    

  

v-for 迭代对象

v-for 可以通过一个对象的属性来迭代数据：
 id="app">

  

     v-for="value in object">

    {{ value }}

    

  

你也可以提供第二个的参数为键名：

v-for

  

    

•     {{ key }} : {{ value }}

      

  

第三个参数为索引：

v-for

  

    

• (value, key, index) in object">

       {{ index }}. {{ key }} : {{ value }}

      

  

v-for 迭代整数

v-for 也可以循环整数

v-for

 id="app">

    

             v-for="n in 10">

              {{ n }}

           

   

Vue.js计算属性

计算属性关键词: computed。

计算属性在处理一些复杂逻辑时是很有用的。

可以看下以下反转字符串的例子：

实例 1

  {{ message.split('').reverse().join('') }}

实例 1 中模板变的很复杂起来，也不容易看懂理解。

接下来我们看看使用了计算属性的实例：

实例 2

  

原始字符串: {{ message }}

  

计算后反转字符串: {{ reversedMessage }}

实例 2 中声明了一个计算属性 reversedMessage 。

提供的函数将用作属性 vm.reversedMessage 的 getter 。

vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。

computed vs methods

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

实例 3

methods: { reversedMessage2: function () { return this.message.split('').reverse().join('') } }

可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

computed setter

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

实例 4

var vm = new Vue({ el: '#app', data: { name: 'Google', url: 'http://www.google.com' }, computed: { site: { // getter get: function () { return this.name + ' ' + this.url }, // setter set: function (newValue) { var names = newValue.split(' ') this.name = names[0] this.url = names[names.length - 1] } } } }) // 调用 setter， vm.name 和 vm.url 也会被对应更新 vm.site = '菜鸟教程 http://www.runoob.com'; document.write('name: ' + vm.name); document.write('
'); document.write('url: ' + vm.url);
尝下 »从实例运行结果看在运行 vm.site = '菜鸟教程 http://www.runoob.com'; 时，setter 会被调用， vm.name 和 vm.url 也会被对应更新。