vue基本使用

太过爱你忘了你带给我的痛 2022-11-28 13:26 78阅读 0赞

## 1.引入vue ##

## 2.实例化vue ##

## 3.设置挂载点，并使用初始数据 ##

#### 注意事项 ####

挂载点要使用id选择器  
挂载点不能是ntml或者body标签

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>安装vue</title>
        
        <script src="./node_modules/_vue@2.6.11@vue/dist/vue.js"></script>
    </head>
    <body>
        
        <div id="box">
            
            { { a}}
        </div>
        <script>
            // 2 实例化vue
            new Vue({ 
                el:"#box",//4 连接挂载点
                data:{ //设置连接区域需要用到的变量
                    // eg：设置变量a=10
                    a:10
                },
                methods:{ //设置连接区域要用的方法
                    show(){ 
                        console.log(1)
                    }
                }
            })
        </script>
    </body>
    </html>

## 内容展示 ##

##### 文本插值语法\{ \{ \}\}：可以用来展示单行代码 #####

##### v-text：可以设置文本内容 #####

<div id="box">
            
            <p v-text="Sname"></p>
        </div>
        <script>
            new Vue({ 
                el:"#box",
                data:{ 
                    Sname:"大家好 ，我是小白"
                },
            })
        </script>

##### v-html：可以设置有标签的内容 #####

## 条件判断 ##

v-if ----- v-else-if----v-else

<div id="box">
            
            <p v-if="grade>=90">优秀</p>
            <p v-else-if="grade>=60">及格</p>
            <p v-else>不及格</p>
        </div>
        <script>
            new Vue({ 
                el:"#box",
                data:{ 
                    grade:90
                },
            })
        </script>

#### v-show 判断是否展示 ####

语法 `<p v-show="布尔值或条件语句，只要最后结果为布尔型就能决定是否显示该内容"></p>`

## 事件绑定 v-on：事件名 ##

也可以简化写法@事件名=

<div id="box">
            <p @click="click"></p>
        </div>
        <script>
            new Vue({ 
                el:"#box",
                data:{ 
                    grade:90
                },
                methods:{ //声明函数
                    click(){ 
                        console.log("!")
                    }
                }
            })
        </script>

## 属性绑定 v-bind ##

可以简写为 ：要绑定的属性

<div id="box">
            
            
            <img :src="imgSrc" alt="">
            <button v-on:click="changeImg">换图</button>
        </div>
        <script>
            new Vue({ 
                el:"#box",
                data:{ 
                    imgSrc:"https://t7.baidu.com/it/u=3616242789,1098670747&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1598272087&t=32264db2871c5b3ea043c017d6fd3686"
                },
                methods:{ //声明函数
                    changeImg(){ 
                        this.imgSrc="https://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1598272087&t=0c9e2da02bedf6b40fc60d3989898a04"
                    }
                }
            })
        </script>

## 动态绑定样式：有三种绑定方法 ##

<div id="box">
            
            <div :style="{background:bgColor}"></div>
            
            <div :style="obj"></div>
            
            <div :style="[obj,obj1]"></div>
        </div>
        <script>
            new Vue({ 
                el: "#box",
                data: { 
                    bgColor: "pink",
                    obj: { 
                        background: "pink"
                    },
                    obj1: { 
                        fontSize: "20px"
                    }
                },
            })
        </script>

## 动态更改class属性三种方法 ##

<div id="box">
            
           <p :class="nameClass"></p>
           
           <p :class="{'on':true}">dsad </p>
           
           <p :class="['on','active']"></p>
        </div>
        <script>
            new Vue({ 
                el: "#box",
                data:{ 
                    nameClass:"on"
                }
            })
        </script>

## 列表渲染 v-for ##

<标签名 v-for=“item of 数据源”></标签名>  
在vue里of 和 in 作用是 一样的  
**遍历数组的话第一个变量是每条数据，第二个是对应的下标  
遍历对象 第一个变量是各个属性值，第二个是属性名，第三个是下标（在这里下标值每个键值对看做数组的一条数据）**