随笔分类 - Vue框架（VUE Cli 2 ）
是真的多....好散的知识！！！
摘要：用通俗的语言来说，就是Vue中实例或者组件从创建到消灭中间经过的一系列过程.常用：created和mounted created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些
阅读全文
摘要：在VUE中 想响应式的 改变 data中的元素，直接改是不行的：可以试一下： <div class="app"> <ul> <li v-for="item in info" :key="item">{{item}}</li> </ul> </div> <script> const app = new
阅读全文
摘要：组件的key属性，我们在说组件复用的时候 说过这个 key 属性 ，但是呢 这个key 属性，我们也希望加在v-for 中的： 官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。 因为： 这个其实和Vue的虚拟DOM的Diff算法有关系。这里我们借用React’s diff
阅读全文
摘要：v-show 这个指令 ：v-show的用法和v-if非常相似，也用于决定一个元素是否渲染： v-if和v-show对比： 例子： <script src="js/vue.js"></script> <div class="app"> <button v-if="flag">true</button
阅读全文
摘要：我们打算做一个 账号输入框 点击切换的时候 可以从账号输入框切换到邮箱输入框： <div class="app"> <span v-if="flag"> <label>账号：</label> <input type="text" placeholder="请输入账号："> </span> <span
阅读全文
摘要：这三个指令与JavaScript的条件语句if、else、else if类似 Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件 例如： <div class="app"> <p v-if=true > 你考了{{fraction}}分</p> <!--true 会直接显示--> <p
阅读全文
摘要：v-on 就是事件监听 之前用过 ，复习一下： v-on介绍 作用：绑定事件监听器 缩写：@ 预期：Function | Inline Statement | Object 分别对应 ： 方法、表达式、对象 参数：event 用法就不多说了 直接就: v-on:click="xxxx语句" 或 @c
阅读全文
摘要：以前我们定义一个对象而且往里面放东西都是这样写的： <script> const a = 1; const b = "2"; const obj = { //都是： 键:值 a:a, b:b, c:"xxxx", d:function (){ let a = "123"; alert(a) } }
阅读全文
摘要：什么时候使用const？ 当我们修饰的标识符不希望被别人更改的话（再次赋值），那么我们就可以使用const来修饰属性保证数据的安全性，但是建议： ES6 开发时。优先用const，要改变的变量用let即可。 C/C++ 是用来定义常量的. 使用特点： 1. 当定义的时候 记得一定要去赋值，而且只能赋
阅读全文
摘要：var 和 let 的区别 因为ES5之前 除了 函数方法 其他的都和是没有 作用域 概念的 下面给你来个例子： <div> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</
阅读全文
摘要：之前写的计算属性是这样的： <div id="app"> <p>计算属性返回的值：{{text}}</p> </div> <script> const app = new Vue({ el:"#app", computed:{ text:function (){ return "Hello BiHu
阅读全文
摘要：如果有这么一段代码【两个变量输出 但是之间要加一个空格】： <div class="app"> <p>{{title + " " + name}}</p> </div> <script> const app = new Vue({ el:'.app', data:{ title:"欢迎您：", na
阅读全文
摘要：之前说过 v-bind 这东西可以绑class 那么必然也可以绑定实style 了，而且 也有 对象语法 和 数组语法： 先来对象语法： 因为我们知道 对象语句是 键 - 值 对的，所以呢 我们的键是 style 的属性，值是对应的值即可，值可以是变量也可以是字符串，如果值不是Vue中的变量，值要加
阅读全文
摘要：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .red { color: red; } </style> </head> <body> <script src="js/vue.js"></script>
阅读全文
摘要：请先看 ：https://www.cnblogs.com/bi-hu/p/14920081.html 在看此文章 因为写着写着出疑惑了 其实已经讲过这个，但是他的解析遍历值可以是数组也可以是对象语法，所以就出来了这个问题: 我们先试一下遍历 数组语法 这个比较容易点： <script src="js
阅读全文
摘要：这种写法用的比较少 因为...没必要 多此一举了 【了解即可】 <h2 :class="['active','aabb']">Hello World</h2> 这样的话 因为他是直接带了单引号 所以他的代码会是： <h2 class="active aabb">Hello World</h2> 如果
阅读全文
摘要：因为v-bind可以直接实现 标签属性的值动态化，那么Class作为一个属性，那么： <style> .active{ color:red; } </style> <script src="js/vue.js"></script> <div id="app"> <h2 :class="active"
阅读全文
摘要：v-bind介绍 之前学习Mustache表达式 一般用在标签体中，然而有有些标签的内容是响应式的，就无法用Mustache来解析，例如： ima 和 a标签： <script src="js/vue.js"></script> <div id="app"> <a href="{{baidu}}">
阅读全文
摘要：详解创建Vue实例传入的options【暂时3个】 暂时讲解3个，el 、 data、 和 methods : el: 类型：string | HTMLElement 作用：决定之后Vue实例会管理哪一个DOM。 所以不仅他可以是string来获取dom节点，还可以是js的获取方法，示例： <scr
阅读全文