Devil'soul - 博客园

Vue学习之路第十一篇：为页面元素设置class类样式

摘要： 1、class为页面元素的一个属性，通过前面第五篇的内容可知，操作属性需要使用到v-bind指定（也可简写为 :）。 2、先来看一个简单的页面样式内容：里面简单的定义了三个样式类：red、thin、size；接下来我们通过v-bind实现同样的效果。 p标签里我们添加v-bind指令，class里阅读全文

posted @ 2019-01-29 15:10 Devil'soul 阅读(1048) 评论(0) 推荐(0)

Vue学习之路第十篇：简单计算器的实现

摘要：前面九篇讲解了vue的一些基础知识，正所谓：学以致用，今天我们将用前九篇的基础知识，来模拟实现计算器的简单功能，项目价值不高，纯粹是为了加深掌握所学知识。学前准备：需要掌握JavaScript的eval()函数，其主要是用来计算某个字符串，并执行其中的 JavaScript 代码。直接上代码（阅读全文

posted @ 2019-01-27 16:10 Devil'soul 阅读(1756) 评论(0) 推荐(0)

Vue学习之路第九篇：双向数据绑定 v-model指令

摘要： 1、学习准备： ①：双向数据绑定可以简单理解为：后端定义的数据改变，前端页面展示的时候会自动改变，数据通过前端页面修改的时候，后端定义的数据内容也会随之改变。 ②：指令中只有v-model可以实现双向数据绑定。 ③：v-model只能应用在表单元素中，如：input（radio、text、addre 阅读全文

posted @ 2019-01-27 14:53 Devil'soul 阅读(2016) 评论(0) 推荐(0)

Vue学习之路第八篇：事件修饰符

摘要：学习准备： ①、顾名思义，“事件修饰符”那么肯定是用来修饰事件，既然和事件有关系，那么肯定和“v-on”指令（也可简写为：@）有关系了。 ②、事件修饰符有以下几类： .stop：阻止冒泡 .prevent：阻止默认事件 .capture：事件捕获 .self：只当事件在该元素本身触发时触发回调 .o 阅读全文

posted @ 2019-01-27 11:14 Devil'soul 阅读(670) 评论(0) 推荐(0)

Vue学习之路第七篇：跑马灯项目实现

摘要：前面六篇讲解了Vue的一些基础知识，正所谓：学以致用，今天我们将用前六篇的基础知识，来实现类似跑马灯的项目。学前准备：需要掌握定时器的两个函数：setInterval和clearInterval以及作用域的概念上代码，大家可以复制下来直接运行看看效果（vue.min.js 第一篇有下载链接）：阅读全文

posted @ 2019-01-25 16:14 Devil'soul 阅读(882) 评论(0) 推荐(0)

Vue学习之路第六篇：v-on

摘要： v-on指令用来触发页面事件的指令。如上代码，指令书写格式为：v-on:事件名称，不要忘记书写:，等于号后面的内容是Vue对象里声明的方法。在Vue对象里，我们添加了一个新的属性，叫做methods，它用来声明方法对象，其中show即为我们声明的方法对象。运行结果：在Vue中，我们还可以对v 阅读全文

posted @ 2019-01-24 17:32 Devil'soul 阅读(1069) 评论(0) 推荐(0)

Vue学习之路第五篇：v-bind

摘要： v-bind：是Vue提供的用于绑定html属性的指令。 html中常见的属性有：id、class、src、title、style等，他们都是以名称/值对的形式出现，如：id="first" 本篇的内容主要是介绍使用v-bind指令动态给这些属性赋值。话不多说，上代码：代码很简单，主要分为两阅读全文

posted @ 2019-01-24 14:59 Devil'soul 阅读(1572) 评论(7) 推荐(0)

Vue学习之路第四篇：v-html指令

摘要：上一篇我们讲解了两种方式，把Vue对象的数据展示在页面上： 1、插值表达式 2、v-text指令但是如果我们展示的数据包含元素标签或者样式，我们想展示标签或样式所定义的属性作用，该怎么进行渲染，比如展示内容为：<h1>这是一个h1元素内容</h1>。我们先用插值表达式和v-text尝试一下。运行阅读全文

posted @ 2019-01-24 13:56 Devil'soul 阅读(143045) 评论(2) 推荐(5)

Vue学习之路第三篇：插值表达式和v-text的区别

摘要：上一篇说到插值表达式有一个问题：页面频繁刷新或者网速加载很慢的时候，页面会先出现“{{ msg }}”，再一闪而过出现真实的数据。对于这个问题Vue给予了解决办法，看具体事例。节点中我们定义了 Vue 的内置属性 “v-cloak” 这里我们定义了样式：包含属性“v-cloak”的节点默认隐藏阅读全文

posted @ 2019-01-24 10:21 Devil'soul 阅读(6792) 评论(0) 推荐(4)

Vue学习之路第二篇：插值表达式

摘要：要开始写Vue的功能了，是不是很激动呢！开始吧！ 1、首先建立一个html页面，导入Vue js包 1 <script type="text/javascript" src="js/vue.min.js"></script> 2、架包导入之后，我们需要创建一个Vue对象，用来绑定元素节点，从而达到操阅读全文

posted @ 2019-01-23 14:35 Devil'soul 阅读(2102) 评论(0) 推荐(0)