7 篇文章 Vue.js教程

基于 Laravel 的 Vue.js 中文教程

基于 Laravel 的 Vue.js 中文学习教程 —— Class 与 Style 绑定

vuejs-logo

数据绑定一个常见的需求就是操作元素的class列表和内联样式,由于它们都是属性,所以我们可以使用v-bind来处理:我们只需要使用表达式来计算最终的字符串。不过,字符串拼接既麻烦又容易出错,因为这个原因,在v-bind用于class和style的时候,Vue.js对此专门进行了增强,除了字符串以外,这些表达式还可以计算为对象或数组。 绑定HTML Class 尽管你可以使用Mustach…

基于 Laravel 的 Vue.js 中文学习教程 —— 计算属性

vuejs-logo

在模板中绑定表达式非常方便,但这仅限于一些简单的操作,因为模板的主要作用是用于描述视图的结构,将过多逻辑放到模板中会让其变得臃肿且不易维护,这就是为什么Vue.js限制一次只能绑定一个表达式,对于那些需要多个表达式的逻辑,需要使用计算属性。 基本示例 HTML代码: <div id=”example”> a=@{{ a }}, b=@{{ b }} </div> …

基于 Laravel 的 Vue.js 中文学习教程 —— 数据绑定语法

vuejs-logo

Vue.js的模板基于DOM实现,这意味着所有的Vue.js模板都是有效的、可解析的HTML,并通过一些特殊属性做了增强。请记住这点,因为正是这个原因,使得Vue模板从本质上区分于基于字符串的模板。 1、插值 文本 最基本的数据绑定形式莫过于使用“Mustache”语法(mustache是一种模板语法,关于mustache参考:http://mustache.github.io/)插入文…

基于 Laravel 的 Vue.js 中文学习教程 —— Vue实例

MVVM模式

1、构造器 每一个Vue.js应用都是通过使用Vue构造器方法创建一个Vue根实例启动: var vm = new Vue({ // options }) Vue实例实质上就是MVVM模式(Model-View-ViewModel,关于MVC、MVP和MVVM之间的区别可参考阮一峰这篇博客:http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvv…

基于 Laravel 的 Vue.js 中文学习教程 —— 概览篇:数据绑定与组件系统

vue mvvm

1、简介 Vue.js(读作view)是一个用于构建交互式Web界面的JS库,其目标是以尽可能简单的API提供反应式数据绑定和组合式视图组件。 Vue.js本身并不是一个全栈框架,而是仅仅专注于视图层。一方面,正是因为这个原因,Vue.js很容易上手,也很容易和其他库或项目集成在一起;另一方面,和合适的工具和支持的库一起联合使用时,Vue.js也能完美的驱动复杂的单页应用。 2、反应式数…

基于 Laravel 的 Vue.js 中文学习教程 —— 入门篇

vuejs-logo

1、引入Vue.js 开始学习使用 Vue.js 之前先要将其引入我们的 Laravel 项目,这里我选择最简单的方式,直接下载对应的开放版本JS文件(http://vuejs.org/js/vue.js),然后将下载的vue.js文件放置到public目录下的js目录中(如果没有js目录则创建之)。 接下来就可以开启Vue.js学习之旅了。 2、Hello World 和任何其他语言/…