php模板中使用vue一文快速懂得Github上最风行的Web框架Vuejs入门

Vue 是一个专注于构建Web 用户界面的JavaScript 库。
本文首先通过一段大略的先容让你对Vue 有一个初步的认识，然后创建一个Web 运用。

为什么须要这个前端框架

相对来说，Vue 在JavaScript 前端领域属于后来者，但是对付当前主流JavaScript 库的地位具有很大的威胁。
它易用、灵巧、速率快，还供应了许多功能和可选工具，这使得开拓者能够快速地构建一个当代Web 运用。
Vue 的作者尤雨溪将其称为渐进式框架。

Vue 遵照渐进增量的设计原则，其核心库专注于用户界面，使得现有的项目可以方便地集成利用Vue。

php模板中使用vue一文快速懂得Github上最风行的Web框架Vuejs入门 Webpack

Vue 既可以构建出很小的原型，又可以构建出繁芜的大型Web 运用。

Vue 非常随意马虎上手——初学者能轻松节制Vue，而已经熟习Vue 的开拓者则可以在实际项目中快速发挥出它的浸染。

Vue 整体上遵照MVVM（Model-View-ViewModel，模型－视图－视图模型）架构，也便是说View（用户界面或视图）和Model（数据）是独立的，ViewModel（Vue）是View 和Model交互的桥梁。
Vue 对View 和Model 之间的更新操作做了自动化处理，并且已经为开拓者进行了优化。
因此，当View 的某个部分须要更新时，开拓者并不须要特殊指定，Vue 会选择恰当的方法和机遇进行更新。

Vue 还吸取了其他类似框架（如React、Angular 和Polymer）的精华。
下面是对Vue 核心功能的概述。

一个相应式的数据系统，能通过轻量级的虚拟DOM引擎和最少的优化事情来自动更新用户界面。

灵巧的视图声明，包括优雅友好的HTML 模板、JSX（在JavaScript 中编写HTML 的技能）以及hyperscript 渲染函数（完备利用JavaScript）。

由可掩护、可复用组件构成的组件化用户界面。

官方的组件库供应了路由、状态管理、脚手架以及更多高等功能，使Vue 成为了一个灵巧且功能完善的前端框架。

这是一个有发展前景的项目

2013 年，尤雨溪开始方案构建Vue 的初版原型。
那时候尤雨溪任职于Google，并在事情中利用Angular。
尤雨溪最初的目标是吸取Angular 中所有精良的功能，比如数据绑定和数据驱动DOM，并摒弃会导致框架去世板、难以学习和利用的一些功能。

Vue 于2014 年2 月首次公开亮相，并在第一天就大得胜利：涌如今HackerNews 首页，在Reddit 的/r/javascript 板块中位居榜首，并且其官网得到了1 万次独立访问。

Vue 的第一个紧张版本1.0 于2015 年10 月发布。
截至2015 年年底，Vue 在npm中的下载量飙升至38.2 万次，在GitHub 上收成了1.1 万个star，其官网得到了36.3 万次独立访问。
主流的PHP 框架Laravel 选用Vue 替代React 作为其官方的前端库。

Vue 的第二个紧张版本2.0 于2016 年9 月发布，具有基于虚拟DOM 的全新渲染器以及许多新特性，比如做事端渲染和性能提升等。
Vue 是目前速率最快的前端框架之一。
根据与React 团队共同得出的比拟报告，Vue 的性能乃至优于React（https://cn.vuejs.org/v2/guide/comparison）。
截至发文前，Vue 位居GitHub 盛行前端框架第一位，有12.5万个star，已超越React、Angular 。
拜会：https://github.com/collections/front-end-javascript-frameworks。

如今，有许多公司都在利用Vue，比如微软、Adobe、阿里巴巴、百度、小米、Expedia、任天国和GitLab。

兼容性哀求

Vue 没有任何第三方依赖，可以在所有兼容ECMAScript 5 的浏览器中利用。
这也便是说它不支持Internet Explorer 8 及以下版本，由于Vue 利用了JavaScript 中相对较新的特性，比如Object.defineProperty，而它们在老版本的浏览器中是无法polyfill 的。

一分钟设置

事不宜迟，下面我们通过快速设置来创建第一个Vue 运用。
由于Vue 与生俱来的灵巧性，只须要一个大略的<script>标签就能添加到任意Web 页面中。
下面创建一个包含Vue 库的大略Web 页面，个中有一个大略的div 元素和一个<script>标签：

<html><head><meta charset=\"大众utf-8\公众><title>Vue Project Guide setup</title></head><body><script src=\"大众https://unpkg.com/vue/dist/vue.js\公众></script><div id=\"大众root\"大众><p>Is this an Hello world?</p></div><script>console.log('Yes! We are using Vue version', Vue.version)</script></body></html>

在浏览器的掌握台中，可以看到类似如下的内容：

Yes! We are using Vue version 2.0.3

正如上面的代码所示，库对外供应了一个Vue 工具，该工具包含利用Vue 所需的所有功能。
至此，统统就绪。

创建一个运用

现在，这个Web 页面中还没有运行Vue 运用。
全体库都是基于Vue 实例的，而实例是View和Model（数据）交互的桥梁。
因此须要创建一个新的Vue 实例来启动运用：

// 创建Vue 实例var app = new Vue({// 根DOM 元素的CSS 选择器el: '#root',// 一些数据data () {return {}},})

在上面的代码中，利用关键字new 调用Vue 布局器创建了一个新的实例。
Vue 布局器有一个参数—— option 工具。
该参数可以携带多个属性（称为选项），这里只利用个中的两个属性。

通过el 选项，我们利用CSS 选择器奉告Vue 将实例添加（挂载）到Web 页面的哪个DOM元素中。
在这个示例中，Vue 实例将利用<div id=\"大众root\公众> DOM元素作为其根元素。
其余，也可以利用Vue 实例的$mount 方法替代el 选项：

var app = new Vue({data () {return {message: 'Hello Vue.js!',}},})// 添加Vue 实例到页面中app.$mount('#root')

TIP：Vue 实例的大多数分外方法和属性都因此美元符号（$）开头的。

我们还会在data 选项中初始化一些数据，利用了携带一个字符串的message 属性。
现在Vue 运用运行起来了，但是此处还并没有做什么。

在单个Web 页面中，开拓者可以添加任意多个Vue 运用。
只须要为每个运用创建出新的Vue 实例并挂载到不同的DOM元素即可。
当想要将Vue 集成到已有的项目中时，这非常方便。

Vue 开拓者工具

Vue 有一个官方调试工具，在Chrome 中以扩展的办法呈现，名为Vue.js devtools。
通过该工具可以看到运用的运行情形，这有助于调试代码。
可以在Chrome 网上运用商店（https://chrome.google.com/webstore/search/vue）下载；如果利用Firefox，则可以到Firefox 附加组件（https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/?src=ss）下载。

利用Chrome 版本的话，还须要进行额外的设置。
在扩展设置中，启用Allow access to fileURLs 选项，这样调试工具就能在从本地磁盘打开的Web 页面上检测Vue 了。

打开我们的Web 页面，按快捷键F12（在OS X 中快捷键是Shift + command + c）打开Chrome开拓者工具，然后找到Vue 选项卡（有可能隐蔽在More tools...下拉菜单中）。
打开该选项卡之后，就可以看到一棵默认名为Root 的Vue 实例树。
如果点击Root 的话，会在侧边栏上显示出实例的干系属性。

TIP：可以将devtools 选项卡拖放到喜好的位置。
建议将其放在靠前的位置，由于当Vue 不处于开拓模式或没有运行时，该选项卡在页面中是隐蔽起来的。

可以通过name 选项修正Vue 实例的名字：

var app = new Vue({name: 'MyApp',// ...})

当一个页面中有多个Vue 实例时，这有助于直不雅观地在开拓者工具中找到详细的某个实例。

借助模板实现DOM 的动态性

在Vue 中，开拓者可采取多种办法编写View。
现在，我们先从模板开始。
模板是描述View最大略的方法，由于它看起来很像HTML，并且只须要少量额外的语法就能轻松实现DOM的动态更新。

文本显示

先来看看模板的第一个功能：文本插值。
文本插值用于在Web 页面中显示动态的文本。
文本插值的语法是在双花括号内包含单个任意类型的JavaScript 表达式。
当Vue 处理模板时，该JavaScript 表达式的结果将会更换掉双花括号标签。
用下面的代码更换掉<div id=\"大众root\"大众>元素：

<div id=\公众root\"大众><p>{{ message }}</p></div>

在上面的模板中，有一个<p>元素。
该元素的内容是JavaScript 表达式message 的结果。
该表达式将返回Vue 实例中message 属性的值。
现在该当可以在Web 页面中看到输出了一行新的文本内容：Hello Vue.js!。
这看起来只是显示了一个字符串，但是Vue 已经为开拓者做了很多事情——DOM和数据连通了。

为了证明这一点，我们打开浏览器掌握台并修正app.message 的值，然后按回车键：

app.message = 'Awesome!'

可以创造显示的文本发生了改变。
这背后的技能称为数据绑定。
也便是说每当数据有改变时，Vue 都能够自动更新DOM，不须要开拓者做任何事情。
Vue 框架中包含一个非常强大且高效的相应式系统，能对所有的数据进行跟踪，并且能在数据发生改变时按需自动更新View。
所有这些操作都非常快。

利用指令添加基本的交互

接下来在我们的静态运用中加入交互性吧。
例如，许可用户通过输入文本修正页面中显示的内容。
要达到这样的交互效果，可以在模板中利用称为指令的分外HTML 属性。

Vue 中所有的指令名都是带v-前缀的，并遵照短横线分隔式（kebab-case）语法。
这意味着要用短横线将单词分开。
HTML 属性是不区分大小写的（大写或小写都没有任何问题）。

在此，须要利用的指令是v-model，它将<input>元素的值与message 数据属性进行绑定。
在模板里面添加一个新的<input>元素，该元素带有v-model=\公众message\公众属性：

<div id=\公众root\公众><p>{{ message }}</p><input v-model=\"大众message\"大众 /></div>

当input 值发生改变时，Vue 会自动更新message 属性。
你可以在input 中输入一些内容，验证文本内容是否会随着输入的变革而变革，以及开拓者工具中值的变革：

Vue 供应了许多指令，开拓者还可以自定义指令。

小结

本文首先快速设置了一个Web 页面来动手利用Vue，然后编写了一个示例运用。
我们在页面中创建并挂载了一个Vue 实例到DOM中，接着编写模板实现了DOM 的动态性。
在这个模板中，我们借助文本插值用一个JavaScript 表达式来显示文本内容。
末了，通过v-model 指令将input元素绑定到数据属性，给Web 页面添加了一些交互。

——本文选自《Vue.js项目实战》

如果大家想利用Vue 创建真正的Web 运用，请参考下面这本书。

本书由6个详细的项目构成。
在学习每个项目时，作者带领读者亲手构建一个实际的运用。
这也就意味着，学完本书时，我们将拥有6个可以运行的Vue运用。

第 1 章　Vue开拓入门

第 2 章　项目1：Markdown条记本

第 3 章　项目2：城堡决斗游戏

第 4 章　高等项目设置

第 5 章　项目3：支持中央

第 6 章　项目4：博客舆图

第 7 章　项目5：在线商店以及扩展

第 8 章　项目6：利用Meteor开拓实时仪表盘

点击【理解更多】跳转到京东购买图书