Vue.js 1.vue的初体验 2.模板语法 3.数据绑定 4.data与el的两种学法 5.数据代理 6.事件处理-优快云博客

本文介绍了Vue.js的基本用法，包括创建Vue实例、模板语法、数据绑定、事件处理等内容。重点讲解了表达式与代码的区别、数据代理及事件修饰符等高级特性。

vue的注意事项

想让vue工作必须要创建一个Vue实例，且要传入一个配置对象；
root容器里的代码依然符合html规范，只不过混入一些特殊的Vue语法；
root容器里的代码被称为Vue模板；
Vue实例和容器时--对应的；
真是开发中只有一个Vue实例并且会配合着组件一起使用；
{{xxx}}中要写js表达式，且xxx可以自动读取data中的所有属性；
一旦data中的数据发生改变，并且页面中用到该书数据的地方也会自动更新；

注意分区：js表达式和js代码（语句）

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方；

a
a+b
demo( 1 )
x==y ? ' a ' : ' b '

js代码（语句）

if( ){ }
for( ){ }

基本模板语法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="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>测试1:{{name}}</h2>
        <h2>测试2:{{num1+num2}}</h2>
        <h2>测试3:{{str?'男':'女'}}</h2>
        <h2>测试4:{{demo()}}</h2>
    </div>
    <script>
        new Vue({
            el: "#root",
            data() {
                return {
                    name: "vue1",
                    num1: 20,
                    num2: 30,
                    str: false
                }
            },
            methods: {
                demo: function () {
                    return "5000"
                }
            },
        })
    </script>
</body>

</html>

基本模板语法2

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

<body>
    <div id="root">
        <h2>测试1:我叫:{{name}}</h2>
        <a v-bind:href="url">测试2:点击进去百度</a></a>
        <h2>测试3:我叫search里面的{{search.name}}</h2>
        <!-- toUpperCase()将字符转化成大写 -->
        <!-- v-bind 可以简写 -->
        <a :href="search.url.toUpperCase()">测试4:点击进去{{search.name}}商城</a>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                name: "张三",
                url: "http://www.baidu.com",
                search: {
                    name: "京东",
                    url: "https://www.jd.com"
                }
            }
        })
    </script>
</body>

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

<body>
    <div id="root">
        <!-- 单项绑定
            数据只能从data流向页面
        -->
        <input type="text" v-bind:value="name">
        <!-- 双向绑定
            数据不仅可以从data流向页面也可以从页面流向data
        -->
        <input type="text" v-model:value="name">
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                name: "jack"
            }
        })
    </script>
</body>

</html>

备注：双向绑定一般都应用在表单元素上如（input select）

v-model：value 可以简写成v-model 因为v-model默认收集的时value

data与le的两种写法

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

<body>
    <div id="root1">
        <h2>叫{{name}}</h2>
    </div>
    <div id="root2">
        <h2>性别：{{sex}}</h2>
    </div>

    <script>
        new Vue({
            // el的第一种写法
            el: "#root1",
            // data第一种写法
            data: {
                name: "张三",
                age: 18
            }
        })

        var vm = new Vue({
            // data第二种写法
            data() {
                return {
                    sex: "男"
                }
            }
        })
        // el的第二种写法
        vm.$mount("#root2")
        console.log(vm);
    </script>
</body>

</html>

Model 是html的数据
ViewModel 是Vue实例
View是被Vue所管理的页面（渲染出来的页面）

DOM Listeners DOM监听
Data Bindings 数据绑定

数据代理 Object.defineProperty("" )

基本案例

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

<body>
    <script>
        var number = 18
        var person = {
            name: "张三",
            sex: "男"
        }
        console.log(person);
        // age 
        // defineProperty() 劫持 getter 和setter 方法 
        Object.defineProperty(person, 'age', {
            get() {
                console.log("读取了");
                return number
            },
            set(value) {
                console.log("set调用le", value);
                // 将获取到的值进行赋值给 number
                number = value
            }
        })
    </script>
</body>

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

<body>
    <script>
        // 数据代理，通过一个对象代理对另一个对象中属性的操作（读/写）
        var obj1 = { x: 100 }
        var obj2 = { y: 200 }
        // 通过 obj2 来代理obj1.x get()读取到obj1里面的x 通过set里面的value 进行定义值在进行赋值
        Object.defineProperty(obj2, "x", {
            // 读取
            get() {
                return obj1.x
            },
            // 调用
            set(value) {
                // 通过获取到的值在进行赋值
                obj1.x = value
            }
        })
    </script>
</body>

</html>

事件处理

v-on:click 简写 @click

v-bind:herf 简写 :herf

事件的基本使用

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

<body>
    <div id="root">
        <h2>{{name}}</h2>
        <button v-on:click="setInfor1">setInfor1</button>
        <button @click="setInfor2(123)">setInfor2</button>
        <button @click="setInfor3">setInfor3</button>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                name: "张三"
            },
            methods: {
                setInfor1() {
                    alert("sss")
                },
                setInfor2(num) {
                    // 必须要使用模板字符串拼接
                    // alert('第二个按钮的点击效果' + num) 
                    alert(`第二个按钮的点击效果${num}`)
                    console.log(this); //指向 Vue
                    console.log(this.name); //张三
                },
                setInfor3: () => {
                    console.log(this); //指向 window
                    console.log(this.name); // 空
                }

            },
        })
    </script>
</body>

</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="../js/vue.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: red;

        }

        ul {
            width: 200px;
            height: 300px;
            overflow: auto;
        }

        li {
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div id="root">
        <!-- 阻止默认事件 -->
        <a v-bind:href="url" @click.prevent="showInfo1">百度一下</a>
        <div class="box" @click="showbox">
            <!-- 阻止事件冒泡 -->
            <button v-on:click.stop="showInfo2">第一个按钮阻止事件冒泡</button></button>
        </div>
        <!-- 只能显示一次 -->
        <button @click.once="showInfo3">第二个按钮只能显示一次</button>
        <!-- capture 事件捕获模式（先触发div的效果） -->
        <div class="box" @click.capture="showbox2">
            <button v-on:click="showInfo4">第一个按钮事件捕获模式</button></button>
        </div>
        <!-- 只有event.target是当前操作的元素才触发事件 -->
        <div class="box" @click.self="showbox3">
            <button v-on:click="showInfo5">第三个按钮self</button></button>
        </div>
        <!-- wheel滚动事件  -->
        <ul @wheel.passive="setInfo6">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                url: "http://baidu.com"
            },
            methods: {
                // 组织默认事件
                showInfo1() {
                    alert("ss")
                },
                // 第二个按钮
                showInfo2() {
                    alert("点击到了第一个按钮")
                },
                // 第一个div盒子
                showbox() {
                    alert("点击到了box盒子")
                },
                // 第三个按钮
                showInfo3() {
                    alert("只能显示一次")
                },
                showInfo4() {
                    alert("事件捕获模式1")
                },
                showbox2() {
                    alert("第二个盒子事件捕获模式")
                },

                showInfo5() {
                    alert("我是第三个按钮")
                },
                showbox3() {
                    alert('我是第三个盒子')
                },
                setInfo6() {
                    for (var i = 0; i < 10000; i++) {
                        console.log("滚啊滚");
                    }
                }
            },
        })
    </script>
</body>

</html>