![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
Ysdo
热爱记录和分享的打工人er
展开
-
Vue使用监听器模拟用户名重复验证
Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> 用户名 : <input id="firstname" typ.原创 2020-05-24 22:24:44 · 641 阅读 · 0 评论 -
vue自定义指令
钩子函数 指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完原创 2020-05-20 17:55:56 · 168 阅读 · 0 评论 -
Vue表单域修饰符
Vue表单域修饰符 1:number: 在用v-model进行双向绑定时,用number修饰符来将值转换成number型数值。 <input v-model.number="age" type="text"> 2:trim: 去掉输入数值两头的空格。(中间的空格无法去掉) <input v-model.trim="name" type="text" > 3:lazy : 将input事件换位change事件。 v-model默认是input事件,原创 2020-05-20 17:07:47 · 235 阅读 · 0 评论 -
vue分支循环结构
(v-if控制元素是否渲染到页面,v-show控制元素是否显示在页面(已经渲染)) <div id="app"> <div v-if='sorce>=90'>优秀</div> <div v-else-if="sorce>=60&&sorce<90">良好</div> <div v-else>不及格</div> <div v-show="flag"&.原创 2020-05-16 17:23:24 · 242 阅读 · 0 评论 -
Vue实现样式绑定
<!--对象绑定--> <style type="text/css"> .active{ border: 1px solid red; width: 100px; height: 100px; } </style> <div id="app"> <div v-bind:class="{active:isactive}">原创 2020-05-16 16:53:46 · 227 阅读 · 0 评论 -
Vue 数据绑定指令
vue基础指定: v-cloak:目的就是防止闪动,Vue加入了延缓响应的指令v-cloak,在与css:[v-cloak] { display: none } 的配合下,可以隐藏未编译 Mustache 的标签直到实例准备完毕,v-cloak属性才会被自动去除,对应的标签也才可见了。 v-pre: 显示原始效果。 v-text="":去除闪动,不用再加{{}}。 v-html="": 带样式 (存在安全问题) v-once: 只编译一次,显示内容后不再具有响应式功能。 案例: <!.原创 2020-05-16 16:32:41 · 346 阅读 · 0 评论 -
Vue 事件绑定
v-on指令用法: <button type="button" v-on:click ="num++">点击</button> v-on 可用@代替 @click=“” 事件函数调用: <button type="button" v-on:click ="handle()">点击</button> 调用函数 <button type="button" v-on:click ="handle">点击</button>直接.原创 2020-05-16 16:32:06 · 2535 阅读 · 0 评论 -
Vue.js Hello Word 入门操作
Vue 入门步骤: 1、提供标签用于填充数据 2、引入vue.js库文件 3.使用vue语法 做功能 4、把Vue提供的数据填充到标签 特殊字符参数分析: <div>{{msg}}</div> //双括号为插值表达式 作用是将数据填充到HTML标签中 支持基本的计算操作如{{1 + 2}} el: '#app', //选择id为app的容器 (元素挂载的位置) data:{ msg: 'Hello Word'//模型数据 (值是一个对象) } hel..原创 2020-05-14 13:25:07 · 362 阅读 · 0 评论