Vue.js 学习足迹(一)

2023-11-05 09:40
文章标签 javascript 学习 vue js frontend 足迹

本文主要是介绍Vue.js 学习足迹(一)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

      • 安装Vue
      • Vue的相关指令
            • v-text & v-html
            • v-show
            • v-if
            • v-for
            • v-on
            • v-bind
            • v-pre,v-cloak,v-once
      • 全局API
            • Vue.extend
            • Vue.nextTick
            • Vue.set
            • Vue.isdelete
            • Vue.directive
            • Vue.filter
      • 组件与模板 (Vue.components & templates)
            • 全局组件
            • 局部组件
            • 选项模板
            • 标签模板
            • script模板
            • 父组件传递数据给子组件
            • 父组件引用子组件
            • component标签模板
            • Vue.mixin
            • Vue.compile
            • Vue.delimiter

安装Vue

可以在script标签中引入，但是需要在网络环境下
可以访问Vue官网 http://cn.vuejs.org 找到安装，点击开发版本，ctrl+s 保存vue.js文件到项目下

Vue的相关指令

v-text & v-html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0px;padding:0px;}</style></head>
<body><div id="app"><!--把数据插入到app作用域下，需要用插值符号 {{变量}}-->{{ msg }}<h2 v-text="vText"></h2><h2 v-text="vText2"></h2><br><hr><!--此时可以解析标签em和i--><h2 v-html="vHtml"></h2></div><script src="../js/vue.js"></script><script>/**   实例化一个Vue对象*   MVVM:视图模型  M:模型  V:视图  VM:视图模型*   new Vue({*       el:,作用域属性*       data:,数据属性*       computed:,*       methods:,方法属性*   })** */new Vue({//el作用域el:'#app',data:{  //我们请求过来的原始数据 都会放在data中msg:'Hello Vue',vText:'这是v-text,相当于 innerText',vText2:'<em>这是v-text</em><i>相当于 innerText</i>',vHtml:'<em>这是v-html</em>,<i>相当于 innerHTML</i>',}});</script>
</body>
</html>

在这里插入图片描述

.
.
.

v-show
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0px;padding:0px;}</style></head>
<body><div id="app"><h2 v-show="isShow">{{vHtml}} display-none和block的切换</h2></div><script src="../js/vue.js"></script><script>new Vue({el:'#app',data:{isShow:true, //true代表显示，false代表隐藏}});</script></body>
</html>

在这里插入图片描述

.
.
.

v-if
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0px;padding:0px;}</style></head>
<body><div id="app"><h2 v-text="mas"></h2><!--如果isLogin为true则执行第一句，如果为false则执行第二句--><div v-if="isLogin">请输入您的用户名:</div><div v-else="isLogin">请注册</div></div><script src="../js/vue.js"></script><script>new Vue({el:'#app',data:{//指令v-if 移入移除,没有DOM节点,false时不存在页面上// 指令v-else 与 v-if兄弟关系同时使用mas:'v-if',isLogin:false, //true则显示  false则不显示}});</script></body>
</html>

在这里插入图片描述

.
.
.

v-for
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0px;padding:0px;}</style></head>
<body><!--关于for循环--><div id="for"><!--数据驱动，根据数据的多少生成li--><h2 v-text="msg"></h2><ol><li v-for="item in arr">{{ item }}</li></ol><hr><ol><!--这只key值,此处index可自定义且都表示数据下标值--><li v-for="(item,index) in arr":key="index">{{ item }} --> {{ index }}</li></ol><hr><ol><!--key绑定属性对应索引值--><li v-for="(item,index) in users":key="index">姓名: {{ item.name }} 年龄: {{ item.age }}</li></ol><hr><ol><!--对象也有索引值--><li v-for="(value,key,index) in userName":key="index">value: {{ value }},key: {{ key }},index: {{ index }},</li></ol><hr><h2>排序数组从大到小(注意：此处将前面的列子arr也排序了)</h2><ol><li v-for="item in sortArr">{{ item }}</li></ol></div><script src="../js/vue.js"></script><script>//关于for循环new Vue({el:'#for',data:{msg:'v-for',arr:[123,456,789],users:[{name:'越祁',age:18},{name:'越今朝',age:20},{name:'云天河',age:21}],userName:{name:'haha',age:20,hobby:'篮球'}},//computed属性computed:{sortArr:function () {return this.arr.sort(function (a,b) {// return a-b;//从小到大return b-a;//从大到小})}}});</script></body>
</html>

在这里插入图片描述

.
.
.

v-on

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0px;padding:0px;}</style>
</head>
<body><!--关于指令v-on-->
<div id="app2"><li v-text="msg"></li><h1>得分{{ num }}</h1><!--绑定点击事件--><button v-on:click="addition">加分</button><button v-on:click="substraction">减分</button><!--v-on指令的简写 v-on:click='方法名' --》 @click='方法名'--><button @click="addition">加分</button><hr>页面的数据的改变会影响到内存的变化,内存的改变同时会改变页面的num数据<br>双向数据绑定: <em v-text="num"></em><input v-model='num' v-on:keyup.enter="onEnter" value="键盘事件"><input v-on:keyup.13="onEnter" value="键盘13事件">
</div><script src="../js/vue.js"></script><script>//关于指令v-onnew Vue({el:'#app2',data:{msg:'v-on',num:0},//属性methods,是一个对象methods:{addition:function () {this.num++;console.log(this);},substraction:function () {this.num--;console.log(this)},//ES6语法onEnter(){this.num++;}}});
</script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

.
.
.

v-bind

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0px;padding:0px;}.red{background:lightcoral;width:100px;height:100px;}.blue{background-color: lightseagreen;width:100px;height:100px;}</style></head>
<body><div id="app"><h2 v-text="msg"></h2><hr><!--class="red"--><div v-bind:class="r">返回r的值</div><!--对象,key:value--><!--class="blue"--><div :class="{blue:isTrue}">接收判断条件</div><br><!--class="blue"--><div :class="{r:r,blue:blue}">{r:r,blue:blue}绑定对象</div><br><!--class="red blue"--><div :class="[r,b]">绑定数组</div><br><!--class="red"--><div :class="isTrue?'red':'blue'">三目返回值</div><br><!--style="color: yellow; border: 1px solid green; width: 100px; height: 100px; background: lightcoral;--><div :style="styleObj">绑定样式的对象</div><br><!--style="color: black; border: 1px solid red; width: 100px; height: 100px;"--><div :style="{color:color,border:border,width:width,height:height}">绑定data中的属性</div></div><script src="../js/vue.js"></script><script>//指令v-bind 为标签添加自定义属性名 v-bind的简写 :属性名=""//v-bind:class="{对象key:value}"  简写 :class="{对象key:value}new Vue({el:'#app',data:{msg:'v-bind',num:0,r:'red',b:'blue',isTrue:true,blue:true,styleObj:{color:'yellow',border:'1px solid green',width:'100px',height:'100px',background:'lightcoral',},color:'black',border:'1px solid red',width:'100px',height:'100px',}})</script></body>
</html>

在这里插入图片描述

.
.
.

v-pre,v-cloak,v-once

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0px;padding:0px;}</style></head>
<body><div id="app"><h2 v-text="msg"></h2><br><div v-pre="message">{{message}}</div><br><hr><div v-cloak>让这个div不显示，直到项目编译完成才显示</div><br><hr><!--v-once让元素模板数据只渲染一次，之后双向数据绑定也不会改变其值--><h2 v-once>{{message}}</h2><br><input type="text" v-model="message"><br><em>{{message}}</em></div>
<script src="../js/vue.js"></script><script>/**  指令v-pre:加快编译的过程*  指令v-cloak:这个指令保持在元素上直到关联实例结束编译,让该元素不显示，直到项目编译完成才显示***/new Vue({el:'#app',data:{msg:'v-pre,v-cloak,v-once',message:'你好,Vue'}})
</script>
</body>
</html>

在这里插入图片描述

全局API

Vue.extend

用来生成自定义组件的API

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0px;padding:0px;}</style><script src="../js/vue.js"></script>
</head>
<body><!--Vue.extend 就是用来生成组件学Vue就是在不停的使用组件组件:在多处需要用到同一结构的功能需求时，将该功能需求写在一个js文件中供多处引用或者放在网上供他人下载使用--><dream></dream><div id="box"></div><script>//自定义组件let extend = Vue.extend({//只能放一个子节点,不能在h2元素再放同级元素template:'<h2><a :href="url">{{content}}</a></h2>',data(){return {content:'extend',url:'http://baidu.com'}}});new extend().$mount('dream');   //挂载,其实就是将dream自定义的标签替换成自定义组件内的模板new extend().$mount('#box');</script></body>
</html>

在这里插入图片描述

Vue.nextTick

在DOM更新数据完成时立即执行的函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0px;padding:0px;}</style><script src="../js/vue.js"></script>
</head>
<body><!--Vue.nextTick在DOM更新数据完成时立即执行的函数--><div id="app"></div><script>//实例化Vue构造函数let app = new Vue({el:'#app',data(){return {msg:'Hello',}}});//修改数据app.msg = '你好';Vue.nextTick(function () {console.log('DOM更新了');});Vue.nextTick().then(()=>{console.log('DOM更新了')});</script></body>
</html>

在这里插入图片描述

Vue.set

修改双向数据绑定的值，让其修改后再页面和内存中都能同步修改

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0px;padding:0px;}</style><script src="../js/vue.js"></script>
</head>
<body>
<div id="app"><ol><li v-for="item in arr">{{item}}</li><button onclick="modify()">点击修改值</button></ol>
</div><script>let app = new Vue({el:'#app',data(){return {arr:['a','b','c']}}});function modify() {console.log(app.arr);//app.arr[2] = 123 修改的值不会进行双向数据绑定，页面数据不会改变//Vue.set()参数1:要修改的数据的属性,参数2:修改数据的索引值,参数3:要修改的值Vue.set(app.arr,2,'yueqi');}</script>
</body>
</html>

在这里插入图片描述

Vue.isdelete

删除需要删除的数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0px;padding:0px;}</style><script src="../js/vue.js"></script>
</head>
<body>
<div id="app"><ol><li v-for="item in arr">{{item}}</li><button onclick="del()">点击删除数据</button></ol>
</div><script>let app = new Vue({el:'#app',data(){return {arr:['a','b','c']}}});function del() {console.log(app.arr);//通过索引值删除需要删除的数据Vue.delete(app.arr,2);}</script></body>
</html>

在这里插入图片描述

Vue.directive

用以自定义注册指令


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0px;padding:0px;}</style><script src="../js/vue.js"></script>
</head>
<body><!--Vue.directive 自定义指令,注册自定义指令--><div id="app"><h1>{{msg}}</h1><h2>{{num}}</h2><!--eg1 点击事件的注册--><!--<button onclick="add()">点击加分</button>--><!--eg2 点击事件的注册,Vue点击事件需要在构造函数内编写事件方法--><button @click="add">点击加分</button><!--png--><br><hr><!--自定义指令案例--><h2 v-dream="custom">{{msg}}</h2><h2 v-demo="info">{{msg}}</h2><button onclick="unbind()">点击解绑事件</button></div><script>//解绑事件方法function unbind(){app.$destroy();}//自定义指令v-dream,回调函数即自定义指令要做的事,//回调函数 参数1:元素本身, 参数2:返回的对象//pngVue.directive('dream',function (el,bind) {console.log(el);console.log(bind);el.style = 'color:' + bind.value;});//自定义指令v-demoVue.directive('demo',{//事件函数 --> 老外俗称钩子bind: function () {console.log('1.被绑定');},inserted: function (el,bind) {console.log('2.绑定到节点');//绑定到节点后做的事el.style.color = bind.value;},update: function () {console.log('3.组件更新');},componentUpdated: function () {console.log('4.组件更新完成');},unbind: function () {//解绑事件点击后此Vue对象的作用域内的点击事件将失效，对于点击事件将不做响应//pngconsole.log('5.解绑事件')}});let app = new Vue({el:'#app',data:{msg:'Vue.directive',custom:'red',num:0,info:'blue',},methods:{add(){this.num++;}}});//eg1 点击事件的注册// function add() {//     app.num ++;// }</script></body>
</html>

点击加分事件浏览器做出的响应
在这里插入图片描述

在自定义指令API方法中对于两个参数的输出
参数1:el 指代元素本身
参数2:bind 指代返回的对象
在这里插入图片描述

解绑事件点击后，其Vue对象作用域内的点击事件将失去响应
在这里插入图片描述

Vue.filter
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0px;padding:0px;}</style><script src="../js/vue.js"></script>
</head>
<body><div id="app"><h1>{{msg}}</h1><h2>{{text | myFilter}}</h2><input type="text" v-model="text"></div><script>/**   Vue.filter 过滤器*   filters是Vue构造函数的一个属性，*   也可以在全局设置中直接Vue.filter来引用此方法** *///局部设置let app = new Vue({el:'#app',data:{msg:'Vue.filter 过滤器',text:'',},filters:{myFilter:function (value) {//split('a').join('3'),将输入的a全部换成3// return value.split('a').join('3');//将输入的数据倒序显示出来return value.split('').reverse().join('');}}});//在全局中设置 Vue.filter 过滤器new Vue({el:'#app',data:{msg:"Vue.filter 过滤器",text:'',},});//此处的参数value 就是input标签输入的值valueVue.filter('myFilter',function (val) {return '$' + val;})</script></body>
</html>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

组件与模板 (Vue.components & templates)

全局组件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0px;padding:0px;}</style><script src="../js/vue.js"></script>
</head>
<body><div id="app"><hd-nav></hd-nav>   <!--小写--></div><script>/**   全局组件*   组件就像公共样式,可以在任何vue作用域下复用*   组件复用后替换div下的 <hd-nav> 标签* */Vue.component('hdNav',    // 驼峰命名法,对应作用域的同名标签{template: '<h2 style="color:skyblue">全局组件</h2>'});new Vue({el:'#app',});</script></body>
</html>

在这里插入图片描述

局部组件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0px;padding:0px;}</style><script src="../js/vue.js"></script>
</head>
<body><div id="app"><hd-nav></hd-nav></div><br><hd-nav>niha</hd-nav><script>/**   局部组件*   只有在作用域内模板才能被复用** */new Vue({el:"#app",//声明组件components:{hdNav:{template:'<h2 style="color:hotpink">局部组件</h2>'}}});</script></body>
</html>

只有在作用域内的模板标签才会被复用模板
在这里插入图片描述

选项模板
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0px;padding:0px;}</style><script src="../js/vue.js"></script>
</head>
<body><div id="app"></div><script>/**   选项模板*   直接在Vue构造函数内定义模板，给定其作用域模板直接复用替换作用域的元素*   此处 div#app 被复用替代* */new Vue({el:'#app',template:'<h2 style="color:hotpink">选项模板</h2>'});</script></body>
</html>

选项模板
直接在Vue构造函数内定义模板，给定其作用域模板直接复用替换作用域的元素
此处 div#app 被复用替代
在这里插入图片描述

标签模板
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0px;padding:0px;}</style><script src="../js/vue.js"></script>
</head>
<body><div id="app"></div><template id="tpl"><h2 style="color:hotpink">template标签模板</h2></template><script>/**   标签模板*   通过获取标签的id属性将指定标签内的内容作为模板替换*   作用域的 div#app 盒子,标签模板依然存在 标签名template可自定义** */new Vue({el:'#app',template:'#tpl',});</script></body>
</html>

标签模板
通过获取标签的id属性将指定标签内的内容作为模板替换
作用域的 div#app 盒子,标签模板依然存在 标签名template可自定义

在这里插入图片描述

script模板
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0px;padding:0px;}</style><script src="../js/vue.js"></script>
</head>
<body><div id="app"></div><!-- 此处script标签需要下上属性type="text/x-template"用以识别html文档流--><script type="text/x-template" id="tpl"><h2 style="color:hotpink">script标签模板</h2></script><script>/**   script标签模板*   同理标签模板,以script标签存放模板，通过获取id值*   替换作用域元素复用模板** */new Vue({el:'#app',template:'#tpl',})</script></body>
</html>

指定作用域的元素被复用模板替换
script标签模板依然存在body中
在这里插入图片描述

父组件传递数据给子组件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0px;padding:0px;}</style><script src="../js/vue.js"></script>
</head>
<body><div id="app"><!--v-bind:属性名,v-bind:class='' v-bind可简写去除,这里alt是属性名--><!--父组件--><hd-nav :alt="msg" title="商品列表" main-title="主标题"></hd-nav></div><script>/**   component父组件传递数据给子组件*   A用B A就是 父组件*   B被A用 B就是 子组件** */new Vue({el:'#app',data:{msg:'用户点击后此处值改变',} ,components:{hdNav: {template:'<h2>子组件 获取 父组件的数据 - {{title}} - {{mainTitle}} - {{alt}}</h2>',//props 用于接收父组件的数据props:['title','mainTitle','alt']}}});</script></body>
</html>

在这里插入图片描述

父组件引用子组件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0px;padding:0px;}</style><script src="../js/vue.js"></script>
</head>
<body><div id="app"><!--父组件--><hd-nav :alt="msg" title="商品列表" main-title="主标题"></hd-nav></div><script>/**   父组件引用子组件*** */// 声明组件let child = {template:'<em>Child子组件</em>'};let parent = {template:'<h2>父组件 - {{title}} - {{mainTitle}} - {{alt}}' +'<child></child>' +'</h2>',props:['title','mainTitle','alt'],components:{//parent组件引用child组件child:child},};new Vue({el:'#app',data:{msg:'seo123',},components:{//parent组件被引用到作用域hdNav:parent,}});</script></body>
</html>

child组件parent组件引用,child模板出现在parent中
在这里插入图片描述

component标签模板

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0px;padding:0px;}</style><script src="../js/vue.js"></script>
</head>
<body><div id="app"><h2>{{msg}}</h2><!--根据值的不同，显示不同的组件--><component v-bind:is="componentA"></component><component :is="componentB"></component><component :is="componentC"></component><hr><component :is="toggleComponent"></component><button @click="toggle">点击切换component组件</button></div><script>/**   component标签** *///在外部声明组件let componentA = {template:'<h2 style="color:orangered">组件A</h2>',};let componentB = {template:'<h2 style="color:yellowgreen">组件B</h2>',};let componentC = {template:'<h2 style="color:skyblue">组件C</h2>',};new Vue({el:'#app',data:{msg:'component标签',//component标签模板,此处的变量用以在component标签中通过v-bind:is="变量名"指令复用模板componentA:componentA,//可直接简写componentB,componentC,//此处点击事件默认组件componentAtoggleComponent:componentA,arr:[componentA,componentB,componentC,],},components:{//作用同上,此处声明A,B,C的内容A:componentA,B:componentB,C:componentC},methods:{//点击切换组件事件toggle(){//Math.random()返回一个浮点型伪随机数字在0（包括0）和1（不包括）之间//Math.floor()  去除小数点保留整数部分//此公式最终得到随机数0,1,2this.toggleComponent = this.arr[Math.floor(Math.random()*3)]}}});</script></body>
</html>

在这里插入图片描述

Vue.mixin

全局注册一个混入，影响注册之后所有创建的每个 Vue 实例，插件作者可以使用混入向组件注入自定义的行为，不推荐在应用代码中使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0px;padding:0px;}</style><script src="../js/vue.js"></script>
</head>
<body><div id="app"><h2> {{msg}} - {{num}}</h2><input type="button" v-on:click="add" value="Add"></div><script>/**   全局API  Vue.mixin** */let addLog = {updated(){console.log('选项的混入')}};Vue.mixin({updated(){console.log('全局的混入')}});new Vue({el:'#app',data:{msg:'Vue.mixin',num:520,},methods:{add(){this.num++;}},updated(){console.log('原生的钩子updated')},mixins:[addLog]})</script></body>
</html>

全局的混入Vue.mixin 最先执行
选项的混入 mixins:[addLog] 其次执行
原生的钩子updated updated()最后执行

在这里插入图片描述

Vue.compile
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0px;padding:0px;}</style><script src="../js/vue.js"></script>
</head>
<body><div id="app"><div><h2> {{msg}} -- {{num}} </h2><h2> 你好 </h2><h2> {{num}} </h2><h3> {{ msg }}</h3><p>哈哈</p></div></div><script>/**   Vue.compile*       render属性的渲染*** */let res = Vue.compile('<h2>{{num}}</h2>');new Vue({el:'#app',data:{msg:'Vue.mixin',num:520},//渲染替换了作用域内的全部标签render:res.render})</script></body>
</html>

在这里插入图片描述

Vue.delimiter

更改模板渲染语法,重新定义插值符号

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0px;padding:0px;}</style><script src="../js/vue.js"></script>
</head>
<body><div id="app"><h2> {{msg}} -- $%msg> </h2></div><script>console.log( Number(Vue.version.split('.')[0]) );let version = Number(Vue.version.split('.')[0]);if(version === 2){console.log('Vue.JS 是 2.x版本')}else if( version === 1 ){console.log('你使用的版本过低')}else{console.log('你使用的版本有问题，请联系开发者')}//${ES6的变量}new Vue({el:'#app',data:{msg:'version',},//更改模板渲染语法,重新定义插值符号delimiters: ['$%','>']})</script></body>
</html>

在这里插入图片描述

这篇关于Vue.js 学习足迹(一)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/348988。

相关文章

Java实现Excel与HTML互转

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式，广泛用于数据处理和分析，而HTM则是一种用于创建网页的标记语言。虽然两
阅读更多...
vue解决子组件样式覆盖问题scoped deep

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器（/deep/）来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言
阅读更多...
VUE动态绑定class类的三种常用方式及适用场景详解

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式（对象添加：情景一）2.动态添加一个class样式（字符串添加：情
阅读更多...
Node.js 中 http 模块的深度剖析与实战应用小结

Node.js 中 http 模块的深度剖析与实战应用小结

《Node.js中http模块的深度剖析与实战应用小结》本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮... 目录Node.js 中 http 模块的深度剖析与实战应用一、引言二、创建 HTTP 服务器：基石搭建（一
阅读更多...
React实现原生APP切换效果

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用
阅读更多...
使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错：ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.
阅读更多...
vue如何监听对象或者数组某个属性的变化详解

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE
阅读更多...
python解析HTML并提取span标签中的文本

python解析HTML并提取span标签中的文本

《python解析HTML并提取span标签中的文本》在网页开发和数据抓取过程中,我们经常需要从HTML页面中提取信息,尤其是span元素中的文本,span标签是一个行内元素,通常用于包装一小段文本或... 目录一、安装相关依赖二、html 页面结构三、使用 BeautifulSoup javascript
阅读更多...
Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2