前端-vue基础

发布于：2023-01-09 ⋅ 阅读:(439) ⋅ 点赞:(0)

前端-vue基础

文章目录

一、vue基础

1.vue的模板语法

<!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>
    <!-- CDN引入 二选一即可，但要保证网络畅通-->
    <!-- 开发环境版本 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <!-- 生产环境版本 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
    <!-- 本地引入 -->
    <script src="../vue.js"></script>
</head>

<body>

    <div id="app">
        <!-- 渲染数据的方法：双大括号  {{ }} -->
        {{ message }}
        <br>
        <!-- 双向数据绑定，通过改变视图来渲染不同的数据 -->
        <input type="text" v-model="msg">

    </div>

</body>

<script>

    // 生成vue的实例
    let app = new Vue({
        // 绑定id名为app的标签
        el: "#app",
        // 数据，里面是对象形式的数据
        data : {
            // 属性 ： 属性值
            message : 'hello world',
            msg : 'hello vue'
            
        }
    })


</script>



</html>

2.vue的基本语法

<!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="../vue.js"></script>
    <style>
        .one{
            color: red;
        }

        .two{
            color: blue;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 模板语法不会解析标签 -->
        {{ message }}
        <!-- html,text解析标签与否和JS相同 -->
        <!-- 文本渲染 -->
        <div v-html="message"></div>
        <div v-text="message"></div>

        <!-- v-bind绑定指令 -->
        <div v-bind:title="msg">DOM元素属性绑定的完整写法</div>
        <!-- v-bind可以省略，但是冒号不能省 -->
        <div :title="msg">DOM元素属性绑定的简写</div>

        <!-- 绑定class属性，动态改变元素样式 -->
        <div :class="className1">
            {{shop}}
        </div>
        <div :class="className2">
            {{shop}}
        </div>

    </div>
</body>

<script>

    let app = new Vue({
        el: '#app',
        data: {
            message: '<span>hello world</span>',
            msg : '你指向了这里',
            shop : '水果',
            className1 : 'one',
            className2 : 'two'
        }
    })




</script>


</html>

3.绑定样式

<!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="../vue.js"></script>
    <style>
        .one {
            color: red;
        }

        .two {
            color: blue;
        }
    </style>
</head>

<body>

    <div id="app">
        <!-- 使用对象语法来绑定样式 -->
        <!-- 直接绑定数据里面的一个对象，动态切换class -->
        <div :class="{one:oneActive,two:twoActive}">
            1.{{ msg }}
        </div>

        <!-- 使用三目运算符绑定样式 -->
        <div :class="userId==1?className1:className2">
            2.{{ msg }}
        </div>

        <!-- 了解：使用内联直接绑定样式 -->
        <div :style="{color:colorValue,fontSize:fontSizeValue}">
            3.{{ msg }}
        </div>


    </div>

</body>

<script>

    let app = new Vue({
        el: '#app',
        data: {
            userId: 2,
            oneActive: false,
            twoActive: true,
            msg: 'DOM元素的样式绑定',
            className1: 'one',
            className2: 'two',
            colorValue: 'green',
            fontSizeValue: '50px'
        }
    })




</script>




</html>

4.条件渲染

<!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="../vue.js"></script>
</head>
<body>
    
    <div id="app">

        <!-- 条件渲染:指令v-if，整个流程要紧挨着，中间不可以有别的代码，否则程序识别不出来 -->
        <div v-if="num==1">A</div>
        <div v-else-if="num==2">B</div>
        <div v-else-if="num==3">C</div>
        <div v-else-if="num==4">D</div>
        <div v-else="num==5">E</div>


        <!-- 元素显示和隐藏 -->
        <!-- v-if可以控制元素显示或隐藏 -->
        <div v-if="isShow">这里是v-if</div>
        <!-- v-show也可以实现隐藏显示 -->
        <div v-show="isShow">这里是v-show</div>

        <!-- v-if和v-show的区别 -->
        <!-- 
            1.v-if是真正的条件渲染，有很高的切换开销，适用于条件不太容易改变的时候，也就是切换的不频繁
            2.v-show是简单的基于CSS进行切换，有很高的初始渲染开销，适用于频繁的切换
         -->




    </div>

</body>

<script>

    let app = new Vue({
        el : '#app',
        data : {
            num : 4,
            // 改变布尔值可以控制元素显示隐藏
            isShow : true
        }
    })




</script>



</html>

5.事件处理

<!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="../vue.js"></script>
</head>

<body>

    <div id="app">
        <!-- v-on用绑定事件 -->
        <button v-on:click="point">求点击</button>
        <br><br>
        <!-- 点击事件的简写  v-on:替换成@ -->
        <button @click="point">点击事件的简写</button>
        <br><br><br>
        <!-- 页面刷新时div的初始值是10，每点击一次加号div的值加5，每点击一次减号div的值减3，当div的值不足3时，div的值为0 -->
        <button @click="add(5)">+</button>
        <button @click="reduce(3)">-</button>
        <br>
        <div>
            {{ num }}
        </div>

    </div>

</body>

<script>

    let app = new Vue({
        el: '#app',
        data: {
            num: 10
        },
        // 写函数的区域
        methods: {

            point() {
                alert('你点击了按钮')
            },

            add(value) {
                this.num += value
            },

            reduce(value) {

                if (this.num <= value) {
                    this.num = 0
                } else {
                    this.num -= value
                }

            }

        },
    })


</script>



</html>

6.循环遍历指令

<!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="../vue.js"></script>
</head>

<body>
    <div id="app">

        <!-- 循环遍历指令依赖于v-for，可以遍历数组或对象 -->
        <p v-for="(value,key,index) in student">
            <!-- 遍历后，value表示属性值，key表示属性，index表示索引值 -->
            {{ index + 1 }},{{ key }},{{ value }}

        </p>
        <!-- index,key都是可选参数，如果不需要可以省略 -->
        <p v-for="value in student">
            {{ value  }}
        </p>

        <br><br><br>
        <!-- 遍历数组，index是可选参数,不需要可以省略 -->
        <div v-for="(item,index) in userArr">
            {{ item.userId }},{{ item.userName }},{{ item.userSex }}
        </div>


    </div>
</body>

<script>

    let app = new Vue({
        el: '#app',
        data: {
            student : {
                name : '张三',
                age : 18,
                sex : '男'
            },
            userArr : [
                {
                    userId : 1,
                    userName : '小明',
                    userSex : '男'
                },
                {
                    userId : 2,
                    userName : '小红',
                    userSex : '女'
                },
                {
                    userId : 3,
                    userName : '小丽',
                    userSex : '女'
                }
            ]
        }
    })



</script>

</html>

7.计算属性

<!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="../vue.js"></script>
</head>
<body>
    
    <div id="app">

        <p>当前num的值是 {{ num }}  → 函数方法</p>
        <div>当前num的值是 {{ msg }} → 计算属性方法 </div>
        <button @click="change">改变num的值</button>

    </div>

</body>

<script>

    let app = new Vue({

        el : '#app',
        data : {
            num : 1
        },
        methods: {
            change(){
                this.num = Math.floor(Math.random() * 2)
                console.log('调用函数：' + this.num)
            }
        },
        // 计算属性的区域
        computed: {
            
            msg(){
                console.log('调用计算属性：' + this.num)
                return this.num % 2 == 0 ? '偶数' : '奇数'
            }

        },

        // 计算属性与函数的区别：
        // 函数的调用，只要触发就会执行，不管值是否发生改变
        // 计算属性的调用，只在值发生改变的情况下才会调用，如果值没有变化就不会调用对应的方法，这样的程序会更节省资源

    })


</script>


</html>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布