Vue基础

最新推荐文章于 2024-10-18 17:49:11 发布

未来的事交给未来

最新推荐文章于 2024-10-18 17:49:11 发布

阅读量997

点赞数 19

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_64658652/article/details/140416145

版权

什么是Vue？

Vue是一款用于Vue构建用户界面的 JavaScript 框架，它提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

一.Vue.js入门

1.下载Vue.js

进入下面这个https://unpkg.com/vue@3/dist/vue.global.js网址，如下图所示：

鼠标右击页面，点击另存为

把它存放在自己熟悉的地方，方便使用时引入

vue.global.js是默认的名字，嫌长也可以改为Vue.js

2.入门程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
    <script src="../js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <buttn @click="change">改变h1标签内容</buttn>
    </div>
</body>
<script>
    //从vue中提取createApp函数，这个函数是用来创建vue实例的
    //{ createApp }是一个对象形式，但是只有一个属性，这里的意思就是接收Vue里面的createApp属性
    const { createApp } = Vue;
    //调用createApp函数，创建vue实例
    const app =  createApp({
        data(){
            //date函数中定义的是vue中的数据
            return{
                //页面的数据，是key：value的形式
                //页面想要拿到这个数据可以通过插值语法：{{key}}，就能通过key拿到对应的值value
                //比如我这个页面中的{{msg}}
                msg:"第一个vue程序"
            }
        },
        methods: {
               //这里用来定义页面中的方法
               change(){
                //这里的this指的是app对象
                this.msg = "h1内容改变"
            }
        }
    })
    //挂载app
    app.mount("#app");
</script>
</html>

应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串：

我们这里就是传入的一个css选择器字符串，将vue实例挂载到id为app的盒子上。

vue相比于之前学习的jequery优点之一就在于，vue不用去操作DOM元素，直接改变数据就行，就可以改变页面内容。

二.Vue基本语法：

1.插值语法：

{{msg}}:双大括号标签会被替换为data中 msg 属性的值,例如入门程序中的{{msg}},最后会被替换为data中返回的msg属性的值，即第一个Vue程序。

双大括号中只要填入对应的key就能拿到对应的值value

2.v-bind:

v-bind用于属性绑定：双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind，可以简写为 :

例如：

<img v-bind:src="path">

或者简写为：

<img :src="path">

这样当我们data中的path属性改变，img标签的src属性值就会改变，从而改变图片

我们也可以同时绑定多个属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
    <script src="../js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <div :="moreAttribute">
            <h1>v-bind介绍</h1>
        </div>
    </div>
</body>
<script>
    const { createApp } = Vue;
    const app =  createApp({
        data(){
            return{
                moreAttribute:{
                    id:"b1",
                    class:"box"
                }
            }
        },
        methods: {

        }
    })
    //挂载app
    app.mount("#app");
</script>
</html>

以JavaScript对象的形式来绑定多个属性，

运行检查元素标签可以发现，已经将id和class绑定到了div标签上

3. class与style绑定

数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。因为 class 和 style 都是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。

class绑定：

第一种和v-bind指令一样

<div :class="classname"></div>

通过calssname的值来控制标签的类名，从而控制样式

例如：

<style>
    .red{
        background-color: red;
    }

    .green{
        background-color: green;
    }
</style>

<script>
    const { createApp } = Vue;
    const app =  createApp({
        data(){
            return{
                classname:"red"
            }
        }
    })
    //挂载app
    app.mount("#app");
</script>

当data中的classname中的值变为green，div的背景颜色就会从红色变为绿色。

第二种就是对象形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
    <script src="../js/vue.global.js"></script>
</head>
<style>
    .red{
        background-color: red;
    }

    .green{
        background-color: green;
    }
</style>
<body>
    <div id="app">
        <div :class="{ green:isGreen, red:isRed }">
            <h1>class绑定</h1>
        </div>
    </div>
</body>
<script>
    const { createApp } = Vue;
    const app =  createApp({
        data(){
            return{
                isGreen:false,   
                isRed:true
            }
        }
    })
    //挂载app
    app.mount("#app");
</script>
</html>

样式属性名后面为true，则显示改类样式，如果都为true，那么data中哪个在前面哪个就显示哪个，上面例子中isGreen在前面就显示绿色背景。

第三种是数组形式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
    <script src="../js/vue.global.js"></script>
</head>
<style>
    .red{
        background-color: red;
    }

    .green{
        background-color: green;
    }
</style>
<body>
    <div id="app">
        <div :class="['red','green']">
            <h1>class绑定</h1>
        </div>
    </div>
</body>
<script>
    const { createApp } = Vue;
    const app =  createApp({
        data(){
            return{
                
            }
        },
        methods: {

        }
    })
    //挂载app
    app.mount("#app");
</script>
</html>

如果数组里面的样式设置的是相同的属性，比如上面例子中都是设置背景颜色，那么哪个在前面就显示哪个。也可以在数组中嵌套对象。

style绑定：

:style=”{样式属性名1:变量,样式属性名2:变量2,....}”;

如果样式属性名是background-color这种就要写成:style="{backgroundColor：变量名}"这种形式，

或者也可以给属性名打上单引号，:style="{'background-color'：变量名}"

4.v-text与v-html

v-text只会将内容解释为普通文本，要输出真正的html，需要使用v-html指令。

    <div id="app">
        <p v-text="type"></p>
        <p v-html="type"></p>
    </div>

    data(){
         return{
             type:"<b>你好</b>"
            }
       }

结果：

5.v-if与v-show

v-if：

v-if是条件渲染，如果v-if中的表达式为真，就会在DOM中生成一个元素，反之就会移除一个元素

<div id="app">
        <p v-if="b">你好</p>
</div>

data(){
    return{
         b:true
    }
}

当b的值为true就会生成这个p标签，反之移除

如果想切换多个元素,则可以使用<template>元素当作包装元素,在<template>元素上使用v-if, 就可以进行多个元素的切换

    <div id="app">
        <template v-if="b">
            <p>你好</p>
            <button>按钮</button>
        </template>
    </div>

v-if也可以和v-else以及v-else-if一起使用和Java中类似

v-show：

根据表达式的值来显示或隐藏HTML元素,当v-show表达式的值为false时,元素将被隐藏,v-show不会生成或者移除元素，v-show是通过控制css的display来控制元素是否显示的，当表达式为false，就会将该元素的display的值变为none。

而且v-show不支持 <template>也不可以和v-else以及v-else-if一起使用。

当元素进行频繁显示和隐藏时，建议使用v-show，不会频繁切换建议使用v-if

6.v-for

v-for是列表渲染，v-for 指令的值需要使用 item in items 形式的特殊语法,items是源数据的数组，而 item 是迭代项的别名。

data() {
  return {
    names:["lily","lucy","hanmeimei","lilei"]
  }
}
<ul>
    <li v-for="item in names">
        {{item}}
    </li>
</ul>

结果：

如果想获取下标，就需要写成：

<li v-for="(value,index) in names">
                {{value}}--{{index}}
</li>

结果：

如果需要遍历一个对象所有的属性，

<li v-for="(value,key,index) in user">
                {{value}}--{{key}}---{{index}}
</li>

 data(){
                return{
                    user:{
                        name:"张三",
                        age:18,
                        sex:"男"
                    }
                }
            }

结果：