Vue.js入门

使用vue.js原文介绍：Vue.js是一个构建数据驱动的web界面库。Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件。vue.js上手非常简单，先看看几个例子：

回到目录

 

    例一：Helloworld

回到目录

 

    html代码：

回到目录

 

    {{ message }}

回到目录

 

    js代码：

回到目录

 

new Vue({
    el: '#app',
    data: {
    message: 'Hello Vue.js!'
    }
})

回到目录

 

    例二：双向绑定

回到目录

 

    说明：html中以v-开头的标记都是vue.js提供的标记。v-model属性表示数据模型。

回到目录

 

    html代码：

回到目录

 

    
{{ message }}
    

回到目录

 

    js代码：

回到目录

 

new Vue({
    el: '#app',
    data: {
    message: 'Hello Vue.js!'
    }
})

回到目录

 

    例三：渲染列表

回到目录

 

    说明：v-for表示遍历集合数据，下面的代码遍历集合todos并输出每项。

回到目录

 

    html代码：

回到目录

 

    

        

        {{ todo.text }}
        
    

回到目录

 

    js代码：

回到目录

 

new Vue({
    el: '#app',
        data: {
        todos: [
            { text: 'Learn JavaScript' },
            { text: 'Learn Vue.js' },
            { text: 'Build Something Awesome' }
        ]
    }
})

回到目录

 

    例四：事件绑定

回到目录

 

    说明：v-on是vue.js特性，表示绑定事件方法。

回到目录

 

    html代码：

回到目录

 

    
{{ message }}
    Reverse Message

回到目录

 

    js代码：

回到目录

 

new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!'
    },
    methods: {
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
        }
    }
})

回到目录

 

   

回到目录

 

    看完上面的4个例子，感觉vue.js挺容易入门，确实是这样，不得不说vue.js深受开发人员喜爱，简单易学。前面的例子只是展示了如何使用vue.js，但它到底包含了哪些功能？vue.js提供了两大核心功能：响应的数据绑定、视图组件化。接下来我们看看vue.js是怎么定义这两大功能的。

回到目录

 

两大核心功能：响应的数据绑定、视图组件化

回到目录

 

    响应的数据绑定：vue.js拥抱数据驱动的概念，一当DOM和数据绑定，Dom将会和数据保持同步，数据有变动DOM会立即渲染，在也不用担心数据变更后DOM如何渲染的问题。并且如果手动修改数据绑定的DOM元素的值，数据模型也会被同步。因为vue.js支持双向绑定。绑定过程如下图所示：

回到目录

 

回到目录

 

  

回到目录

 

 

回到目录

 

    视图组件化：vue支持抽象组件化，我们整个系统可以使用若干个小的组件构造，例如下面是一个html页面对应的摸快。整个系统可分为三个大的组件：app-nav、app-sidebar、app-content，app-sidebar下又包含两个小组件，app-content下包含三个小组件。这些组件也相当于是自定义的DOM元素，我们可以直接使用。

回到目录

 

   

回到目录

 

    html代码：

回到目录

 

回到目录

 

     前面简单介绍了vue的主要功能，接下来我们详细的看看在实际项目开发中，vue.js到底给我们提供了哪些方面的功能。

回到目录

 

数据绑定语法

回到目录

 

    1.文本绑定：在html的文本字符串中，可以通过{{}}格式包含vue特性。

回到目录

 

Message: {{ msg }}

回到目录

 

    2.单向绑定：只同步一次，如果msg特性值有变化，html中的文本不会被更新。

回到目录

 

This will never change: {{* msg }}

回到目录

 

    3.输出包含html的数据：1和2中的代码不支持输出html代码，需要用下面的格式。

回到目录

 

{{{ raw_html }}}

回到目录

 

    4.html属性值绑定

回到目录

 

回到目录

 

    5.支持javascript表达式

回到目录

 

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

回到目录

 

    6.过滤器：vue提供了属性过滤功能，下面的代码message是一个特性，filterA是一个过滤函数，最终输出为filterA(message)的结果。

回到目录

 

{{ message | filterA }}

回到目录

 

    7.判断语法：如果条件成立则输出结果，条件不成立无任何输出。

回到目录

 

Hello!

回到目录

 

    8.html属性绑定：下面代码和：和效果一样，其实最终也会转换为v-bind模式。

回到目录

 

回到目录

 

    9.事件绑定：使用v-on为html的事件属性绑定方法。

回到目录

 

回到目录

 

    10.v-bind缩写：下面的第一段代码为v-bind的完整写法，第二段代码为缩写方式。

回到目录

 

Button


Button

回到目录

 

    11.v-on缩写：和v-bind相似，区别在于v-on用@符号表示，而v-bind用:表示。

回到目录

 

回到目录

 

   

回到目录

 

    vue提供的语法让开发人员很方便的完成view和model的动态绑定，vue不仅提供特性和html元素属性的绑定，它对css和style支持也比较完善。

回到目录

 

Class与Style绑定

回到目录

 

    1.class绑定对象特性：vue绑定class支持直接绑定json字符串格式设置。下面代码vue实例包含isA和isB两个类型为布尔的属性，可供元素的class直接绑定。下面的html代码有人会有疑问：在div上写了两次class属性。这个问题不用担心，vue会自动把两个class属性合并成一个。

回到目录

 

    html代码：

回到目录

 

回到目录

 

    js代码：

回到目录

 

data: {
    isA: true,
    isB: false
}

回到目录

 

    输出结果：

回到目录

 

回到目录

 

    2.class字节绑定对象：vue支持直接给class属性绑定对象，这样写也更灵活些。

回到目录

 

    html代码：

回到目录

 

回到目录

 

    js代码：

回到目录

 

data: {
    classObject: {
        'class-a': true,
        'class-b': false
    }
}

回到目录

 

    3.数组语法：class属性可直接绑定一个数组，数组里边的项为vue实例特性。

回到目录

 

    html代码：

回到目录

 

回到目录

 

    js代码：

回到目录

 

data: {
    classA: 'class-a',
    classB: 'class-b'
}

回到目录

 

条件渲染

回到目录

 

    1.v-if和v-else：下面代码如果条件为true则输出yes，否则输出no。

回到目录

 

Yes
No

回到目录

 

    2.template v-if输出多条html元素：v-if和template标签配合使用可嵌入多个html标签，当着模板使用，最终输出值包含html元素。

回到目录

 

回到目录

 

    3.v-show和v-else: 和v-if相似，都作为条件判断，不同点在于渲染的区别。v-if只有等条件成立时才会渲染html元素，而v-show不管条件是否成立都会渲染，如果条件不成立则设置元素的display为none。

回到目录

 

    4.v-show和组件混合使用问题：将v-show用在组件上时，由于指令优先级v-else会出问题，所以不要使用v-else。下面代码是错误的：

回到目录

 

这可能也是一个组件

回到目录

 

    应该这样写：

回到目录

 

这可能也是一个组件

回到目录

 

列表渲染

回到目录

 

    1.语法v-for：通过v-for可遍历js对象集合，然后用可以直接输出每一项的数据。下面的代码直接用文本输出items的每项数据。

回到目录

 

    html代码：

回到目录

 

    

        {{ item.message }}
    

回到目录

 

    js代码：

回到目录

 

var example1 = new Vue({
    el: '#example-1',
    data: {
        items: [
            { message: 'Foo' },
            { message: 'Bar' }
        ]
    }
})

回到目录

 

     2.获取遍历项索引：使用v-for遍历有时候想得到每一项的索引值，可通过index直接获取，index直接获取，index是vue直接提供的特性。我们也可以给索引取别名：

回到目录

 

    {{ idx }} {{ item.message }}

回到目录

 

    3.template和v-for：有时候我们想每次输出多条html标签，那么我们可通过v-for和template配合使用达到效果：

回到目录

 

回到目录

 

    4.操作数组：vue提供了一些数组操作方法，包括push、pop、shift、unshift、splice、sort、reverse等。如果我要对vue实例example1的集合特性items添加项，可以使用:

回到目录

 

example1.items.push({message: ‘Baz’});

回到目录

 

    如果要过滤数组选项，可以使用filter函数。例如下面的代码找出item属性message包含Foo的选项集合：

回到目录

 

example1.items = example1.items.filter(function (item) {
    return item.message.match(/Foo/)
})

回到目录

 

    5.数组操作问题

回到目录

 

    不能直接使用数组索引设置元素，例如vm.items[0] = {}，这样设置的话，vue是不能检测到数组的变化。可使用set方法：

回到目录

 

example1.items. set(0, { childMsg: 'Changed!'})

回到目录

 

    不能直接修改数组长度，这样设置后vue检测不到变化。可直接使用一个空数组替换：

回到目录

 

example1.items = [];

回到目录

 

    6.对象v-for:v-for也可直接遍历对象属性。

回到目录

 

    html代码：

回到目录

 

    

        {{ $key }} : {{ value }}
    

回到目录

 

    js代码：

回到目录

 

new Vue({
    el: '#repeat-object',
    data: {
        object: {
            FirstName: 'John',
            LastName: 'Doe',
            Age: 30
        }
    }
})

回到目录

 

方法与事件处理器

回到目录

 

    1.方法处理器：使用v-on监听DOM事件，例如

回到目录

 

    html代码：

回到目录

 

    Greet
 
  
 
  

    回到目录 
  
 
  
 
 
  
    js代码：
 
  

    回到目录 
  
 
  
 
 
  
 
   
 
     
   
 
   
 
     
   
 
   
var vm = new Vue({
    el: '#example',
    data: {
        name: 'Vue.js'
    },
    // 在 `methods` 对象中定义方法
    methods: {
        greet: function (event) {
            // 方法内 `this` 指向 vm
            alert('Hello ' + this.name + '!')
            // `event` 是原生 DOM 事件
            alert(event.target.tagName)
        }
    }
})
 
   
 
     
   
 
   
 
     
   
 
  
 
  

    回到目录 
  
 
  
 
 
  
    2.如何传递参数：可直接传递字符串或者对象，如果想传递事件对象可以使用$event：
 
  

    回到目录 
  
 
  
 
 
  
 
   
Submit
 
  
 
  

    回到目录 
  
 
  
 
 
  
    js代码和其他绑定一样：
 
  

    回到目录 
  
 
  
 
 
  
 
   
 
     
   
 
   
 
     
   
 
   
// ...
methods: {
    say: function (msg, event) {
        // 现在我们可以访问原生事件对象
        event.preventDefault()
    }
}
 
   
 
     
   
 
   
 
     
   
 
  
 
  

    回到目录 
  
 
  
 
 
  
    3.数据逻辑和事件逻辑隔离：为了让数据模型只处理数据逻辑，而不混杂其他逻辑，vue.js提供了两个事件修饰符.prevent和.stop。
 
  

    回到目录 
  
 
  
 
 
  
 
   
 
     
   
 
   
 
     
   
 
   










 
   
 
     
   
 
   
 
     
   
 
  
 
  

    回到目录 
  
 
  
 
 
  
    4.按键修饰符：可以使用按键编码或者别名。
 
  

    回到目录 
  
 
  
 
 
  
 
   
 
     
   
 
   
 
     
   
 
   






 
   
 
     
   
 
   
 
     
   
 
  
 
  

    回到目录 
  
 
  
 
 
  
    vue.js提供的别名包括：enter、tab、delete、esc、space、up、down、left、Right。
 
  

    回到目录 
  
 
  
 
 
  
    vue.js也支持自定义别名，例如我们想控制F1按键事件，可以先给F1（编码为112）定义一个别名：
 
  

    回到目录 
  
 
  
 
 
  
 
   
// 可以使用 @keyup.f1
Vue.directive('on').keyCodes.f1 = 112
 
  
 
  

    回到目录 
  
 
  
 
 
  
    直接使用别名即可：
 
  

    回到目录 
  
 
  
 
 
  
 
   
 
  
 
  

    回到目录 
  
 
  
 
 
  
表单控件绑定
 
  

    回到目录 
  
 
  
 
 
  
    1.text控件：如果修改了text控件的值，span绑定的message会不同更新。
 
  

    回到目录 
  
 
  
 
 
  
 
   
Message is: {{ message }}


 
  
 
  

    回到目录 
  
 
  
 
 
  
    2.checkbox控件
 
  

    回到目录 
  
 
  
 
 
  
 
   

{{ checked }}
 
  
 
  

    回到目录 
  
 
  
 
 
  
    多个checkbox绑定：每个checkbox绑定一个类型为数组的数据模型checkedNames。
 
  

    回到目录 
  
 
  
 
 
  
    html代码：
 
  

    回到目录 
  
 
  
 
 
  
 
   
 
     
   
 
   
 
     
   
 
   
input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
Jack

John

Mike


Checked names: {{ checkedNames | json }}
 
   
 
     
   
 
   
 
     
   
 
  
 
  

    回到目录 
  
 
  
 
 
  
    js代码：
 
  

    回到目录 
  
 
  
 
 
  
 
   
 
     
   
 
   
 
     
   
 
   
new Vue({
    el: '...',
    data: {
        checkedNames: []
    }
})
 
   
 
     
   
 
   
 
     
   
 
  
 
  

    回到目录 
  
 
  
 
 
  
    3.radio
 
  

    回到目录 
  
 
  
 
 
  
 
   
 
     
   
 
   
 
     
   
 
   

One



Two


Picked: {{ picked }}
 
   
 
     
   
 
   
 
     
   
 
  
 
  

    回到目录 
  
 
  
 
 
  
    4.select
 
  

    回到目录 
  
 
  
 
 
  
    单选：
 
  

    回到目录 
  
 
  
 
 
  
 
   
 
     
   
 
   
 
     
   
 
   

A
B
C

Selected: {{ selected }}
 
   
 
     
   
 
   
 
     
   
 
  
 
  

    回到目录 
  
 
  
 
 
  
    多选：
 
  

    回到目录 
  
 
  
 
 
  
 
   
 
     
   
 
   
 
     
   
 
   

A
B
C



Selected: {{ selected | json }}
 
   
 
     
   
 
   
 
     
   
 
  
 
  

    回到目录 
  
 
  
 
 
  
    select的option也可以动态通过v-for方式渲染。
 
  

    回到目录 
  
 
  
 
 
  
    html代码：
 
  

    回到目录 
  
 
  
 
 
  
 
   
 
     
   
 
   
 
     
   
 
   


{{ option.text }}


Selected: {{ selected }}
 
   
 
     
   
 
   
 
     
   
 
  
 
  

    回到目录 
  
 
  
 
 
  
    js代码：
 
  

    回到目录 
  
 
  
 
 
  
 
   
 
     
   
 
   
 
     
   
 
   
new Vue({
    el: '...',
    data: {
        selected: 'A',
        options: [
            { text: 'One', value: 'A' },
            { text: 'Two', value: 'B' },
            { text: 'Three', value: 'C' }
        ]
    }
})
 
   
 
     
   
 
   
 
     
   
 
  
 
  

    回到目录 
  
 
  
 
 
  
   
 
  

    回到目录 
  
 
  
 
 
  
     以上的内容都是本人跟着官网学习记录的笔记，内容都比较偏向基础，如有哪些地方介绍有误望各位指正。vue.js还有一个比较重要的知识点：组件。下篇内容应该主要分享vue.js组件，有需要的同学可关注下。