Vue.js快速入门

Vue.js快速入门

Vue.js简介

了解Vue.js

​ Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，它不仅易于上手，还便于与第三方库或既有项目整合.

Vue.js安装

• 下载Vue.js:;

（我们现在使用的版本是2.5.16）

快速入门

声明式渲染

我们现在做个最简单的小例子，演示如何使用Vue.js实现声明式渲染。

创建Vue_1.html，将Vue.js资料包下的dist目录的vue.min.js拷贝到工程中，并在html页面中引入

    
        
        
        
    
    
        

            {{message}}
        
    

    

分析：

{{message}} : 表示view。

new Vue()：表示创建Vue对象，用于连接view和model。

el:表示指向view。

data：表示指向model。

通过Vue对象连接view和model，{{message}}就可以获取到Vue对象中data定义的message的内容。

运行结果如下：

绑定元素特性

Vue.js除了声明式渲染之外，还可以进行绑定元素的特性：

创建Vue_2.html

    
        
        
        
    
    
        

            
                传智播客
            
        
    

    

分析：

v-bind:称为指令,将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致

运行结果如下：

双向绑定示例

我们刚才的例子非常简单，咱们再来看一下Vue.js双向数据绑定的使用：
创建Vue_3.html

    
        
        
        
    

    
        

            
Message is:{{message}}
            
        
        
    

分析：
v-model:指令，监听用户的输入事件以更新数据。

运行结果如下：

按钮事件绑定

Vue.js可以用 v-on 指令监听标签的事件，并在触发时运行JavaScript 代码。

创建Vue_4.html

分析：

v-on:指令。

v-on:click:设置监听input的点击事件的事件。

methods:定义v-on:click的方法。

event：表示标签的原生事件

this.message:表示指向Vue对象中定义的message。

运行结果如下：

遍历集合数据

我们可以使用Vue.js的v-for指令对数组或者集合的数据进行遍历展示。

创建Vue_5.html

    
        
        
        
    

    
        

            

                
序列
                
商品编号
                
商品名称
                
价格
            
            

                
{{index+1}}
                
{{product.id}}
                
{{product.name}}
                
{{product.price}}
            
        
    

    

分析：

v-for="(product,index) in products" ： v-for为Vue指令，用于遍历集合，其基本语法为“item in items”。products为要遍历的集合。(product,index)中的product用于存放遍历集合的元素，index用于存放集合元素的角标，从0开始。

在Vue对象的data属性中，通过products[{}]的形式设置集合的数据。

运行结果如下：

路由操作

vue-router下载

Vue.js想要实现路由效果，需要和vue-router进行组合实现，在Vue.js中并没有关于vue-router的js文件，所以vue-router需要单独去下载，另外需要注意的是Vue.js+vue-router实现的路由操作是但页面的路由操作。

下载vue-router:;

###路由实现

创建Vue_6.html,引入vue.min.js和vue-router.min.js文件

    
        
        
        
        
    
    
        

            

                
HEAD
                JAVAEE
                IOS
                Android
            

            

            

                
FOOT
            

        
    

    

分析：

router-link：默认会被渲染成一个a标签，用来设置导航操作，其中的to属性用来指定链接路径。

router-view：用来显示路由页面。

const JAVAEE = {template:java}：定义跳转的页面组件，因为Vue.js+vue-router是单页面的路由操作，所以如果想要实现页面跳转，需要借助iframe等标签显示页面。

{path:'/', component:JAVAEE}：设置相应的路由跳转到相应的页面。

var router = new VueRouter({routes:routes}):是创建路由对象。

var app = new Vue({router:router}).$mount('#myVue') ： 将路由的对象设置到Vue对象上，并通过$mount手动的挂载到相应的组件中。

运行结果如下：