Vue基本使用-526互联

一模板语法

插值语法：{{变量，js语法，三目表达式}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>

<div id="box">
    <ul>
        <li>字符串：{{name}}</li>
        <li>数值：{{age}}</li>
        <li>数组：{{list1}}</li>
        <li>对象：{{obj1}}</li>
        <li>字符串：{{link1}}</li>
        <li>运算：{{10+20+30+40}}</li>
        <li>三目运算符：{{10>20?'是':'否'}}</li>
    </ul>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box', // 在box这个div中可以写 vue的语法
        data: {
            name: 'Darker', // 字符串
            age: 18, // 数值
            list1: [1,2,3,4],   // 数组
            obj1: {name: 'Darker', age: 19}, // 对象
            link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
        }
    })
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World 的实现</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        {{s}}
    </div>
    <script>
        let vm = new Vue({
            el: '#box',
            data: {
                s: 'Hello World'
            }
        })
    </script>
</body>
</html>

二指令

1）文本指令

v-text：把字符串内容渲染到标签内部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本指令之v-text</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <p v-text="name"></p>
    </div>
    <script>
        let vm = new Vue({
            el: '#box',
            data: {
                name: 'v-text',
            }
        })
    </script>
</body>
</html>

v-html：把字符串内容渲染到标签内部，如果是标签字符串，会渲染成标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本指令之v-html</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <p v-html="link"></p>
    </div>
    <script>
        let vm = new Vue({
            el: '#box',
            data: {
                link: '<a href="https://www.baidu.com">百度一下 你就知道</a>',
            }
        })
    </script>
</body>
</html>

v-show：控制标签显示与否，通过style的display是否等于none控制，在html中标签仍存在

v-if：控制标签显示与否，直接dom操作，删除/插入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本指令之v-show和v-if</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <p v-show="isShow">v-show</p>
        <p v-if="isIf">v-if</p>
    </div>
    <script>
        let vm = new Vue({
            el: '#box',
            data: {
                isShow:true,
                isIf:true
            }
        })
    </script>
</body>
</html>

2）事件指令

v-on使用：v-on:事件='函数'，可简写为 @事件='函数'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <button v-on:click="Click1">Click1</button>
        <button @click="Click2">Click2</button>
    </div>
    <script>
        let vm = new Vue({
            el: '#box',
            data: {},
            methods: {
                Click1(){
                    alert('Click1')
                },
                Click2(){
                    alert('Click2')
                },
            }
        })
    </script>
</body>
</html>

3）属性指令

v-bind使用：v-bind:属性='变量'，可简写为 :属性='变量'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <style>
        .red {
            color: red;
        }
        .blue {
            color: blue;
        }
    </style>
</head>
<body>
    <div id="box">
        <button @click="Click">点我变色</button>
        <div :class="isActive?'red':'blue'">
<!-- isActive?'red':'blue' 三目运算符，条件?结果1:结果2 若条件成立则为结果1，反之为结果2 -->
            <h1>一个div</h1>
        </div>
    </div>
    <script>
        let vm = new Vue({
            el: '#box',
            data: {
                isActive: true
            },
            methods: {
                Click() {
                    this.isActive = !this.isActive
                },
            }
        })
    </script>
</body>
</html>

三