VUE
文章平均质量分 65
黑猫中校
我们都是不断填坑的勇士
展开
-
Vue学习日志:条件渲染(6)
v-if在字符串模板中,如 Handlebars ,我们得像这样写一个条件块:{{#if ok}} Yes{{/if}}在 Vue.js ,我们使用 v-if 指令实现同样的功能:Yes也可以用 v-else 添加一个 “else” 块:YesNo1、template v-if因为 v-if 是一个指令,需要将它添加到一个元素上。但是如果我们想切换多个元素呢原创 2017-11-17 14:25:30 · 225 阅读 · 0 评论 -
Vue学习日志:列表渲染(7)
v-for我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名。1、基本用法 {{ item.message }}var example1 = new Vue({ el: '#example-1', data: {原创 2017-11-17 14:34:39 · 903 阅读 · 0 评论 -
Vue学习日志:事件处理器(8)
监听事件可以用v-on指令监听DOM事件来触发一些javascript代码。例如: 增加 1 这个按钮被点击了 {{ counter }} 次。 var app = new Vue({ el: '#app', data: { counter: 0 } })方法事件处理器许多事件处理的逻辑都很复杂,所以直接把 Jav原创 2017-11-17 15:36:31 · 303 阅读 · 0 评论 -
Vue学习日志:Vue实例(2)
一、创建一个Vue的实例每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的:var vm = new Vue()二、数据和方法当一个 Vue 实例被创建时,它向 Vue 的**响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。var data = {a:1};var vm = n原创 2017-11-15 13:30:41 · 321 阅读 · 0 评论 -
Vue学习日志:初识VUE(1)
一、概念Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。二、简单介绍1、声明式渲染原创 2017-11-14 23:17:03 · 386 阅读 · 0 评论 -
Vue学习日志:模板语法(3)
一、模板语法Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上, Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。原创 2017-11-16 20:00:05 · 436 阅读 · 0 评论 -
Vue学习日志:计算属性(4)
计算属性在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如: {{ message.split('').reverse().join('') }}在这种情况下,模板不再简单和清晰。在实现反向显示 message 之前,你应该确认它。这个问题在你不止一次反向显示 message 的时候变得更加糟原创 2017-11-16 20:50:32 · 294 阅读 · 0 评论 -
Vue学习日志:Class 与 Style 绑定(5)
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易错。因此,在v-bind 用于 class 和 style 时, Vue.js 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。绑定 HTML Class1、对象语法我们可以传给v-bind原创 2017-11-16 22:39:46 · 210 阅读 · 0 评论 -
vue.js2.0实战:搭建开发环境及构建项目
首先搭建node环境,关于node环境搭建我就不详细叙述了,,不过推荐用淘宝镜像,优势在于快快快!DOS命令运行:cnpm install -g vue-cli 新建项目并进入到项目文件当中:原创 2017-12-22 16:55:50 · 320 阅读 · 0 评论