vue学习之路
洋葱小万666
请大家多多支持,本人会持续更新爬虫教程嘞!
展开
-
Vue之自定义指令(对象式)
<div id="root"> <button @click="n++">点击进行自增</button> <input type="text" v-fbind:value="n"> <!-- 自定义的一个fbind指令名 ,注意必须是小写--> </div> <script src="./vue.js"></script> <scrip原创 2022-03-30 22:49:57 · 496 阅读 · 0 评论 -
Vue之自定义指令(函数式)
在directives 对象里面,写自定义指令的名字(element,binding){}这里会接受到两个参数:第一个参数是该指令的dom节点,第二个参数是binding绑定对象,可以拿到data里的value值 <div id="root"> <h1>现在n的大小: <span v-text="n"></span></h1> <h1>n放大十倍 : <span v-big="n">原创 2022-03-30 14:50:07 · 972 阅读 · 0 评论 -
v-once、v-pre指令
v-once指令v-once所在节点在初次动态渲染后,就视为静态内容了以后数据的改变不会硬引起v-once所在结构的更新,可以用于性能优化v-pre指令跳过其所在节点的编译过程可以利用他跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译速度...原创 2022-03-30 14:46:36 · 192 阅读 · 0 评论 -
v-text、v-html、v-cloak指令
v-text指令v-text能直接替换掉 div的内容,不够灵活。如果采用插值表达式即可你随意拼接字符串 。但是v-text不认字符串里的HTML代码。v-html指令v-html支持结构的解析,可以将HTML标签展示出来。 <div id="root"> <div v-text="userName" v-cloak></div> <div v-html="str"></div> </div&g原创 2022-03-29 19:54:15 · 1492 阅读 · 0 评论 -
Vue之表单数据的收集
若 则v-model收集的是value值,用户输入的就是value值若则v-model收集的是value值,且要给标签配置value值若 1.没有配置value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值) 2.配置input框的value属性: (1)v-moel的初始值是费数组,那么收集的就是checked (2)v-model的初始值是数组,那么收集的是value组成的数组备注:v-model的三个修饰符:lazy: 失去焦点再收集数据number原创 2022-03-27 22:30:23 · 1132 阅读 · 0 评论 -
Vue之监测数据的原理
监测数据原理vue会监视data中所有层次的数据。只需要开启deep:true 即可。如何检测对象中数据?通过setter实现数据监视,在 new vue()的时候就要传入监测数据 (就是data里的变量呗)对象中 直接追加属性,vue不承认,不会做响应式处理如果必须为后来添加属性做响应式,使用如下API(1)Vue.set(target,propertyName,value)(2)this.$set(target,propertyName,value)如何监测数组中的原创 2022-03-27 17:01:32 · 1090 阅读 · 0 评论 -
Vue之列表排序--computed与watch两种方法比较
<div id="root"> <h1>使用计算属性</h1> <ul> <input type="text" placeholder="输入关键字进行筛选" v-model="keyWord"> <button @click="sortType=2">年龄升序</button> <button @click="sortType原创 2022-03-26 18:10:15 · 802 阅读 · 0 评论 -
Vue之列表过滤(二)
<div id="root"> <ul> <h2>人员列表</h2> <input type="text" placeholder="输入进行模糊搜索" v-model="keyWord"> <li v-for="(p,index) in filterPersons" :key="p.id"> {{p.name}}-{原创 2022-03-25 22:24:44 · 486 阅读 · 0 评论 -
Vue之列表渲染(一)
<div id="root"> <h2>遍历数组</h2> <ul> <!-- key是特殊的标签属性 --> <li v-for="(p,index) in persons" :key="p.id">{{p.name}}-{{p.age}}</li> </ul> <hr>原创 2022-03-23 22:57:47 · 393 阅读 · 0 评论 -
Vue之条件渲染
<div id="root"> <h1 v-show="false">欢迎来到王者荣耀!!! <!-- v-show其实就是调整display的属性,false表示透明 。元素还在--> </h1> <!-- v-else和v-else-if 他们中间不能被其他东西打断 --> <h1 v-if="n === 1">Angler!!!<原创 2022-03-23 22:51:30 · 624 阅读 · 0 评论 -
Vue之computed(计算属性) VS watch(监视属性)
computed能完成的功能,watch都可以完成watch可以完成的功能,computed不一定完成,例如:watch可以进行异步操作两个重要原则:被Vue直接管理的函数,最好写成普通函数,这样this的指向才是vm本身不被Vue管理的函数(定时器、ajax等回调函数),最好写成箭头函数,这样this才可以指向vm<div id="root"> 姓:<input type="text" v-model="firstName"><br>..原创 2022-03-22 22:29:31 · 192 阅读 · 0 评论 -
Vue之监视属性
<div id="root"> <h1>今天天气是{{info}}</h1> <button @click="changeWeather">点击改变天气</button> </div> <script src="./vue.js"></script> <script> const vm = new Vue({原创 2022-03-22 20:37:37 · 514 阅读 · 2 评论 -
Vue之计算属性案例
要求:需要将已有的两个变量值进行拼接<div id="root"> 姓:<input type="text" v-model="firstName"><br><br> 名:<input type="text" v-model="lastName"><br><br> 全名:<span>{{fullName}}</span> </div>原创 2022-03-21 17:49:05 · 206 阅读 · 0 评论 -
vue之v-on的键盘事件
<script src="./vue.js"></script> <div id="root"> <h1>{{name}}</h1> <h1>{{age}}</h1> <h1>{{skill}}</h1> <!-- <input type="text" placeholder="输入敲回车提示信息" @keyup.sp原创 2022-03-21 13:23:07 · 825 阅读 · 0 评论 -
Vue的数据代理知识点
<script src="./vue.js"><script><script> var number = 19; let person = { name:"黑崎一护", gender:"男" } Object.defineProperty(person,'age',{ //给person对象增添了age属性,并进行设置 value:18, //person对象的age属性不具有枚举性,所以无法通过遍历person的属性获取age值原创 2022-03-21 13:18:34 · 261 阅读 · 0 评论 -
数据的单向、双向绑定
<div id="root"> <!-- 插值表达式 --> <p>hello {{name}}{{age}}</p> <a v-bind:href="url">点击跳转百度</a> v-bind:href可以简写为 :href <a :href="url">点击跳转百度2</a> <inpu.原创 2022-03-21 12:59:33 · 281 阅读 · 0 评论 -
vue的一个简单实例
<div id="root"> <!-- 插值表达式 --> <p>hello {{name}}{{age}}{{skill}}</p> <!--该容器可以用双花括号的方法,直接使用变量值--> </div> <script src="./vue.js"></script> <script> Vue.config..原创 2022-03-21 12:25:42 · 479 阅读 · 0 评论 -
vue环境的简单配置
Vue学习之路--配置基本环境原创 2022-03-21 12:12:08 · 530 阅读 · 0 评论