Vue的学习使用-个人笔记
菜鸟的日常学习笔记
啃啃香
这个作者很懒,什么都没留下…
展开
-
对下拉框设置必填非必填
思路:对于form表单的字段,展示为下拉框,由于需求,需要实现必填,和非必填两种情况,此时,不要对 进行 动态 :required = ‘isAble’ 绑定,发现是无效的,对该字段所在的 进行动态 :required='isAble’绑定。绑定后,如果必填时,提示信息会很不舒服(纯英文),这时最好在rules里加上该字段的自定义校验。参考:详解element-ui设置下拉选择切换必填和非必填...转载 2021-09-15 00:19:41 · 2371 阅读 · 0 评论 -
正则表达式
var reg = /a/ // 包含a var reg = /^0/ // ^以0开始 var reg = /0$/ // $以0结尾 var reg = /^a$/ // 只能是一个a var reg = /^[a-z]{6,12}$/ //6~12位的小写字母 var reg = /^[a-zA-Z0-9]{6,}$/ //至少6位长度的包含大小写数字的字符串 //特殊字符: \w :等价于[a-zA-Z0-9] \d: 等价于[0-9] .: 匹配除 \n 之..原创 2021-09-15 00:07:26 · 57 阅读 · 0 评论 -
多选框checkbox的实现
总结:实现多选框,需要将所有的选项都应该绑定到一个参数里,且不会产生冲突,所以多选框的参数是个数组 <div id="app" > <!-- 所有选择绑定到一个数组hobbies里,这样就不会选项覆盖, 而是追加到数组 --> <input type="checkbox" value="游戏" v-model='hobbies'>游戏</input></input> <i原创 2021-09-12 21:44:14 · 829 阅读 · 0 评论 -
vue中字符串操作
获取字符串长度:字符串.length字符串截取:字符串.substring(0,1) 方法名全部小写, 包前不包后,从0开始字符串转数字: 字符串 - 0 必须是 - 0, 减其他数字都无法实现字符串转number原创 2021-09-09 23:26:42 · 2405 阅读 · 0 评论 -
v-model原理
<div id="app"> <!-- 总结:v-model是一个语法糖,本质上包含了两个操作 --> <!-- 1. v-bind绑定一个value属性 --> <!-- 2. v-on指令给当前元素绑定input事件 --> <input type="text" v-model="message"></input> <input type...原创 2021-09-07 22:49:28 · 70 阅读 · 0 评论 -
计算属性computed和methods的区别
总结:计算属性本质上是个属性,使用时没有小括号计算属性具有缓存,不发生改变时,重复调用效率更高 <div id="app"> <h1>{{fullName}}</h1> <h1>{{fullName}}</h1> <h1>{{fullName}}</h1> <h1>{{fullName}}</h1> <h1>{{getF原创 2021-08-17 23:47:37 · 76 阅读 · 0 评论 -
v-bind动态绑定class样式使用
总结: class属性用来引入样式代码展示:{{message}}效果图:原创 2021-07-29 00:34:08 · 50 阅读 · 0 评论 -
v-bind指令的学习
先总结:v-bind用于对标签的属性进行动态绑定(即绑定的是一个变量,而不是常量)实际工作中 ’v-bind: ’ 都会被简写为 ‘:’前提: 此标签中有属性可以进行动态绑定,如标签的src属性,标签的href属性代码展示: <div id="app"> <!-- 给<img>标签的src属性动态绑定 --> <img v-bind:src="imgurl"></img> <!-原创 2021-07-28 23:55:24 · 72 阅读 · 0 评论 -
v-pre指令的学习
总结: v-pre指令用于跳过该元素(包含子元素)的编译过程,实际上就是标签里写的是什么就是什么,不会改变代码展示: <div id="app"> <h1>{{message}}</h1> <h1 v-pre>{{message}}</h1> </div> <script src="../vue.min.js"></script> <scri原创 2021-07-28 00:19:04 · 169 阅读 · 0 评论 -
v-text指令学习
总结:v-text可以直接将文本信息展示,缺点是不能进行拼接,不建议使用代码展示: <div id="app"> <h1>{{message}}</h1> <h1 v-text="message"></h1> <!-- 注意:v-text后不能进行拼接,会直接覆盖 --> <h1>{{message}},朋友</h1> &l原创 2021-07-28 00:10:47 · 187 阅读 · 0 评论 -
v-html指令的学习
前提:请求的数据本身就是一个html代码总结:v-html用来将url中的数据以html代码的形式展现到前端页面中代码展示: <div id="app"> <h1>{{url}}</h1> <h1 v-html="url"></h1> </div> <script src="../vue.min.js"></script> <script&原创 2021-07-28 00:01:34 · 223 阅读 · 0 评论 -
v-once指令的学习
总结:v-once指令可以使页面中插入的信息不再发生改变代码展示: <div id="app"> <h1>{{message}}</h1> <h1 v-once>{{message}}</h1> </div> <script src="vue.min.js"></script> <script>原创 2021-07-27 23:40:35 · 71 阅读 · 0 评论