Vue入门基础-CSDN博客

本文链接：https://blog.csdn.net/thwr1881/article/details/126078732

Vue是一个渐进式框架，专注于视图层，易于上手，适用于复杂单页应用。其特点包括组件化、轻量级、虚拟DOM、数据绑定和单页面应用。Vue的使用涉及导入库、创建实例和模板渲染，提供了v-if、v-show、v-for等指令用于条件和循环渲染。

摘要由CSDN通过智能技术生成

一、Vue

1、Vue简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2、Vue的特点

（1）、组件化，保留了 react 框架的优点，实现了封装和重用，且组件间可以相互嵌套；

（2）、轻量级，相对于其他框架，Vue学习成本低，简单易上手；

（3）、虚拟 DOM，虚拟DOM 中存在 diff算法，是 cpu 密集型运算，占用内存较少，可以提高运行效率，并压缩运行时体积；

（4）、Vue是一个MVVM框架，数据绑定。数据单项绑定（v-bind），单向指data中的值绑定到视图中，但视图中修改不会影响到data数据；双向绑定（v-model），数据发生变化会驱动视图的更新，视图的更新也会驱动数据的变化；

（5）、单页面应用（SPA）。用户体验好，内容改变时不需要重新加载整个页面，不会进行多个 html 页面间的切换；服务器压力小等。

3、Vue的使用

（1）、传统方式：在html页面中导入vue库

Vue2: <script src=“https://cdn.jsdelivr.net/npm/vue@2.6.14”>
Vue3: <script src=“https://unpkg.com/vue@next”>

（2）、使用架构工具(专业开发)：vue cli(vue脚手架)、vite(新一代的架构工具)

4、使用Vue的基本流程

(1)引入Vue库

(2)创建视图(view)

(3)创建模型(Model)

(4)创建vue实例，将model挂载到View—实现ViewModel

5、模板作用：帮助用户通过数据来驱动视图的渲染

6、模板插值：

6.1、使用"{{ }}"运算将模型中的数据插入到视图中

演示：

    <!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="https://unpkg.com/vue@next"></script>
    </head>
    <body>
        <div id="app">
             <p> {{count}} </p>
             <p> {{2*9}} </p>
             <p> {{ 10 &lt; 5}} </p>
        </div>
        <script>
            const obj={
                data(){
                    return{
                        count:1
                        flag: false
                    }
                },methods:{
                }
            }
           Vue.createApp(obj).mount('#app')
        </script>
    </body>
    </html>

在这里插入图片描述

6.2、插入标签：使用v-html指令

    <!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="https://unpkg.com/vue@next"></script>
    </head>
    <body>
        <div id="app">
             <div v-html="msg"></div>
             <div v-html="info"></div>
        </div>
        <script>
            const obj={
                data(){
                    return{
                        msg:"<font color='red'>西安</font>",
                        info:"<input type='text' name='username'/>",
                    }
                },methods:{

                }
            }
           Vue.createApp(obj).mount('#app')
        </script>
    </body>
    </html>

在这里插入图片描述

6.3、插入文本：使用v-text指令

    <!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="https://unpkg.com/vue@next"></script>
    </head>
    <body>
        <div id="app">
             <div v-text="info"></div>
        </div>
        <script>
            const obj={
                data(){
                    return{
                        info:"<input type='text' name='username'/>",
                    }
                },methods:{

                }
            }
           Vue.createApp(obj).mount('#app')
        </script>
    </body>
    </html>

在这里插入图片描述

需要注意：在vue中使用v-开头的都是Vue指令

7、条件渲染

渲染就是将模型中的数据显示到视图中。条件渲染就是根据表达式的值来决定是显示还是隐藏内容

7.1、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>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
        <div id="app">
             <div v-if="flag">陕西</div>
        </div>
        <script>
            const obj={
                data(){
                    return{
                        flag: true
                    }
                },methods:{

                }
            }
           Vue.createApp(obj).mount('#app')
        </script>
    </body>
    </html>

在这里插入图片描述

7.2、v-show：

    <!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="https://unpkg.com/vue@next"></script>
    </head>
    <body>
        <div id="app">
             <div v-show="show">
            <ul>
                <li>北京</li>
                <li>上海</li>
                <li>广州</li>
            </ul>
            </div>
        </div>
        <script>
            const obj={
                data(){
                    return{
                        show:true
                    }
                },methods:{

                }
            }
           Vue.createApp(obj).mount('#app')
        </script>
    </body>
    </html>

在这里插入图片描述

7.3、v-if和v-show的区别：

A、实现方式不同： v-if底层采用DOM的appendChild方法创建元素添加到页面中v-show是通过CSS的display属性来控制是否显示元素

B、加载性能：v-if快，v-show慢

C、切换开销：v-if的开销大,v-show的开销小

8、循环渲染：通过v-for指令将数组或集合中的数据渲染到视图中

v-for:

演示：

<!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="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
      <div>
        <ul>
            <li v-for="item in arr">
             {{ item }}
            </li>
        </ul>
      </div>
      <hr>
      <ul>
        <li v-for="pro in obj">
           {{ pro }}
        </li>
      </ul>
      <hr>
      <ul>
        <li v-for="item in objArr">
            {{ item.key}}
            {{ item.name}}
            {{ item.loc}}
        </li>
      </ul>
      <hr>
      <ul>
        <li v-for="(item,key,index) in obj">
            {{key}}:{{item}}:{{index}}
        </li>
      </ul>
    </div>

    <script>
        const obj = {
            data(){
                return {
                    arr:[11,22,33,44,55],
                    obj: { no:1001,name:'刘备',sex:'男',age:35},//对象
                    objArr: [
                        {
                            key: 11,
                            name: '市场部',
                            loc: '北京'
                        },
                        {
                            key: 12,
                            name: '财务部',
                            loc: '北京'
                        },
                        {
                            key: 13,
                            name:'研发部',
                            loc: '西安'
                        }
                    ]
                }
            },
            methods:{

            }
        }
        Vue.createApp(obj).mount('#app')
    </script>
</body>
</html>

在这里插入图片描述

9、其他内置指令

9.1、v-bind

<!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="https://unpkg.com/vue@next"></script>
</head>
<style>
    .ok{
        color:red;
        font-size: 25px;
    }
    #d1{
        width: 50px;
        height: 50px;
        background-color: red;
    }
</style>
<body>
    <div id="app">
        <a v-bind:href="link">百度一下</a>
        <br><br>
        <p v-bind:class="{ok:isOk}">西安</p>
    </div>
    <script>
        const obj = {
            data(){
                return {
                link:'http://www.baidu.com',
                isOk:true
            }
            },
            methods:{
                
            }
        Vue.createApp(obj).mount("#app")
    </script>
</body>
</html>

在这里插入图片描述

9.2、v-on：给元素绑定事件

A、绑定一个事件

<!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="https://unpkg.com/vue@next"></script>
</head>
<body>
        <button type="button" v-on:click="myclick">绑定事件</button>
    </div>

    <script>
        const obj = {
            data(){
                return {
                link:'http://www.baidu.com',
                isOk:true
            }
            },
            methods:{
                myclick:()=>{
                    alert("v-on")
                }          
            }     
        }
        Vue.createApp(obj).mount("#app")
    </script>
</body>
</html>

在这里插入图片描述

B、绑定多个事件：

<!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="https://unpkg.com/vue@next"></script>
</head>
<style>
    .ok{
        color:red;
        font-size: 25px;
    }
    #d1{
        width: 50px;
        height: 50px;
        background-color: red;
    }
</style>
<body>
    <div id="app">
        <button type="button" v-on:click="myclick">绑定事件</button>
        <br><br>
        <div id="d1" v-on="{click:clickDiv,mouseover:myOver}"></div> 
    </div>

    <script>
        const obj = {
            data(){
                return {
                link:'http://www.baidu.com',
                isOk:true
            }
            },
            methods:{
                myclick:()=>{
                    alert("v-on")
                },
                clickDiv(){
                   alert('单击了div')
                },
                myOver(){
                    console.log('悬停')
                }
                
            }
            
        }
        Vue.createApp(obj).mount("#app")
    </script>
</body>
</html>

在这里插入图片描述

9.3、v-model：将input的值和模型中的变量进行绑定。实现数据与视图的双向绑定

<!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="https://unpkg.com/vue@next"></script>
<body>
    <div id="app01">
        <p>请选性别</p>
        <div>
            <input type="radio" name="sex" id="" value="男" v-model="gender"/>男
            <input type="radio" name="sex" value="女" v-model="gender"/>女
        </div>
        <br><br>
        <p>你的性别是：{{ gender }}</p>
        <p>毕业院校：</p>
        <div>
            <select name="" id="" v-model="school">
                <option>请选择</option>
                <option value="西安">西安</option>
                <option value="郑州">郑州</option>
                <option value="武汉">武汉</option>
            </select>
        </div>
        <p>你的家乡：{{ school }}</p>
    </div>
    <script>
        const obj = {
            data(){
                return{
                    gender:'',
                    school:''
                }
                
            }
        }
        Vue.createApp(obj).mount("#app01")
    </script>
</body>
</html>

在这里插入图片描述

10、综合案例示例：

<!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="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
       <span>新建任务：</span>
       <input type="text"
       placeholder="请输入任务..."
       v-model="teskText"
       />
       <button v-on:click="addTask">添加</button>
       <br><br>
       <ol>
        <li v-for="(item,index) in todos">
              {{ item }}
              <button v-on:click="remove(index)">删除任务</button>
              <hr/>
        </li>

       </ol>
    </div>
    <script>
       const obj = {
        data(){
            return{
            teskText:'',
            todos:[]
        }
        },
        methods:{
          addTask(){ //添加任务
            if(this.teskText.length==0){ //表示用户未输入信息
                alert('请输入信息')
                return
            }
            this.todos.push(this.teskText) //将新任务添加到数组中
            this.teskText='' //将输入框清空
          },
          remove(){
           this.todos.splice(this.index,1)
          }
        }
       }
       Vue.createApp(obj).mount('#app')
    </script>
</body>
</html>

在这里插入图片描述