Vue框架——基本知识点+示例（1）

最新推荐文章于 2022-08-29 11:17:01 发布
最新推荐文章于 2022-08-29 11:17:01 发布
阅读量420 收藏 1
点赞数
分类专栏： 前端 Vue框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Whuiry/article/details/107901485
版权

03 vue相关问题

第一步：引入框架
< script src=“js/vue.js”></ script>

第二步：body中写入元素
< div id=‘app’>{{msg}}</ div>

第三步：实例化对象
new Vue({
​ el:’#app’ //绑定元素
​ data:{
​ msg:‘Hello Vue!’
​ }
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>体验vue</title>
</head>
<body>
	<!-- 在MVVM中指的是V（view） -->
<div id="app">
<!--    插值表达式：{{数据}}-->
	{{msg}}
	<!-- 绑定父级，子级不再绑定 -->
<!--	<div id="wrap">-->
<!--		{{msg1}}-->
<!--	</div>-->
</div>
<!-- 绑定元素之外，解析不了插值表达式 -->
{{msg}}
<!--    同级可以绑定多次，一般不推荐，后期模块化开发的时候，没有必要-->
    <div id="wrap">
        {{msg1}}
    </div>
</body>
<!--第一步：引入框架-->
<script src="js/vue.js"></script>
<script>
// <!-- Vue开发模式是MVVM   -->
//new Vue代表的是MVVM中的VM

    //实例化对象
    new Vue({
        //绑定的元素，可以是标签名(但不能是html或者body),是类名、id名
        //一般使用的id名，id名唯一可以避免重复绑定。后期开发项目的时候，一般一个模块绑定一次，一般该模块有id名

        //绑定元素
        el:'#app',
        //data数据只能作用在绑定元素内部

        //在vue中代表的是MVVM中的M（model）

        //数据
        data:{
            msg:'hello vue!',
            msg1:'welcome'
        }
    })

    //绑定父级，子级不再绑定
    new Vue({
    	el:'#wrap',
    	data:{
    		msg1:'wrap'
    	}
    })
</script>
<!--vue中，有需求，操作数据-->
</html>

总结：

1.插值表达式:{{数据}}

2.绑定父级，自己不再绑定

3.绑定元素之外，解析不了插值表达式（< div id=‘app’></ div>之外的东东）

4.同级可以绑定多次，一般不推荐，后期模块化开发的时候实现，没有必要

5.< div id=‘app’></ div>在MVVM里指的是V（view）；

new Vue（{}）代表的是MVVM中的VM

6.绑定的元素，可以是标签名（但不能是html或者body），是类名、id名

04插值表达式({变量/函数/表达式})

v-html的优先级比较高，如果有这个的话，div里面的内容就不会显示了，显示的是v-html='变量名’里变量名的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
<!--    <div id="app" v-html="msg">优先级比较高，如果有这个的话，div里面的内容不会显示-->
<!--        插值表达式({变量/函数/表达式})-->
        {{msg}};
        {{1+88}};
        {{add()}};
        {{Math.floor(Math.random())}};
        {{1>2?'true':'false'}}
    </div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        //数据类的放置在data内部
        data:{
            msg:'hello'
        },
    //    方法类的放置在methods内部
        methods:{
            add(){
                return 3;
            }
        }
    })
</script>
</body>
</html>

05 v-cloak

v-cloak保持在元素身上，直到编译结束；
可以解决中间闪烁问题，会出现的中间代码问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
/*<!--v-cloak保持在元素身上，直到编译结束-->*/
    [v-cloak]{
        display: none;
    }
/*    解决了中间的闪烁问题，会出现中间代码的问题*/
</style>
<body>
<div id="app" v-cloak>
    {{msg}}
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'hello'
        }
    })
</script>
</html>

06 v-on：事件名=“方法名”

事件结构： v-on：事件名字=“方法名”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    事件结构：v-on：事件名字="方法名"-->
    <button v-on:click="add()">按钮</button>
    {{num}}
</div>
</body>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            num:0
        },
        methods:{
            add(){
            //    this代表的是new Vue({})实例对象
                this.num++;
                // console.log(this);
            }
        }
    })
</script>
</html>

07 v-on事件

1.事件结构：v-on：事件名字=“方法名”；
2.事件名字：click mouseenter（效率更高一点，mouseover会触发子元素）mouseleave keydown keyup之前的事件在此处仍可以使用；
3.Vue里面没有直接的this代表事件源，通过$event获取，指的是事件对象，相当于之前事件的event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    p{
        background: aqua;
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }
</style>
<body>
<div id="app">
<!--    事件结构：v-on：事件名字=”方法名“-->
<!--    事件名字 click mouseenter（效率更高一点，mouseover会触发子元素） mouseleave keydown keyup之前的事件在此处同样可以使用-->
    <button v-on:click="add()">按钮</button>
<!--    Vue里面没有直接的this代表事件源，通过$event获取，指的是事件对象，相当于之前事件的event-->
    <p v-on:mouseenter="bg($event)"></p>
    {{num}}
</div>

</body>
<script src="js/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            num:0
        },
        methods:{
            add(){
            //    this代表的是new Vue({})实例对象
                this.num++;
            },
            bg(a){
                // $event.target代表的是事件源
                a.target.style.background='red';
                console.log(a.target);
            }
        }
    })
</script>
</html>

08 event（回顾）

event事件对象 和 事件相关的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn">按钮</button>
<!--event事件对象 和 事件相关的信息-->
<script>
    btn.onclick=function(event){
        console.log(event.target);
    }
</script>
</body>
</html>

09 冒泡和默认行为

1.return false既能阻止冒泡又能阻止默认行为
冒泡：触发子级的时候，把父级同样的事件也会触发；
默认行为：a标签的跳转，表单的提交；
2.Vue中：
阻止默认行为 v-on:click.prevent=" ";
阻止冒泡 v-on:事件类型.stop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div>div{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    p{
        width: 50px;
        height: 50px;
        background-color: aquamarine;
    }
</style>
<body>
<!--return false既能阻止冒泡又能阻止默认行为-->
<!--之前的写法-->
<form action="" method="get" onsubmit="return false">
    <input type="text" name="user">
    <input type="submit">
</form>
<a href="06.html" onclick="return false">百度</a>
<!--return false
冒泡：触发子级的时候，把父级同样的事件也会触发
默认行为：a标签的跳转，表单的提交

vue中
阻止默认行为 v-on:click.prevent=""
阻滞冒泡 v-on:事件类型.stop
-->
<div id="app">
    <a href="06.html" v-on:click.prevent="">百度</a>
    <div  v-on:click.stop="change($event)">
<!--        如果第一二条事件不一样就不需要委托了，如果事件是一样的，就可以用父级事件委托-->
        <p v-on:click.stop="change($event)"></p>
        <span>asdfgb</span>
    </div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        methods:{
            change(a){
                console.log(a.target);
            }
        }
    })
</script>
<!--事件委托（事件代理）：利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件
程序中现有的dom节点是由事件的，新添加的dom节点也是有事件的
-->

</html>

10 keydown

keydown:键盘按下的时候触发，限制为某些按键的时候才触发方法
v-on：keydown，键盘直接名字a/b/c键盘码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    keydown键盘按下的时候触发，限制为某些按键的时候才触发方法
    v-on：keydown，键盘直接名字a/b/c/键盘码
-->

<!--    不加$event打印出来的就是undefined-->
    <input type="text" v-on:keydown.up="change()" v-on:keydown.down="change()">
    <input type="text" v-on:keydown="change($event)">
</div>

</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            num:0
        },
        methods:{
            change(a){
            //    a.keycode键盘码
                console.log(a);
            }
        }
    })
</script>
</html>

11 v-once和v-pre

v-once：只渲染一次，后期数据变化也不再渲染；
v-pre：不渲染，以插值表达式的形式表示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--v-once:只渲染一次，后期数据变化也不再渲染
    v-pre：不渲染，以插值表达式的形式表示
-->
<div id="app">
    <button v-on:click="add()">按钮</button>
    <p v-once>once:{{msg}}</p>
    <p v-pre>pre:{{msg}}</p>
    {{msg}}
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:0
        },
        methods:{
            add(){
                // console.log(111);
                this.msg++
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

12 v-model：实现双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--v-model:实现双向数据绑定-->
<div id="app">
    <input type="text" v-model="msg">
    {{msg}}
    <button v-on:click="add()">按钮</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:0
        },
        methods:{
            add(){
                this.msg=this.msg+1;
            }
        }
    })
</script>
</html>

v-model实现双向数据绑定，一个数字变另一个数字也变

13 v-if 和 v-show

1.v-if控制标签是否存在；
2.v-show控制标签显示隐藏；
3.v-if/show=“表达式/变量”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    p{
        width: 100px;
        height: 100px;
        background-color: aquamarine;
    }
    /*消除闪烁*/
    [v-cloak]{
        display: none;
    }
</style>
<body>
<div id="app" v-cloak>
    <button v-on:click="change()">按钮</button>
<!--    v-if控制标签是否存在
        v-show控制标签显示隐藏

        v-if/show=”表达式/变量“
-->
    <p v-if="msg==1">1</p>
    <p v-show="msg==2">2</p>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:1
        },
        methods:{
            change(){
                if (this.msg==1){
                    this.msg=2;
                }else {
                    this.msg=1;
                }
            }
        }
    })
</script>
</body>
</html>

14 v-for循环遍历

v-for循环 item数组元素 index数组下标 list数组；
遍历哪一个标签，就for哪一个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
<!--        v-for循环 item数组元素 index数组下标 list数组
            遍历哪一个标签，就for哪一个标签
-->
        <li v-for="(item,index) in list">
            <h1>{{item.con}}</h1>
            <p>{{item.date}}</p>
            <span v-on:click="del(index)">X</span>
        </li>
    </ul>
</div>
<!--vue项目，首先操作数据-->
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            list:[
                {
                    con:'今日下雨',
                    date:'2020-03-20'
                },
                {
                    con:'今日下雨',
                    date:'2020-04-20'
                },
                {
                    con:'今日下雨',
                    date:'2020-05-20'
                },
                {
                    con:'今日下雨',
                    date:'2020-06-20'
                },
            ]
        },
        methods:{
            del(index){
                console.log(index);
                //splice(要操作的位置，删除标签的数量，插入的元素)
                this.list.splice(index,1);

            }

        }
    })
</script>
</body>
</html>

点击可以删除：
在这里插入图片描述

15 v-bind

如果属性是变量:
1.如果只有一个变量:
v-bind：属性=“变量”

2.如果多个变量:
v-bind：属性="[变量，变量]"

3.如果属性值有的不确定有的确定:
v-bind:属性："{k:v,k:v}" k代表的是属性值
v是true，属性存在，否则不存在
v的值可以是表达式，也可以是变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            margin-top: 10px;
            background-color: lime;
        }
        .current{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <button v-on:click="change()">按钮</button>
<!--        如果属性是变量
            如果只有一个变量
            v-bind：属性=“变量”

            如果多个变量
            v-bind：属性="[变量，变量]"

            如果属性值有的不确定有的确定
            v-bind:属性："{k:v,k:v}" k代表的是属性值
            v是true，属性存在，否则不存在
            v的值可以是表达式，也可以是变量
-->
        <div v-bind:class="{box:true,current:msg==false}"></div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:true
            },
            methods:{
                change(){
                    this.msg=!this.msg;
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

16 发微博

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        list-style: none;
    }
    li{
        background-color: antiquewhite;
    }
</style>
<body>
<div id="app">
    <ul>
        <!--        v-for循环 item数组元素 index数组下标
                    list数组
                    遍历哪一个标签，就for哪一个标签
        -->
        <li v-for="(item,index) in list">
            <h1>{{item.con}}</h1>
            <p>{{item.date}}</p>
            <span v-on:click="del(index)">X</span>
        </li>
    </ul>
    <button v-on:click="add()">发微博</button>
    <textarea name="" id="" cols="30" rows="10" v-model="msg"></textarea>
</div>
<!--vue项目，首先操作数据-->
<script src="js/vue.js"></script>
<script>
    var date = new Date();
    var finaldate=date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日';
    new Vue({
        el:'#app',
        data:{
            list:[
                {
                    con:'今日下雨',
                    date:'2020-03-20'
                },
                {
                    con:'今日下雨',
                    date:'2020-04-20'
                },
                {
                    con:'今日下雨',
                    date:'2020-05-20'
                },
                {
                    con:'今日下雨',
                    date:'2020-06-20'
                },
            ],
            msg:null
        },
        methods:{
            add(){
                // this.list.push(cont.innerHTML);
                // console.log(this.msg);
                this.list.push({con:this.msg,date:finaldate});
                console.log(this.list);
            },
            del(index){
                console.log(index);
                this.list.splice(index,1);

            }

        }
    })
</script>
</body>
</html>

在这里插入图片描述

17 实现tab栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    #wrap>ul{
        overflow: hidden;
    }
    #wrap li{
        float: left;
        border:1px solid red;
    }
    section div{
        width: 169px;
        height: 169px;
        border:1px solid green;
        margin-bottom: 10px;
        font-size: 12px;
    }
    .current{
        background-color: antiquewhite;
    }
</style>
<body>
<div id="wrap">
    <ul>
        <li v-bind:class="{current:index==msg}" v-for="(item,index) in list" v-on:mouseenter="cl(index)">
            {{item.title}}
        </li>
    </ul>
    <section>
        <div v-show="index==msg" v-for="(item,index) in list">
            {{item.con1}}<br>
            {{item.con2}}<br>
            {{item.con3}}<br>
            {{item.con4}}
        </div>
    </section>
</div>

</body>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#wrap',
        data:{
            msg:0,
            list:[
                {
                    title:'公告',
                    con1:'95公益周阿里、腾讯等六家公司同台联合做公益',
                    con2:'淘宝造物节之城市秘密',
                    con3:'聚划算88红包省钱卡',
                    con4: ''
                },
                {
                    title:'规则',
                    con1:'新增《淘宝网汽配行业管理规范》公示通知',
                    con2:'《淘宝网区域零售服务说明》变更公示通知',
                    con3:'《淘宝网票务行业管理规范》变更公示通知',
                    con4:'《淘宝网数字娱乐市场须提供官方授权的商品目录》变更公示通知'
                },
                {
                    title:'论坛',
                    con1:'淘宝618大促报名',
                    con2:'金牌卖家志愿者招募',
                    con3:'618大促报名激励',
                    con4:'运营神器年中大促'
                },
                {
                    title:'安全',
                    con1:'魔豆妈妈公益项目',
                    con2:'让母爱永不打烊！',
                    con3:'卖家注意：风险通报!',
                    con4:'售假获刑又起诉！'
                },
                {
                    title:'公益',
                    con1:'淘宝公益平台正式更名',
                    con2:'益起来商家招募即将截止',
                    con3:'卖家如何设置公益宝贝',
                    con4:'公益机构开店全攻略'
                }
            ]
        },
        methods:{
            cl(index) {
                this.msg=index;
                console.log(this.msg);

            }

        }
    })
</script>
</html>

在这里插入图片描述

Whuiry
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java毕业设计——基于Vue+Node的外卖系统设计与实现(答辩PPT+源代码).zip
05-29
java毕业设计——基于Vue+Node的外卖系统设计与实现(答辩PPT+源代码).zip java毕业设计——基于Vue+Node的外卖系统设计与实现(答辩PPT+源代码).zip java毕业设计——基于Vue+Node的外卖系统设计与实现(答辩PPT+源代码).zip java毕业设计——基于Vue+Node的外卖系统设计与实现(答辩PPT+源代码).zip java毕业设计——基于Vue+Node的外卖系统设计与实现(答辩PPT+源代码).zipjava毕业设计——基于Vue+Node的外卖系统设计与实现(答辩PPT+源代码).zipjava毕业设计——基于Vue+Node的外卖系统设计与实现(答辩PPT+源代码).zip java毕业设计——基于Vue+Node的外卖系统设计与实现(答辩PPT+源代码).zip java毕业设计——基于Vue+Node的外卖系统设计与实现(答辩PPT+源代码).zip java毕业设计——基于Vue+Node的外卖系统设计与实现(答辩PPT+源代码).zip java毕业设计——基于Vue+Node的外卖系统设计与实现(答辩PPT+源代码).
vue其他之“vue常用方法2”
空投在我怀里的博客
03-13 1239
1.相对路径和绝对路径？ 相对路径： “. ./ 代表当前文件的上一级目录 “./” 代表当前文件所在目录 绝对路径：带有网址的就是绝对路径 2.webstorm常用的快捷键？ ctrl+b搜索类在哪里 按f4可以找到相关的类 3.表格2条线变一格？ border-collapse:collapse; 4.table标签里的summary属性是什么意思？ summary="摘要不显示与浏览器，方便阅读器搜索" 5.title属性的作用？ a.title属性规定元素的额外信息，有视觉效果，当鼠标放到文
vue-cli基本框架elementUi+axios+mock.zip_axios_vue_vue elementui_vue-
09-21
vue-cli基本框架elementUi+axios+mock
Vue+路由+导航和传参+示例
最新发布
02-26
Vue+路由+导航和传参+示例 - 本资源是一个Vue的示例，展示了如何用Vue的路由技术实现网页的导航和传参，包括使用动态路由，嵌套路由，导航守卫，元信息等。
VUE前端小例子
03-25
VUE前端写的一个简单资产管理的小例子，里面有简单实现布局的代码。
Vue基础知识总结(二)：进阶篇
程序员阿红的博客
03-30 1418
Vue基础知识总结(二)：进阶篇 1.0 MVVM模式 MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。 MVVM模式将页面,分层了 M 、V、和VM ,解释为： Model: 负责数据存储 View: 负责页面展示 View Model: 负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示 <body> <div id="app"> <!-- View 视图部分 --> <h
浅记录小白学习vue问题
zhanghuahuapoi的博客
08-29 1798
小白学习vue记录的疑问点
vue2笔记（三）组件化开发
luobobei的博客
09-20 735
组件化开发 (来源csdn博主「程序猿玖月柒」) 原文链接：https://blog.csdn.net/weixin_45257157/article/details/113705867 什么是组件化？ 面对复杂问题的处理方式，把问题拆解成很多个能处理的小问题，再将其放在整体中，会发现大的问题也会迎刃而解。 而组件化的思想也类似： 如果我们实现一个页面结构和逻辑非常复杂的页面时，如果全部一起实现会变得非常复杂，而且也不利于后续的维护和迭代功能。 但如果我们这时候把页面分成一个个小的功能块，每个功能块能完成属
div,section,article,aside 区分
War__Tiger的博客
10-18 1313
section：含义是区，块。里面必须包含一个标题，如果一个网页分区比较明确可以使用section。举例：报纸 section不能代替div。在没有明确的区块划分（没有标题）的情况下最好用div，如果用了section的话需要设置样式，最好在section中设置一个div，然后给这个div设置样式以及脚本。最好不要直接在section上设置样式和脚本 section和article可以互相嵌套。article的含义是一篇完整的文章。一篇完整的文章就需要有标题有内容，有结尾，所以当你写的页面包含这些.
Vue-cli 配置代理服务
li_aoqi的博客
10-27 2039
Vue-cli 配置代理服务 方法一： 在vue.config.js中添加如下配置： devServer:{ proxy: "http://localhost:5000" } 说明： 优点：配置简单，请求资源时直接发给前端（8080）即可。 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源） 方法二： 编写vue.config.js配置具体代理规则： module.exports = {
vue3+taro+nutui+pina小程序空白框架
03-25
vue3+taro+nutui+pina小程序空白框架
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架
Vue：过度效果、动画效果、key值、插槽、动态组件、实例的属性
洪布斯的博客
12-11 319
vue过渡效果： transition标签对，用来放置即将要发生动画或过渡效果的标签 默认使用六个类名，设置效果，类名以v-开头 如果需要设置多个效果，需要给transition添加name属性，那么六个类名一律nameValue-开头 /* 设置标签即将显示时的初始位置 */ .v-enter { left: -100%; ...
初学VUE&组件
dream_as_horse的博客
04-25 239
vue router：用来做路由 vuex：用来管理 mvvm：model-view-viewmodel v-for：指令 cdn：内容分发网络 Object.defineProperty(对象名，‘x’，操作对象)：在一个对象上定义或修改新的值 操作对象中的get方法在调用obj.x时会自动执行，set方法在obj.x = 来赋值时会自动执行 特性检测： 检测是否支持圆角和placehold...
tableview插入section 点击事件不能使用_干货 | Vue事件、过渡和制作index页面
weixin_42451196的博客
02-04 194
“最近在学习使用Vue作为前端的框架，本文简单介绍Vue的过渡效果，以及记录制作首页的过程。”Vue事件1方法处理器● 可以用v-on指令监听DOM事件● 类似于内联表达式，事件处理器限制为一个语句● 当一个ViewModel被销毁时，所有的事件处理器都会自动被删除● 有时也需要在内联语句处理器中访问原生DOM事件，可以用特殊变量$event把它传入方法<buttonv-on...
详解 Vue & Vuex 实践
weixin_34223655的博客
01-29 139
详解 Vue & Vuex 实践翻译自Vue + Vuex — Getting started，承接自2017 Vue.js 2快速入门指南，从属于Web 前端入门与工程实践。 随着应用复杂度的增加，我们需要考虑如何进行应用的状态管理，将业务逻辑与界面交互相剥离，详细讨论参考笔者的2016-我的前端之路:工具化与工程化。Vue 为...
vue组件传值的13种方式
热门推荐
dan_seek的博客
10-19 5万+
vue组件传值 不写这篇文章，我自己都不知道我知道的vue组件传值的方式竟然有13种之多，其实静下来想想，常用的也有五六种。 1、父组件传给子组件 在子组件里定义一个props,即props:[‘msg’]，msg可以是对象也可以是基本数据类型 如果你想定义一个默认值，即 props:{msg: {type: String, default: ‘hello world’}}, 需要注意的是这种传值是...
vue实现点击页面侧边导航节点页面滚动到对应section(段落)部分
树上骑个猴的博客
01-22 1657
效果图： index.html(假设该页面要实现点击导航实现滚动功能) <template> <div> <info-line /> <div> <el-row type="flex" justify="center"> <el-col :span="23"> <div class="container-page-main"> &
如何获取网页logo与favicon图标使用
Whuiry的博客
07-12 3646
如何获取网页logo与favicon图标使用 favicon图标介绍： favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,如图红圈的位置， 目前主要的浏览器都支持favicon.ico图标. 一、logo和ico图标获取 1. 直接从其他网页中获取logo： 关于网站图标的简单提取：直接在网址后面加上 /favicon.ico 就可以了 2. 制作ico图标： http://www.bitbug.net/ 二、favicon图标使用 当成功生成f
vue3+typescript知识点
05-15
Vue3+TypeScript 是一种流行的前端开发组合。下面是一些你需要知道的 Vue3+TypeScript 的知识点： 1. 类型声明：TypeScript 为 Vue3 提供了类型声明...以上是 Vue3+TypeScript 的一些基本知识点，希望对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值