随笔分类 -  Vue.js

vue自定义事件 子组件把数据传出去
摘要：每个 Vue 实例都实现了事件接口(Events interface)，即： 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 1、使用v-on绑定自定义事件 输出结果： 2、使用自定义事件的表单输入组件 输出结果： 阅读全文
posted @ 2017-05-18 13:37 街角小七 阅读(2228) 评论(0) 推荐(0)
vue组件 Prop传递数据
摘要：组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。 prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态。 每次父组件更新时，子组件 阅读全文
posted @ 2017-05-18 11:31 街角小七 阅读(42338) 评论(1) 推荐(2)
Vue 什么是组件
摘要：Vue.js组件 组件的作用：组件是自定义元素，可扩展html元素，封装可复用的代码。 组件的注册一定要在初始化根实例之前，负责组件是不起作用的。 全局组件在初始化实例的时候被使用 局部组件仅在实例/组件作用域中可用 1、组件的注册 2、DOM模板解释说明 当使用 DOM 作为模版时（例如，将 el 阅读全文
posted @ 2017-05-18 10:14 街角小七 阅读(1383) 评论(0) 推荐(0)
vue v-model 表单控件绑定
摘要：v-model 指令在表单控件元素上创建双向数据绑定，下面一一进行示例解释。 1、v-model 双向绑定文本 输出结果： 2、v-model 双向绑定多行文本，与上面的例子相似。 输出结果： 3、v-model 绑定复选框 输出结果：选中为true 不选中则为false 输出结果： 4、v-mod 阅读全文
posted @ 2017-05-17 16:50 街角小七 阅读(17632) 评论(1) 推荐(1)
vue v-on监听事件
摘要：在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码，下面我们就简单聊聊Vue.js中的监听事件是怎么处理的。 在vue.js中监听事件是通过v-on指令来实现的，先看一下简单的监听事件代码。 下面再看看监听方法事件的代码示例 内联处理器方法，内联javaScript语句 阅读全文
posted @ 2017-05-17 16:19 街角小七 阅读(3253) 评论(0) 推荐(0)
vue v-if with v-for
摘要：遍历和条件判断混合使用示例。 输出结果： 阅读全文
posted @ 2017-05-17 15:36 街角小七 阅读(558) 评论(0) 推荐(0)
vue.js计算属性 vs methods
摘要：计算属性：Vue.js 模板内的表达式非常便利，但是缺点就是只能用于简单的运算，如果模板中有太多的逻辑运算会让模板不堪重负且难以维护。恰恰计算属性可以处理复杂的逻辑运算，也就是说对于任何复杂逻辑你都应当使用计算属性。 1、计算属性基础列子 输出结果： 2、计算属性和Methods的比较 Method 阅读全文
posted @ 2017-05-17 13:36 街角小七 阅读(1501) 评论(0) 推荐(0)
vue模板语法
摘要：Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改 阅读全文
posted @ 2017-05-17 10:38 街角小七 阅读(624) 评论(0) 推荐(0)
Vue实例
摘要：1、创建一个vue实例 2、扩展Vue实例，所有的 Vue.js 组件其实都是被扩展的 Vue 实例。 3、方法和属性 显示的结果为：3 当在页面输入数字时可以在控制观看数字的改变 4、实例的生命周期和执行自定义逻辑，当创建一个实例时会经过一系列的初始化工作，配置数据观测(data observer 阅读全文
posted @ 2017-05-16 16:27 街角小七 阅读(238) 评论(0) 推荐(0)
Vue v-on v-model 组合使用
摘要：v-on vue可以使用v-on指令来监听事件，方便与用户进行交互。我们不需要修改DOM中的数据，所有的操作都由Vue来实现，你编写的代码只需要关注底层逻辑。这也是Vue强大的地方之一 v-model 在上面的例子中再添加 v-model指令双向绑定表单输入和应用状态，实现指令之间的组合使用 阅读全文
posted @ 2017-05-16 15:18 街角小七 阅读(2139) 评论(0) 推荐(0)
vue 列表渲染 v-for循环
摘要：v-for循环指令类似与html中C标签的循环，同样可以遍历数组，集合。 1、这里演示一下遍历数组的基本用法，代码如下 结果： 在控制台里，输入 id.array.push({ course: '新课程' })，你会发现列表中添加了一个新课程 2、在 v-for 块中，我们拥有对父作用域属性的完全访 阅读全文
posted @ 2017-05-16 14:50 街角小七 阅读(26200) 评论(0) 推荐(0)
Vue v-if条件渲染
摘要：1、简单的v-if指令，代码如下 在控制台可以改变flag的值。 2、v-else 3、v-else-if 输出结果: 4、用key管理可复用元素 先看看不用key管理可复用元素的代码。Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做，除了使 Vue 变得非常快之外，还有 阅读全文
posted @ 2017-05-16 14:35 街角小七 阅读(124648) 评论(0) 推荐(3)
Vue声明式渲染
摘要：Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM，也就是将模板中的文本数据写进DOM中，使用 {{data}} 的格式写入。此代码都是Vue.js官网上的实例。 1、首先导入Vue.js 2、html和js代码 3、渲染结构： 下面看看将文本数据单向绑定到DOM元素属性 阅读全文
posted @ 2017-05-16 14:10 街角小七 阅读(1408) 评论(0) 推荐(0)