1. 云栖社区>
  2. PHP教程>
  3. 正文

基于 Laravel 的 Vue.js 中文学习教程 —— 概览篇

作者:用户 来源:互联网 时间:2017-12-01 20:58:13

jslaravel学习中文教程vue基于

基于 Laravel 的 Vue.js 中文学习教程 —— 概览篇 - 摘要: 本文讲的是基于 Laravel 的 Vue.js 中文学习教程 —— 概览篇,1、简介 Vue.js(读作view)是一个用于构建交互式Web界面的JS库,其目标是以尽可能简单的API提供反应式数据绑定和组合式视图组件。 Vue.js本身并不是一个全栈框架,而是仅仅专注于视图层。一方面,正是因为这个原因,Vu

1、简介

Vue.js(读作view)是一个用于构建交互式Web界面的JS库,其目标是以尽可能简单的API提供反应式数据绑定和组合式视图组件。

Vue.js本身并不是一个全栈框架,而是仅仅专注于视图层。一方面,正是因为这个原因,Vue.js很容易上手,也很容易和其他库或项目集成在一起;另一方面,和合适的工具和支持的库一起联合使用时,Vue.js也能完美的驱动复杂的单页应用。

2、反应式数据绑定

Vue.js的核心就是一个反应式数据绑定系统,所谓反应式数据绑定指的是模型数据的改动会实时同步给DOM,这其实是使用了观察者模式,DOM是订阅者,而数据模型是发布者。当我们使用jQuery手动操作DOM的时候,代码通常是命令式的、重复的且很容易出错。Vue.js封装了数据驱动视图的概念,通俗点说,这意味着我们可以使用指定的语法在正常的HTML模板中建立DOM与底层数据的绑定。一旦底层数据发生变化,DOM中的数据也会随之变化。这样一来,大部分应用逻辑聚焦在数据操作上,而不需要再在DOM更新上浪费时间,与此同时,也使得我们的代码更加容易编写、理解和维护。

基于 Laravel 的 Vue.js 中文学习<a href=教程 —— 概览篇">

下面我们来看一个最简单的例子。

HTML代码:

<!-- DOM 视图 --><div id="example-1"> Hello {{ name }}!</div>

JS代码:

// 数据模型var exampleData = { name: 'LaravelAcademy.org'}// 创建一个Vue实例绑定视图和数据var exampleVM = new Vue({ el: '#example-1', data: exampleData})

最终页面中的显示结果是:

Hello Laravelacademy.org!

这看上去和渲染模板很相似,但其实Vue.js在底层为我们做了很多事,现在数据和DOM是绑定的,一切都是反应式的。我们是怎么知道的。打开浏览器开发者控制台,编辑 exampleData.name ,就能看到DOM部分内容会随之更新。

注意到我们没有编写任何DOM操作代码:HTML模板通过绑定增强,是底层数据状态的声明式映射,而这些底层数据状态则是原生的JavaScript对象。我们的视图完全通过数据驱动。

让我们来看第二个例子。

HTML代码:

<div id="example-2"> <p v-if="greeting">Hello!</p></div>

JS代码:

var exampleVM2 = new Vue({ el: '#example-2', data: { greeting: true }})

此时页面显示:

Hello!

这里我们看到一些新东西。 v-if 属性被称作指令。指令以 v- 开头,表示它们是Vue.js提供的特殊属性,这些指令会分别将特定反应式行为应用到被渲染的DOM上。如果你在控制台中将 exampleVM2.greeting 设置为 false ,就会看到 Hello! 消失。

第二个例子演示了我们不仅可以将DOM文本绑定到数据,还可以将DOM结构绑定到数据。此外,Vue.js还提供了功能强大的过渡效果系统,当Vue插入或移除元素时,会自动应用相应过渡效果。

还有其它一些指令,每个都有着自己特定的功能。比如 v-for 指令用于显示数组数据, v-bind 指令用于绑定HTML属性等。后续章节我们将讨论完整的数据绑定语法。

未完待续。。。

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js , laravel , 学习 , 中文 , 教程 , vue , 基于 ,以便于您获取更多的相关知识。