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

黑马程序员：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拷贝到工程中，并在html页面中引入 !DOCTYPE html html head meta charset utf-8 / titleVue.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 分析： {{message}} : 表示view。 new Vue() ：表示创建Vue对象，用于连接view和model。 el:表示指向view。 data ：表示指向model。 通过Vue对象连接view和model ，{{message}}就可以获取到Vue对象中data定义的message的内容。 运行结果如下： 绑定元素特性 Vue.js除了声明式渲染之外，还可以进行绑定元素的特性： 创建Vue_2.html !DOCTYPE html html head meta charset utf-8 / titleVue.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: } }); /script /html 分析： v-bind:称为指令,将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致 运行结果如下： 双向绑定示例 我们刚才的例子非常简单，咱们再来看一下Vue.js双向数据绑定的使用：创建Vue_3.html !DOCTYPE html html head meta charset utf-8 / titleVue.js双向数据绑定/title script type text/javascript src js/vue.min.js/script /head body div id myVue pMessage 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 !DOCTYPE html html head meta charset utf-8 / titleVue.js按钮事件绑定/title script type text/javascript src js/vue.min.js/script