Vue.js实例本章节为大家介绍几个Vue.js实例，通过实例练习来巩固学到的知识点。导航菜单实例导航菜单创建一个简单的导航菜单：<divid="main"><!--激活的菜单样式为active类--><!--为了阻止链接在点击时跳转，我们使用了"prevent"修饰符(preventDefault的简称)。--><n...

[阅读全文]

Vue.js响应接口Vue可以添加数据动态响应接口。例如以下实例，我们通过使用$watch属性来实现数据的监听，$watch必须添加在Vue实例之外才能实现正确的响应。实例中通过点击按钮自动加1。setTimeout设置两秒后计算器的值加上20。实例<divid="app"><pstyle="font-size:25p...

[阅读全文]

Vue.jsAjax(vue-resource)Vue要实现异步加载需要使用到vue-resource库。<scriptsrc="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>Get请求以下是一个简单的Get请求实...

[阅读全文]

Vue.js混入混入(mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。来看一个简单的实例：实例varvm=newVue({el:'#databinding',data:{},methods:{},});//定义一个混入对...

[阅读全文]

Vue.js过渡&动画本章节我们主要讨论Vue.js的过渡效果与动画效果。过渡Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果。Vue提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。语法格式<transitionname="nameoftransition"><div></div></t...

[阅读全文]

Vue.js路由本章节我们将为大家介绍Vue.js路由。Vue.js路由允许我们通过不同的URL访问不同的内容。通过Vue.js可以实现多视图的单页Web应用（singlepagewebapplication，SPA）。Vue.js路由需要载入vue-router库中文文档地址：vue-router文档。安装1、直接下...

[阅读全文]

Vue.js自定义指令除了默认设置的核心指令(v-model和v-show),Vue也允许注册自定义指令。下面我们注册一个全局指令v-focus,该指令的功能是在页面加载时，元素获得焦点：实例<divid="app"><p>页面载入时，input元素自动获取焦点：</p><inputv-focus></div><scr...

[阅读全文]

Vue.js组件组件（Component）是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：注册一个全局组件语法格式如下：Vue.component(tagName,options)tagNa...

[阅读全文]

Vue.js表单这节我们为大家介绍Vue.js表单上的应用。你可以用v-model指令在表单控件元素上创建双向数据绑定。v-model会根据控件类型自动选取正确的方法来更新元素。输入框实例中演示了input和textarea元素中使用v-model实现双向数据绑定：<divid="app"><p>input元素：</p...

[阅读全文]

Vue.js事件处理器事件监听可以使用v-on指令：v-on<divid="app"><buttonv-on:click="counter+=1">增加1</button><p>这个按钮被点击了{{counter}}次。</p></div><script>newVue({el:'#app',data:{counter:...

[阅读全文]

Vue.js样式绑定Vue.jsclassclass与style是HTML元素的属性，用于设置元素的样式，我们可以用v-bind来设置样式属性。Vue.jsv-bind在处理class和style时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。class属性绑定我们可以为v-bind:class设...

[阅读全文]

Vue.js监听属性本章节，我们将为大家介绍Vue.js监听属性watch，我们可以通过watch来响应数据的变化。以下实例通过使用watch实现计数器：实例<divid="app"><pstyle="font-size:25px;">计数器:{{counter}}</p><button@click="counter+...

[阅读全文]

Vue.js计算属性计算属性关键词:computed。计算属性在处理一些复杂逻辑时是很有用的。可以看下以下反转字符串的例子：实例1<divid="app">{{message.split('').reverse().join('')}}</div>尝试一下?实例1中模板变的很复杂起来，也不容易看懂理解。接下来我们看看使...

[阅读全文]

Vue.js条件与循环条件判断v-if条件判断使用v-if指令：v-if指令在元素和template中使用v-if指令：<divid="app"><pv-if="seen">现在你看到我了</p><templatev-if="ok"><h1>k88.net</h1><p>学的不仅是技术，更是梦想！</p><p>哈哈哈，...

[阅读全文]

Vue.js模板语法Vue.js使用了基于HTML的模版语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。Vue.js的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进DOM的系统。结合响应系统，在应用状态改变时，Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。插值文本数据绑定最常见...

[阅读全文]

Vue.js起步每个Vue应用都需要通过实例化Vue来实现。语法格式如下：varvm=newVue({//选项})接下来让我们通过实例来看下Vue构造器中需要哪些内容：实例<divid="vue_det"><h1>site:{{site}}</h1><h1>url:{{url}}</h1><h1>{{details()...

[阅读全文]

Vue.js目录结构上一章节中我们使用了npm安装项目，我们在IDE（Eclipse、Atom等）中打开该目录，结构如下所示：目录解析目录/文件说明build项目构建(webpack)相关代码config配置目录，包括端口号等。我们初学可以使用默认的。node_modulesnpm加载的项目依赖模块src这里是我们要开...

[阅读全文]

Vue.js安装1、独立版本我们可以在Vue.js的官网上直接下载vue.min.js并用<script>标签引入。下载Vue.js2、使用CDN方法以下推荐国外比较稳定的两个CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。StaticfileCDN（国内）:https://cdn.staticfile.or...

[阅读全文]

Vue.js教程Vue.js（读音/vju?/,类似于view）是一套构建用户界面的渐进式框架。Vue只关注视图层，采用自底向上增量开发的设计。Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。Vue学习起来非常简单，本教程基于Vue2.1.8版本测试。阅读本教程前，您需要了解的知识：HTMLCS...

[阅读全文]

Angular2模板语法前面几个章节我们已经接触了Angular的模板，本文我们将具体介绍Angular的语法使用。模板扮演的是一个视图的角色，简单讲就是展示给用户看的部分。HTML插值表达式模板表达式模板语句绑定语法属性绑定HTML属性、class和style绑定事件绑定使用NgModel进行双向数据绑定内置指令*与...

[阅读全文]

Angular2表单本章节我们将为大家介绍如何使用组件和模板构建一个Angular表单。利用Angular模板，我们可以创建各种类型表单，例如：登录表单，联系人表单，商品详情表单等，而且我们也为这些表单的字段添加数据校验。接下来我们一步步来实现表单的功能。创建项目导入初始化项目。完整的项目创建可以参考：Angular2...

[阅读全文]

Angular2用户输入用户点击链接、按下按钮或者输入文字时，这些用户的交互行为都会触发DOM事件。本章中，我们将学习如何使用Angular事件绑定语法来绑定这些事件。以下Gif图演示了该实例的操作：源代码可以再文章末尾下载。绑定到用户输入事件我们可以使用Angular事件绑定机制来响应任何DOM事件。以下实例将绑定了...

[阅读全文]

Angular2数据显示本章节我们将为大家介绍如何将数据显示到用户界面上，可以使用以下三种方式：通过插值表达式显示组件的属性通过NgFor显示数组型属性通过NgIf实现按条件显示通过插值表达式显示组件的属性要显示组件的属性，插值是最简单的方式，格式为：{{属性名}}。以下代码基于Angular2TypeScript环境...

[阅读全文]

Angular2架构Angular2应用程序应用主要由以下8个部分组成：1、模块(Modules)2、组件(Components)3、模板(Templates)4、元数据(Metadata)5、数据绑定(DataBinding)6、指令(Directives)7、服务(Services)8、依赖注入(Dependenc...

[阅读全文]

Angular2TypeScript环境配置本章节使用的是TypeScript来创建Angular的应用，这也是官方推荐使用的，本教程的实例也将采用TypeScript来编写。TypeScript是一种由微软开发的自由和开源的编程语言，它是JavaScript的一个超集，扩展了JavaScript的语法。如果你不了解T...

[阅读全文]

Angular2JavaScript环境配置本章节我们为大家介绍如何配置Angular2的执行环境。本章节使用的是JavaScript来创建Angular的应用，当然你也可以使用TypeScript和Dart来创建Angular应用。本章节使用到的文件目录结构如下所示:创建配置文件创建目录$mkdirangular-q...

[阅读全文]

Angular2教程Angular2是一款开源JavaScript库，由Google维护，用来协助单一页面应用程序运行。Angular2是Angular1.x的升级版本，性能上得到显著的提高，能很好的支持Web开发组件。Angular2发布于2016年9月份，它是基于ES6来开发的。学习本教程需要的基础知识学习本教程前...

[阅读全文]

AngularJS参考手册AngularJS指令本教程用到的AngularJS指令:指令描述ng-app定义应用程序的根元素。ng-bind绑定HTML元素到应用程序数据ng-bind-html绑定HTML元素的innerHTML到应用程序数据，并移除HTML字符串中危险字符ng-bind-template规定要使用模...

[阅读全文]

AngularJS实例实例您可以在线编辑实例，然后点击按钮查看结果。AngularJS实例<divng-app=""><p>名字:<inputtype="text"ng-model="name"></p><h1>Hello{{name}}</h1></div>尝试一下?AngularJS基础我的第一个AngularJS...

[阅读全文]

AngularJS应用现在是时候创建一个真正的AngularJS单页Web应用（singlepagewebapplication，SPA）了。AngularJS应用实例您已经学习了足够多关于AngularJS的知识，现在可以开始创建您的第一个AngularJS应用程序：我的笔记保存清除剩余字数:100应用程序讲解Ang...

[阅读全文]