黑马程序员：Vue.js快速入门

1、黑马程序员：Vue.js快速入门Vue.js简介了解Vue.js Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，它不仅易于上手，还便于与第三方库或既有项目整合.Vue.js安装下载Vue.js:/vuejs/vue（我们现在使用的版本是2.5.16）快速入门声明式渲染我们现在做个最简单的小例子，演示如何使用Vue.js实现声明式渲染。创建Vue_1.html，将Vue.js资料包下的dist目录的vue.min.js拷贝到工程中，并在htm

2、l页面中引入 Vue.js的声明式渲染 message var myVue = new Vue( el:#myVue, data: message:Hello World ); 分析：message : 表示view。new Vue()：表示创建Vue对象，用于连接view和model。el:表示指向view。data：表示指向model。通过Vue对象连接view和model，message就可以获取到Vue对象中data定义的message的内容。运行结果如下：绑定元素特性Vue.js除了声明式渲染之外，还可以进行绑定元素的特性：创建Vue_2.html Vue.js绑定元素特性 传智播客

3、 var myVue = new Vue( el:#myVue, data: message: ); 分析：v-bind:称为指令,将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致运行结果如下：双向绑定示例我们刚才的例子非常简单，咱们再来看一下Vue.js双向数据绑定的使用：创建Vue_3.html Vue.js双向数据绑定 Message is:message var myVue = new Vue( el:#myVue, data: message: ); 分析：v-model:指令，监听用户的输入事件以更新数据。运行

4、结果如下：按钮事件绑定Vue.js可以用 v-on 指令监听标签的事件，并在触发时运行JavaScript 代码。创建Vue_4.html Vue.js按钮事件绑定 var myVue = new Vue( el:#myVue, data: message:欢迎来到传智播客！ , methods: show:function(event) alert(this.message); ); 分析：v-on:指令。v-on:click:设置监听input的点击事件的事件。methods:定义v-on:click的方法。event：表示标签的原生事件this.message:表示指向Vue对象中定义的

5、message。运行结果如下：遍历集合数据我们可以使用Vue.js的v-for指令对数组或者集合的数据进行遍历展示。创建Vue_5.html Vue.js遍历集合 序列 商品编号 商品名称 价格 index+1 product.id product.price var vue = new Vue( el:#myVue, data: products: id:1001, name:数码相机, price:3000 , id:1002, name:苹果手机, price:7000 ); 分析：v-for=(product,index) in products ： v-fo

6、r为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实现的路由操作是但页面的路由操作。下载vu

7、e-router:/vuejs/vue-router路由实现创建Vue_6.html,引入vue.min.js和vue-router.min.js文件 Vue.js路由操作 HEAD JAVAEE IOS Android FOOT var java = + ; var ios = + ; var android = + ; var JAVAEE = template: java var IOS = template: ios var Android = template: android var routes = path: /, component: JAV

8、AEE , 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) 分析：router-link：默认会被渲染成一个a标签，用来设置导航操作，其中的to属性用来指定链接路径。router-view：用来显示路由页面。const JAVAEE = template:java：定义跳转的页面组件，因为Vue.js+vue-router是单页面的路由操作，所以如果想要实现页面跳转，需要借助iframe等标签显示页面。path:/, component:JAVAEE：设置相应的路由跳转到相应的页面。var router =