随笔分类 -  Vue

Vue里ref ($refs)用法
摘要：ref 有三种用法： 1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素 2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。 3、如何利用 v-for 和 ref 获取一组数组或者dom 节点 <!DOCTYPE htm 阅读全文
posted @ 2020-05-29 11:41 杵臼 阅读(2054) 评论(0) 推荐(0)
Vue自定义指令 directive
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 阅读全文
posted @ 2020-05-29 09:20 杵臼 阅读(234) 评论(1) 推荐(0)
Vue过滤器 filters
摘要：局部过滤器： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-sc 阅读全文
posted @ 2020-05-29 09:06 杵臼 阅读(128) 评论(0) 推荐(0)
Vue侦听器 watch
摘要：我们发现，与计算属性相比，侦听器并没有优势；也不见得好用，直观上反而比计算属性的使用更繁琐；虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是 阅读全文
posted @ 2020-05-29 03:45 杵臼 阅读(143) 评论(0) 推荐(0)
Vue计算属性 computed
摘要：计算属性 computed 作用：监听数据变化，生成新值（该值不需要在data中定义）。 特性：依赖缓存进行计算，也就是说只有数据发生改变时，才会计算，若数据没有变化，则会直接取出缓存的值。 我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属 阅读全文
posted @ 2020-05-29 01:42 杵臼 阅读(112) 评论(0) 推荐(0)
Vue按键修饰符,鼠标按钮修饰符
摘要：在一些搜索框中，我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。 在原生js或者jQuery中，我们需要判断e.keyCode的值来获取用户所按的键。 按键码 keyCode 实际键值 48到57 0到9 65到90 a到z（A到Z） 112到135 F1 阅读全文
posted @ 2020-05-18 16:13 杵臼 阅读(1073) 评论(2) 推荐(1)
Vue事件修饰符（.stop .capture .self .once .prevent .passive）
摘要：.stop 阻止事件向上(向父级)冒泡 <div id="app"> <main v-on:click="listener($event, 'Outer')"> Outer <section v-on:click="listener($event, 'Middle')"> Middle <!-- . 阅读全文
posted @ 2020-05-18 05:44 杵臼 阅读(520) 评论(0) 推荐(0)
Vue事件处理
摘要：1.监听事件（在 v-on 中使用变量） 监听事件用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>监听事件</title> <scrip 阅读全文
posted @ 2020-05-17 23:03 杵臼 阅读(310) 评论(0) 推荐(0)
Vue其他指令（v-cloak和v-text,v-html,v-pre,v-once）
摘要：1.v-once指令 日常开发中用的很多，只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-on 阅读全文
posted @ 2020-05-12 23:36 杵臼 阅读(233) 评论(0) 推荐(0)
Vue循环渲染（v-for）
摘要：1.v-for基本用法 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-for 指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" 阅读全文
posted @ 2020-05-12 12:50 杵臼 阅读(3405) 评论(0) 推荐(0)
Vue条件渲染（v-if）
摘要：因为 v-if 是一个指令，所以必须将它添加到一个元素上。 在 <template> 元素上使用 v-if 条件渲染分组， <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。 <!DOCTYPE html> <html> <h 阅读全文
posted @ 2020-05-12 05:20 杵臼 阅读(2982) 评论(1) 推荐(1)
Vue绑定事件监听器（v-on）
摘要：<!-- 完整语法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 --> <a @click="doSomething">...</a> <!-- 动态参数的缩写 (2.6.0+) --> <a @[event]="doSomething"> ... 阅读全文
posted @ 2020-05-12 02:34 杵臼 阅读(821) 评论(2) 推荐(0)
Vue绑定数据和元素属性（v-bind）
摘要：v-bind就是用于绑定数据和元素属性的 v-bind后面是：属性名=，v-bind也要有一个简写的方式 就是：（冒号），可以理解是表示绑定这个属性，绑定之后，对应的值要去vue的数据里面找。 <!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 -- 阅读全文
posted @ 2020-05-12 00:22 杵臼 阅读(2142) 评论(0) 推荐(0)
Vue显示隐藏（v-show，v-if）
摘要：1.v-show 直接上示例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-show指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js 阅读全文
posted @ 2020-03-25 10:03 杵臼 阅读(6055) 评论(0) 推荐(0)
Vue内容绑定（v-model）
摘要：v-model演示 v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上或者组件上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。 <!DOCTYPE html> <html> <head> <meta charset="u 阅读全文
posted @ 2020-03-25 02:46 杵臼 阅读(1395) 评论(0) 推荐(0)
认识Vue(摘录自官网)
摘要：1.官网 https://cn.vuejs.org/ 2.Vue.js 是什么 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整 阅读全文
posted @ 2020-03-24 23:55 杵臼 阅读(160) 评论(0) 推荐(0)
搭建Vue脚手架（vue-cli）
摘要：一、那么我们就从最简单的环境搭建开始： 1.安装node.js 从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。 安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。 C:\Us 阅读全文
posted @ 2020-03-21 19:48 杵臼 阅读(481) 评论(0) 推荐(0)