Vue学习之路第十三篇：v-for指令

v-for指令,看名字想必大家也能猜到其作用,没错,就是用来迭代.遍历的. 1.简单数组的遍历 <body> <divi id="app"> <span v-for="item in list">{{item}} </span> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app&qu…

上一篇我们讲解了两种方式,把Vue对象的数据展示在页面上: 1.插值表达式 2.v-text指令但是如果我们展示的数据包含元素标签或者样式,我们想展示标签或样式所定义的属性作用,该怎么进行渲染,比如展示内容为:<h1>这是一个h1元素内容</h1>.我们先用插值表达式和v-text尝试一下. <body> <div id="app"> <p v-cloak>{{ msg }}</p> <p v-text=&…

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

上一篇说到插值表达式有一个问题: 页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据. 对于这个问题Vue给予了解决办法,看具体事例. <div id="app"> <p v-cloak> {{ msg }} </p> </div> 节点中我们定义了 Vue 的内置属性 “v-cloak” <style type="text/css"> [v-cloak]{ d…

vue学习指南：第十三篇(详细) - Vue的路由第三篇 ( 路由的缓存 )

路由的缓存路由缓存是 Vue组件优化的一个重要方法为什么实现路由缓存? 为了组件间相互切换不会重复加载数据,影响用户体验,我们通常需要将组件的数组实现缓存,当我们点过来,在点的时候会再次发送 ajax,想让它发送之后把数据存起来. 我们需要,当我点击的时候直接出来 <keep-alive> <router-view></router-view> </keep-alive> 步骤一:路由的写法 { path:"/find/nan",…

Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数

1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会. 2.本篇将介绍组件创建期间的4个钩子函数,分别为: ①:beforeCreate,这是我们遇到的第一个生命周期函数,其在实例未被创建出来之前执行.此时Vue实例中的date和methods属性数据还未被初始化. ②:created,其执行的时候,Vue实…

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

1.class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :). 2.先来看一个简单的页面样式内容: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in…

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

前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的eval()函数,其主要是用来计算某个字符串,并执行其中的 JavaScript 代码. 直接上代码(vue.min.js 第一篇有下载链接): <!DOCTYPE html> <html lang="en"> <head> <meta charse…

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

学习准备: ①.顾名思义,“事件修饰符”那么肯定是用来修饰事件,既然和事件有关系,那么肯定和“v-on”指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .prevent:阻止默认事件 .capture:事件捕获 .self:只当事件在该元素本身触发时触发回调 .once:事件只触发一次 1.阻止冒泡页面代码: <div id="app" @click="clickDiv()"> <button @click=&…

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

前面六篇讲解了Vue的一些基础知识,正所谓:学以致用,今天我们将用前六篇的基础知识,来实现类似跑马灯的项目. 学前准备: 需要掌握定时器的两个函数:setInterval和clearInterval以及作用域的概念上代码,大家可以复制下来直接运行看看效果(vue.min.js 第一篇有下载链接): <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8">…

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

v-bind:是Vue提供的用于绑定html属性的指令. html中常见的属性有:id.class.src.title.style等,他们都是以名称/值对的形式出现,如:id="first" 本篇的内容主要是介绍使用v-bind指令动态给这些属性赋值. 话不多说,上代码: <body> <div id="app"> <img v-bind:src="path" style="width: 200px;h…