2020年3月5日
Vue 组件数据存放
摘要： 组件数据存放 组件可以访问Vue实例数据吗? 组件是一个单独功能模块的封装： 这个模块有属于自己的HTML模板，也应该有属性自己的数据data。 组件中的数据是保存在哪里呢？顶层的Vue实例中吗？ 我们先来测试一下，组件中能不能直接访问Vue实例中的data 我们用组件里的message去访问定义在 阅读全文
posted @ 2020-03-05 19:04 懒惰ing 阅读(2577) 评论(0) 推荐(0)
Vue 注册组件
摘要： 注册组件 注册组件的基本步骤 组件的使用分成三个步骤： 创建组件构造器：调用Vue.extend()方法 注册组件：调用Vue.component()方法 使用组件：在Vue实例的作用范围内 我们来看看通过代码如何注册组件 查看运行结果： 和直接使用一个div看起来并没有什么区别。 但是我们可以设想 阅读全文
posted @ 2020-03-05 18:28 懒惰ing 阅读(2837) 评论(0) 推荐(1)
Vue 认识组件化
摘要： 组件化开发 什么是组件化 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。 但如果，我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了 组件化思想 组件化是Vue.js中的 阅读全文
posted @ 2020-03-05 16:32 懒惰ing 阅读(699) 评论(0) 推荐(0)
Vue 表单绑定 v-model
摘要： 表单绑定 表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单 Vue中使用v-model指令来实现表单元素和数据的双向绑定 <div id="app"> <input type="text" v-model="message"> {{message}} </div> <scr 阅读全文
posted @ 2020-03-05 15:49 懒惰ing 阅读(688) 评论(0) 推荐(0)
2020年3月4日
Vue 循环遍历 v-for
摘要： v-for遍历数组 渲染一组数据的时候用 v-for v-for的语法类似于JavaScript中的for循环 格式如下：item in items的形式 我们来看一个简单的案例： 如果在遍历的过程中不需要使用索引值 v-for="movie in movies" 依次从movies中取出movie 阅读全文
posted @ 2020-03-04 15:03 懒惰ing 阅读(16474) 评论(4) 推荐(1)
Vue 条件判断 v-if和v-else
摘要： 条件判断 v-if和v-else <div id="app"> <div v-if="score>=90">优秀</div> <div v-else-if="score>=80">良好</div> <div v-else-if="score>=60">及格</div> <div v-else>不及格 阅读全文
posted @ 2020-03-04 14:38 懒惰ing 阅读(3536) 评论(0) 推荐(0)
Vue 事件监听 v-on
摘要： 事件监听 v-on介绍 在前端开发中，我们需要经常和用于交互。这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等 在Vue中如何监听事件呢？使用v-on指令 作用：绑定事件监听器 缩写：语法糖 @ 预期：Function | Inline Statement | Object 参数 阅读全文
posted @ 2020-03-04 14:33 懒惰ing 阅读(4860) 评论(0) 推荐(0)
Vue 计算属性和侦听器
摘要： 计算属性 computed 特性：当他依赖的值发生变化的时候会重新计算其属性，所以对于任何复杂逻辑，你都应当使用计算属性 对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示 计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 阅读全文
posted @ 2020-03-04 14:10 懒惰ing 阅读(353) 评论(0) 推荐(0)
Vue v-bind
摘要： v-bind基础 用于绑定一个或多个属性值，或者向另一个组件传递 props 值 比如通过Vue实例中的data绑定元素的src和href，代码如下： <div id="app"> <img v-bind:src="imgSrc" alt=""> <a v-bind:href="link">Vuej 阅读全文
posted @ 2020-03-04 13:33 懒惰ing 阅读(388) 评论(0) 推荐(0)
Vue 的插值语法
摘要： 插值表达式的使用 将 data 中的文本数据，插入到HTML中可以通过 Mustache 语法(也就是双大括号),数据是响应式的 <div id="app"> <h2>Hello {{message}}</h2> <h2>{{firstName}} {{lastName}}</h2> <h2>{{n 阅读全文
posted @ 2020-03-04 12:20 懒惰ing 阅读(1118) 评论(0) 推荐(0)