黑马程序员技术交流社区

标题: 【郑州校区】Vue.js快速入门 [打印本页]

作者: 我是楠楠 时间: 2018-4-13 09:35
标题: 【郑州校区】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的内容。

运行结果如下：

绑定元素特性

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 属性保持一致

运行结果如下：

双向绑定示例

我们刚才的例子非常简单，咱们再来看一下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:指令，监听用户的输入事件以更新数据。

运行结果如下：

按钮事件绑定

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。

运行结果如下：

遍历集合数据

我们可以使用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[{}]的形式设置集合的数据。

运行结果如下：

路由操作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

路由实现

创建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口出

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2