Vue.js学习-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_48942526/article/details/116888352

本文深入介绍了Vue.js，一个流行的渐进式JavaScript框架。Vue的特点在于可以根据需求逐步采用其特性，从小型项目到大型SPA。文中详细阐述了Vue的基础指令如v-once、v-model、v-html等，以及计算属性、监听器、类和样式绑定、条件渲染、列表渲染和事件处理。此外，还展示了如何使用事件修饰符和表单双向绑定。Vue.js因其轻量级、高效和易用性而被广泛应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.js

一、Vue.js的介绍
1.Vue是什么？
主流的渐进式 JavaScript 框架

2. 什么是渐进式？

我们可以简单的理解为，用自己想用或者能用的功能特性，不想用的部分功能可以先不用。Vue不强求你一次性接受并使用它的全部功能特性。
场景一：公司刚开始一个项目，技术人员对Vue的掌握也不足够。那么我们就不能使用Vue了么？当然不是，如果你只是使用Vue做些基础操作，如：页面渲染、表单处理提交功能，那还是非常简单的，成熟技术人员上手也就一两天。完全可以用它去代替jquery。并不需要你去引入其他复杂特性功能。
场景二：我们项目用了Vue，使用的效果也挺好。那么我们想逐渐实现代码组件化，实现代码的复用，或者是基于组件原型的跨项目的代码复用。那么我们就可以引入Vue的components组件特性了。
场景三：项目规模逐渐的变大了，我们可能会逐渐用到前端路由、状态集中管理、并最终实现一个高度工程化的前端项目。这些功能特性我们可以逐步引入，当然不用也可以。

3. 使用它的原因

vue.js 体积小，编码简洁优雅，运行效率高，用户体验好. 无Dom操作，它能提高网站应用程序的开发效率

4. 什么场景下使用它

一般是需要开发单页面应用程序（Single Page Application, 简称:SPA）的时候去用单页面应用程序，如：网易云音乐
https://music.163.com/ 因为 Vue 是渐进式的，Vue
其实可以融入到不同的项目中，即插即用

二、Vue的使用
1. 常用的Vue指令

v-once 一次性插值
v-model 双向绑定
v-html 输出HTML指令
v-bind/省略元素绑定指令
v-on/@ 事件绑定指令
…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <style>
        .red{
            color: red;
        }
        .blue{
            color: blue;
        }
        .blueviolet{
            background-color: blueviolet;

        }
    </style>
</head>
<body>
    <div id="app">
        {{msg}}
        {{num}}
        <hr>
        <h2 v-once>{{num}}</h2>
        <input type="number" v-model="num">
        <hr>
        <h2 v-html="html">{{html}}</h2>
        <input type="text" v-model="html" >
        <hr>
        <h2 v-bind:class="color">颜色</h2>
        <input type="text" v-model="color">
        <hr>
        <h2 :class="backgroundColor">背景颜色</h2>
        <input type="text" v-model="backgroundColor">
        <hr>
        <button v-on:click="click">按钮</button>
        <button @mouseleave="click">按钮</button>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'你好',
                num: 0,
                html:123,
                color:"",
                backgroundColor:""
            },
            methods:{
                click(){
                    alert("你好")
                }
            }

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

运行结果：
在这里插入图片描述
2. 计算属性的使用

计算属性单向绑定

<body>
    <div id="app">
        <h2>{{sum1}}</h2>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                a:10,
                b:1
            },
            computed:{
                sum1(){
                    return this.a+this.b;
                }
            }
        })
    </script>
</body>

计算属性双向绑定

<body>
    <div id="app">
        <h2>{{a}}</h2>
        <h2>{{b}}</h2>
        a：<input type="text" v-model="a">
        <br>
        b：<input type="text" v-model='b'>
        <hr>
        <h3>{{sum}}</h3>
        sum: <input type="text" v-model='sum'>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                a:1,
                b:1
            },
            computed:{
                sum:{
                    set(newVal){
                        this.a=this.b=newVal/2
                    },
                    get(){
                        return (this.a-0)+(this.b-0)
                    }
                }
                
            }
        })
    </script>
</body>

watch监听器
（1）第一种方式：

<body>
    <div id="app">
        <h2>{{num}}</h2>
        <input type="number" v-model="num">
        <h2>{{sum}}</h2>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                num:2
            },
            computed:{
                sum(){
                    return this.num*this.num
                }
            },
            watch:{
                num:function(){
                    console.log(this.num)
                },
                sum:function(){
                    console.log("sum变化")
                }
            }
        })
    </script>
</body>

（2）第二种方式：

<body>
    <div id="app">
        <h2>{{num}}</h2>
        <input type="number" v-model="num">
        <h2>{{sum}}</h2>
    </div>
    <script>
        let str=new Vue({
            el:"#app",
            data:{
                num:2
            },
            computed:{
                sum(){
                    return this.num*this.num
                }
            },
        })
        str.$watch("num",function(){
            console.log("num变化")
        })
    </script>
</body>

Cass与Style绑定v-bind

class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <style>
        .red{
            color: red;
        }
        .blue{
            color: blue;
        }
        .fontSize{
            font-size: 200px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2 class="blue">你好</h2>
        <h3 :class="color">你好</h3>
        <br>
        <span :class="'fontSize'">文字</span>
        <hr>
        <h3 :class="[color,'fontSize']">文字</h3>
        <h3 :class="{red:true}">你好</h3>
        <input type="text" v-model="color">
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                color:'red',
                fontSize:'',
            }
        })
    </script>
</body>
</html>

style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2 :style="{color:'yellow',fontSize:num+'px'}">标题</h2>
        <input type="number" v-model='num'>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                color:'yellow',
                num:200
            }
        })
    </script>
</body>
</html>

条件渲染v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a{
            width: 200px;
            height: 200px;
            background-color: cadetblue;
        }
        .b{
            width: 200px;
            height: 200px;
            background-color: rgb(169, 27, 212);
        }
        .c{
            width: 200px;
            height: 200px;
            background-color: rgb(27, 169, 212);
        }
    </style>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="checkbox" v-model="seen">{{seen}}
        <div class="a" v-if="seen"></div> <!--seen为false时,div完全消失-->
        <div class="b" v-show="seen"></div><!--seen为false时,div中的display属性变为none-->
        <hr>
        <div class="a" v-if="seen">001</div>
        <div class="a" v-else="seen">002</div>
        <hr>
        <input type="checkbox" v-model="bool">{{bool}}
        <div class="c" v-if="bool">aaa</div>
        <div class="c" v-else-if="bool===false">bbb</div>
        <div class="c" v-else>ccc</div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                seen:true,
                bool:true
            }
        })
    </script>
</body>
</html>

列表渲染v-for

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in arr">{{item}}--{{index}}</li>
        </ul>
        <hr>
        <ul>
            <li v-for="(item,index) in arr" v-if="index%2">{{item}}--{{index}}</li>
        </ul>
        <hr>
        <ul>
            <li v-for="(k,value,index) in obj">{{k}}--{{value}}--{{index}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                arr:['a','b','c','d'],
                obj:{
                    a:'一',b:'二',c:'三',d:'四'
                }
            }
        })
    </script>
</body>

运行结果：
在这里插入图片描述
7. 事件处理v-on/@

<body>
    <div id="app">
        <button @click="fn('你好',$event)">按钮</button>
    </div>
    <script>
        new Vue({
            el:"#app",
            methods:{
                fn(msg,e){
                    alert(msg)
                    console.log(e.target)
                }
            }
        })
    </script>
</body>

事件修饰符

（1）stop阻止事件冒泡

		<body>
		    <div id="app">
		        <div @click="fn('冒泡-div',$event)">
		            <button @click="fn('冒泡-button',$event)">按钮</button>
		        </div>
		        <hr>
		        <div @click="fn('阻止冒泡-div',$event)">
		            <button @click.stop="fn('阻止冒泡-button',$event)">按钮</button>
		        </div>
		    </div>
		    <script>
		        new Vue({
		            el:"#app",
		            methods:{
		                fn(msg,e){
		                    console.log(msg)
		                }
		            }
		        })
		    </script>
		</body>

（2）prevent阻止事件默认行为

<body>
    <div id="app">
        <a href="https://www.bukaedu.com" @click="fn('超链接',$event)">布卡</a>
        <hr>
        <a href="https://www.bukaedu.com" @click.prevent="fn('超链接',$event)">布卡</a>
        <hr>
        <a href="https://www.bukaedu.com" @click.prevent.once="fn('超链接',$event)">布卡</a>
    </div>
    <script>
        new Vue({
            el:"#app",
            methods:{
                fn(msg,e){
                    console.log(msg)
                }
            }
        })
    </script>
</body>

按键修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" @keydown.enter="fn()" v-model="msg">
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"123"
            },
            methods:{
                fn(){
                    alert(this.msg)
                }
            }
        })
    </script>
</body>
</html>

表单数据双向绑定

<body>
    <div id="app">
        <input type="text" v-model="a">{{a}}
        <hr>
        <textarea v-model="b"></textarea>{{b}}
        <hr>
        <input type="radio" name="sex" value="0" v-model="c">
        <input type="radio" name="sex" value="1" v-model="c">{{c}}
        <hr>
        <input type="checkbox" name="h" value="11" v-model="d">
        <input type="checkbox" name="h" value="22" v-model="d">
        <input type="checkbox" name="h" value="33" v-model="d">
        <input type="checkbox" name="h" value="44" v-model="d">{{d}}
        <hr>
        <select v-model="e" multiple>
            <option>001</option>
            <option>002</option>
            <option>003</option>
            <option>004</option>
        </select>{{e}}
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                a:'默认值',
                b:'默认值',
                c:0,
                d:['22','33'],
                e:[]
            },
        })
    </script>
</body>