[学习交流] 【郑州校区】Vue.js快速入门

【郑州校区】Vue.js快速入门

Vue.js简介了解Vue.js

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

Vue.js安装

下载Vue.js:https://github.com/vuejs/vue

file://D:/2017%E5%B9%B4%E5%BA%A6/2017%E5%B9%B4%E5%BA%A6%E5%B7%A5%E4%BD%9C%E8%B5%84%E6%96%99/%E6%95%99%E7%A0%94%E9%83%A8%E6%8F%90%E4%BE%9B%E7%9A%84%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0%E6%B1%87%E6%80%BB/%E9%83%91%E5%B7%9E-3%E6%9C%88%E4%BB%BD-%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/vue.js%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8/vuejs_img/0.png?lastModify=1523582977

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

快速入门声明式渲染

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

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

[AppleScript] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Vue.js的声明式渲染</title>
        <script type="text/javascript" src="js/vue.min.js"></script>
    </head>
    <body>
        <div id="myVue">
            {{message}}
        </div>
    </body>
    
    <script type="text/javascript">
        var myVue = new Vue({
            el:"#myVue",
            data:{
                message:"Hello World"
            }
        });
    </script>
</html>

分析：

[AppleScript] 纯文本查看 复制代码

{{message}} : 表示view。

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

el:表示指向view。

data：表示指向model。

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

运行结果如下：

file://D:/2017%E5%B9%B4%E5%BA%A6/2017%E5%B9%B4%E5%BA%A6%E5%B7%A5%E4%BD%9C%E8%B5%84%E6%96%99/%E6%95%99%E7%A0%94%E9%83%A8%E6%8F%90%E4%BE%9B%E7%9A%84%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0%E6%B1%87%E6%80%BB/%E9%83%91%E5%B7%9E-3%E6%9C%88%E4%BB%BD-%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/vue.js%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8/vuejs_img/1.png?lastModify=1523582977

绑定元素特性

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

创建Vue_2.html

[AppleScript] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Vue.js绑定元素特性</title>
        <script type="text/javascript" src="js/vue.min.js"></script>
    </head>
    <body>
        <div id="myVue">
            <span v-bind:title="message">
                传智播客
            </span>
        </div>
    </body>
    
    <script type="text/javascript">
            var myVue = new Vue({
                el:"#myVue",
                data:{
                    message:"http://www.itcast.cn"
                }
            });
    </script>
</html>

分析：

[AppleScript] 纯文本查看 复制代码

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

运行结果如下：

file://D:/2017%E5%B9%B4%E5%BA%A6/2017%E5%B9%B4%E5%BA%A6%E5%B7%A5%E4%BD%9C%E8%B5%84%E6%96%99/%E6%95%99%E7%A0%94%E9%83%A8%E6%8F%90%E4%BE%9B%E7%9A%84%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0%E6%B1%87%E6%80%BB/%E9%83%91%E5%B7%9E-3%E6%9C%88%E4%BB%BD-%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/vue.js%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8/vuejs_img/1.gif?lastModify=1523582977

双向绑定示例

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

[AppleScript] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Vue.js双向数据绑定</title>
        <script type="text/javascript" src="js/vue.min.js"></script>
    </head>

    <body>
        <div id="myVue">
            <p>Message is:{{message}}</p>
            <input type="text" v-model="message" />
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el:"#myVue",
                data:{
                    message:""
                }
            });
        </script>
    </body>
</html>

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

运行结果如下：

file://D:/2017%E5%B9%B4%E5%BA%A6/2017%E5%B9%B4%E5%BA%A6%E5%B7%A5%E4%BD%9C%E8%B5%84%E6%96%99/%E6%95%99%E7%A0%94%E9%83%A8%E6%8F%90%E4%BE%9B%E7%9A%84%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0%E6%B1%87%E6%80%BB/%E9%83%91%E5%B7%9E-3%E6%9C%88%E4%BB%BD-%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/vue.js%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8/vuejs_img/2.gif?lastModify=1523582977

按钮事件绑定

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

创建Vue_4.html

[AppleScript] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Vue.js按钮事件绑定</title>
        <script type="text/javascript" src="js/vue.min.js"></script>
    </head>

    <body>
        <div id="myVue">
            <input v-on:click="show" type="button" value="点击">
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el:"#myVue",
                data:{
                    message:"欢迎来到传智播客！"
                },
                methods:{
                    show:function(event){
                        alert(this.message);
                    }
                }
            });
        </script>
    </body>
</html>

分析：

[AppleScript] 纯文本查看 复制代码

v-on:指令。

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

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

event：表示标签的原生事件

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

运行结果如下：

file://D:/2017%E5%B9%B4%E5%BA%A6/2017%E5%B9%B4%E5%BA%A6%E5%B7%A5%E4%BD%9C%E8%B5%84%E6%96%99/%E6%95%99%E7%A0%94%E9%83%A8%E6%8F%90%E4%BE%9B%E7%9A%84%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0%E6%B1%87%E6%80%BB/%E9%83%91%E5%B7%9E-3%E6%9C%88%E4%BB%BD-%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/vue.js%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8/vuejs_img/3.gif?lastModify=1523582977

遍历集合数据

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

创建Vue_5.html

[AppleScript] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Vue.js遍历集合</title>
        <script type="text/javascript" src="js/vue.min.js"></script>
    </head>

    <body>
        <table id="myVue" width="30%" border="1">
            <tr>
                <th>序列</th>
                <th>商品编号</th>
                <th>商品名称</th>
                <th>价格</th>
            </tr>
            <tr v-for="(product,index) in products">
                <td>{{index+1}}</td>
                <td>{{product.id}}</td>
                <td>{{product.name}}</td>
                <td>{{product.price}}</td>
            </tr>
        </table>
    </body>
    
    <script type="text/javascript">
            var vue = new Vue({
                el:"#myVue",
                data:{
                    products:[
                        {
                            id:1001,
                            name:"数码相机",
                            price:3000
                        },
                        {
                            id:1002,
                            name:"苹果手机",
                            price:7000
                        }
                    ]
                }
            });
    </script>
</html>

分析：

[AppleScript] 纯文本查看 复制代码

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

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

运行结果如下：

file://D:/2017%E5%B9%B4%E5%BA%A6/2017%E5%B9%B4%E5%BA%A6%E5%B7%A5%E4%BD%9C%E8%B5%84%E6%96%99/%E6%95%99%E7%A0%94%E9%83%A8%E6%8F%90%E4%BE%9B%E7%9A%84%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0%E6%B1%87%E6%80%BB/%E9%83%91%E5%B7%9E-3%E6%9C%88%E4%BB%BD-%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/vue.js%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8/vuejs_img/4.png?lastModify=1523582977

路由操作vue-router下载

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

下载vue-router:https://github.com/vuejs/vue-router

file://D:/2017%E5%B9%B4%E5%BA%A6/2017%E5%B9%B4%E5%BA%A6%E5%B7%A5%E4%BD%9C%E8%B5%84%E6%96%99/%E6%95%99%E7%A0%94%E9%83%A8%E6%8F%90%E4%BE%9B%E7%9A%84%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0%E6%B1%87%E6%80%BB/%E9%83%91%E5%B7%9E-3%E6%9C%88%E4%BB%BD-%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/vue.js%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8/vuejs_img/5.png?lastModify=1523582977

路由实现

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

[AppleScript] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Vue.js路由操作</title>
        <script type="text/javascript" src="js/vue.min.js"></script>
        <script type="text/javascript" src="js/vue-router.min.js"></script>
    </head>
    <body>
        <div id="myVue">
            <div>
                <h1>HEAD</h1>
                <router-link to="/JAVAEE">JAVAEE</router-link>
                <router-link to="/IOS">IOS</router-link>
                <router-link to="/Android">Android</router-link>
            </div>
            
            <router-view></router-view>
            
            <div>
                <h1>FOOT</h1>
            </div>
            
        </div>
    </body>
    
    <script type="text/javascript">
        var java = '<div style="width:100%;height:100%;overflow:hidden;">'
                                + '<iframe src="JAVAEE.html" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';
    
        var ios = '<div style="width:100%;height:100%;overflow:hidden;">'
                                + '<iframe src="IOS.html" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';
                                
        var android = '<div style="width:100%;height:100%;overflow:hidden;">'
                                + '<iframe src="Android.html" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';
    
    
        var JAVAEE = { template: java }
        var IOS = { template: ios }
        var Android = { template: android }
    
        var routes = [
            { path: '/', component: JAVAEE },
            { path: '/JAVAEE', component: JAVAEE },
            { path: '/IOS', component: IOS },
            { path: '/Android', component: Android }
        ]
        
        var router = new VueRouter({
            routes : routes
        })
        
        var app = new Vue({
            router : router
        }).$mount('#myVue')
    
    </script>
</html>

分析：

[AppleScript] 纯文本查看 复制代码

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手动的挂载到相应的组件中。

运行结果如下：

传智播客·黑马程序员郑州校区地址

河南省郑州市高新区长椿路11号大学科技园（西区）东门8号楼三层

联系电话 0371-56061160/61/62

来校路线地铁一号线梧桐街站A口出

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【郑州校区】Vue.js快速入门

0 个回复