Vue
关注
分享
扫一扫
文章平均质量分 79
白小宇
学识的基础是创造的基础。
展开
-
Vue.js实例学习：列表渲染
一、v-for用数组（1）一个参数（html迭代名） 格式： v-for=”item in items” (item：html迭代名；items：data里的数组名。)<ul id="app"> <li v-for="item in myarr"> {{item.message}} </li></ul><!原创 2018-03-07 22:48:43 · 560 阅读 · 0 评论 -
Vue实战：table组件(带搜索，排序)
效果源码&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &a原创 2019-02-25 18:18:26 · 14964 阅读 · 0 评论 -
Vue实战：获取数据列表展示
这个例子从 Github 的 API 中获取了最新的 Vue.js 提交数据，并且以列表形式将它们展示了出来。你可以轻松地切换 master 和 dev 分支。一、展示二、源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta nam原创 2019-02-25 14:59:35 · 15999 阅读 · 0 评论 -
Vue.js实例学习：获取DOM元素
一、获取DOM元素在Vue中获取DOM元素，我们可以用ref。用法(和React一样)：（1）在组件的DOM部分，任意标签中 写上：ref="xxx"（2）通过组件对象 this.$refs.xxx 获取到元素1、获取HTML标签的DOM例1：&lt;div id="app"&gt;&lt;/div&gt;&lt;script type=原创 2019-02-19 23:51:00 · 17374 阅读 · 0 评论 -
Vue.js实例学习：生命周期
Vue生命周期钩子：beforeCreate、createdbeforeMount、mountedbeforeUpdate、updatedactivated、deactivatedbeforeDestroy、destroyederrorCaptured一、beforeCreate、created&amp;lt;div id=&quot;app&quot;&amp;gt;&amp;lt;原创 2019-02-17 15:55:33 · 769 阅读 · 0 评论 -
Vue.js实例学习：slot
父组件可以给子组件传递数据，但却不能传递DOM节点，为了解决这个问题，slot诞生了。solt是Vue的内置组件，也就是我们俗称的插槽。一、无名插槽例：<style type="text/css"> li { list-style: none; width: 33%; height: 100px; background: yellowGre...原创 2019-02-16 23:14:20 · 598 阅读 · 0 评论 -
Vue.js实例学习：watch与computed
watch：监视单个属性computed：监视多个属性注：v-model是双向绑定数据，但并未将数据与方法挂钩；为了解决这个问题，watch与computed诞生了。一、watchwatch是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。由于watch监视...原创 2019-02-16 18:13:59 · 3325 阅读 · 0 评论 -
Vue.js实例学习：过滤器
一、简介Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值v-bind 表达式过滤器要被添加在 JS 表达式尾部，由“|”符号指示：<!-- 在双花括号中 -->{{ message | myfun }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | fo...原创 2019-02-16 16:00:57 · 611 阅读 · 0 评论 -
Vue实战：简易布局Dome
一、show1、介绍组件：App、MyHeader、Mybody、MyNav、MyMain、MyFooter（App是所有的父组件，Mybody是 MyNav和MyMain 的父组件）数据data：[{name: ‘bty’, age: 12}, {name: ‘张三’, age: 13}, {name: ‘oppen’, age: 14}]传值：将全局数据data传给App...原创 2019-02-16 14:23:29 · 11506 阅读 · 0 评论 -
Vue.js实例学习：Class 与 Style 绑定
#绑定 HTML Class一、对象语法我们可以传给 v-bind:class 一个对象，以动态地切换 class&lt;style type="text/css"&gt;.static{ background: red;}.active{ background: blue; width: 100px;}.test{ background: yello...原创 2018-03-05 00:37:29 · 454 阅读 · 0 评论 -
Vue.js实例学习：条件渲染
一、v-if在 Vue 中， v-if 相当于 if(){} ; v-else 相当于 else{} ; v-else-if相当于elseif(){}v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。 v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。1、v-if、v-else&lt;d...原创 2018-03-06 13:48:37 · 852 阅读 · 0 评论 -
Vue.js实例学习：组件
什么是组件？组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子原创 2018-03-19 14:13:24 · 504 阅读 · 0 评论 -
Vue.js实例学习：表单输入绑定
一、基础用法用 v-model 指令在表单 < input> 及 < textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。 它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 1、 文本这里v-model指令与数据message相绑定 并 实时...原创 2018-03-12 16:45:22 · 733 阅读 · 0 评论 -
Vue.js实例学习：事件处理
一、监听事件可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。（ v-on: 简写为@）&lt;div id="app"&gt; &lt;button @click = "count++"&gt;加 1&lt;/button&gt; &lt;butto原创 2018-03-08 19:53:00 · 1190 阅读 · 0 评论 -
Vue实战：树形组件
一、展示点击粗体能展开节点：点击“+” ，还能插入new stuff节点：还能为没有孩子的节点添加多个子节点，如图为 hello节点添加：二、源码index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta n原创 2019-02-26 11:11:57 · 8915 阅读 · 0 评论