VUE-入门笔记1绑定事件监听器。事件类型由参数指定。 .stop - 调用 event.stopPropagation

·前言

本篇vue入门文章，使用CDN的方式进行实例演练。

1、el (选项/DOM) 、 data（选项/数据）的使用

app.js

//实例化vue对象
new Vue({
    el: '#vue-app',//element 要操作的DOM对象 只在用 new 创建实例时生效
    data() { //data本身是一个函数，返回的是一个对象
        return {
            name: 'yaobinggt',
            age: '27岁'
        }
    }
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="vue-app">
        <!-- {{}} : 模版的语法糖 -->
        <p>我的名字叫：{{name}}</p>
        <p>我的年龄是：{{age}}</p>
    </div>
</body>
<script src="app.js"></script>
</html>

2、methods 方法

//实例化vue对象
new Vue({
    el: '#vue-app',//element 要操作的DOM对象 只在用 new 创建实例时生效
    data() { //data本身是一个函数，返回的是一个对象
        return {
            name: 'yaobinggt',
            age: '27岁'
        }
    },
    methods: { //methods属性是定义方法的主要区域，在此属性中，可以定义各种自定义函数名的方法以及参数
        // greet: function () {
        //     return 'Good morning' + this.name;
        // }
        greet(time) { //ES6写法 //传参形参
            //return 'Good morning ' + this.name;
            return `${time} 好 ${this.name}`; //ES6
        },
        haveLunch(time) {
            return `${time}打过篮球了吗？`
        }
    }
})
//html
//<p>{{ greet('早晨de') }}</p> "早晨de 好 yaobinggt"
//<p>{{ haveLunch('昨天') }}</p> "昨天打过篮球了吗？"

3、v-bind v-html （绑定）指令

v-bind 可以缩写 :
v-html不能缩写
只要以 v- 开头的就是指令

data() { //data本身是一个函数，返回的是一个对象
        return {
            name: 'yaobinggt',
            age: '27岁',
            website: 'https://wwww.baidu.com',
            websiteTage: '<a href="https://www.baidu.com">百度网</a>'
        }
},

<p><a v-bind:href="website">百度</a></p> <!-- 属性绑定 -->
<p v-html="websiteTage"></p>
<p><input type="text" :value="name"></p>

4、v-on 事件绑定、事件修饰符

v-on简写 @
绑定事件监听器。事件类型由参数指定。
事件修饰符：
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .capture - 添加事件侦听器时使用 capture 模式。
- .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
- .left - (2.2.0) 只当点击鼠标左键时触发。
- .right - (2.2.0) 只当点击鼠标右键时触发。
- .middle - (2.2.0) 只当点击鼠标中键时触发。
- .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

//实例化vue对象
new Vue({
    el: '#vue-app',//element 要操作的DOM对象 只在用 new 创建实例时生效
    data() { //data本身是一个函数，返回的是一个对象
        return {
            age: 28,
            x: 0,
            y: 0
        }
    },
    methods: { //methods属性是定义方法的主要区域
        add(inc) {
            this.age += inc;
        },
        subtract(dec) {
            this.age -= dec;
        },
        updateXY(e) {
            this.x = e.offsetX;
            this.y = e.offsetY;
        },
        headleClick() {
            alert('hello');
        }
    }
})

<div id="vue-app">
    <h1>Events</h1>
    <!-- <button v-on:click="add"> add a year</button>
    <button @click="subtract">subtract a year</button> -->
    <button v-on:click.once="add(1)"> add 1 year</button> <!-- .once - 只触发一次回调 -->
    <button @click="subtract(1)">subtract 1 year</button>
    <button v-on:dblclick="add(10)"> add 10 year</button>
    <button @dblclick="subtract(10)">subtract 10 year</button>
    <p>我的年龄是：{{age}}</p>

    <!-- mousemove event 鼠标移动事件 -->
    <div id="canvas" @mousemove="updateXY">{{x}},{{y}}</div>

    <!-- 事件修饰符 -->
    <p><a @click.prevent="headleClick" href="http://www.baidu.com">baidu</a></p> <!-- .prevent  阻止默认事件 -->
</div>

5、键盘事件

keyup keydown
.enter 键盘事件事件修饰符 (按回车键就会触发)
.alt.enter 事件修饰符 (按alt+回车键就会触发)

methods: { //methods属性是定义方法的主要区域
        logName() {
            console.log('正在输入名字···')
        },
        logAge() {
            console.log('正在输入年龄')
        }
    }

<div id="vue-app">
    <h1>Events</h1>
    <label>姓名</label>
    <input type="text" @keyup.enter="logName" /><!-- .enter 键盘事件 事件修饰符 (按回车键就会触发) -->
    <label>年龄</label>
    <input type="text" @keydown.alt.enter="logAge" /><!-- .alt.enter 事件修饰符 (按alt+回车键就会触发) -->
</div>

6、v-model 双向数据绑定

在表单控件或者组件上创建双向绑定
.lazy 懒加载加了它不会实时改变数据只有鼠标焦点离开了才回进行渲染
.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤

new Vue({
    el: '#vue-app',//element 要操作的DOM对象 只在用 new 创建实例时生效
    data() { //data本身是一个函数，返回的是一个对象
        return {
            name: 'yaobinggt',
            age: 28
        }
    },
    methods: { //methods属性是定义方法的主要区域

    }
})

<div id="vue-app">
    <h1>双向数据绑定 （input / select / textarea）</h1>
    <!-- 双向数据绑定 一定是可以进行输入和输出的地方 -->
    <label>姓名</label>
    <input type="text" v-model.lazy="name" /><!-- .lazy 懒加载 加了它不会实时改变数据 只有鼠标焦点离开了才回进行渲染 -->
    <span>您输入的名字是：{{ name }}</span>
    <p></p>
    <label>年龄</label>
    <input type="text" v-model="age" />
    <span>您输入的年龄是：{{ age }}</span>
</div>

7、ref

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件
ref并不会被使用到数据绑定，而是应用到通过标记到元素里面，获取到对应的元素对象和一整个容器

methods: { //methods属性是定义方法的主要区域
    getName() {
        //console.log(this.$refs.name.value);
        this.name = this.$refs.name.value;
    },
    getAge() {
        this.age = this.$refs.age.value;
    }
}

<div id="vue-app">
    <h1>双向数据绑定 （input / select / textarea）</h1>
    <!-- ref并不会被使用到数据绑定，而是应用到通过标记到元素里面，获取到对应的元素对象和一整个容器 -->
    <label>姓名</label>
    <input type="text" ref="name" @keyup.enter="getName" />
    <span>您输入的名字是：{{ name }}</span>
    <p></p>
    <label>年龄</label>
    <input type="text" ref="age" @keyup="getAge" />
    <span>您输入的年龄是：{{ age }}</span>
</div>

8、watch 监听属性

不建议使用watch 因为他会持续监听你的状态，用来调试还是不错的
类型：{ [key: string]: string | Function | Object | Array }
详细：

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。

watch: {
    name(val, oldVal) {
        console.log(val, oldVal)
    }
}

<div id="vue-app">
    <h1>双向数据绑定 （input / select / textarea）</h1>
    <!-- ref并不会被使用到数据绑定，而是应用到通过标记到元素里面，获取到对应的元素对象和一整个容器 -->
    <label>姓名</label>
    <input type="text" ref="name" @keyup.enter="getName" />
    <span>您输入的名字是：{{ name }}</span>
    <p></p>
    <label>年龄</label>
    <input type="text" ref="age" @keyup="getAge" />
    <span>您输入的年龄是：{{ age }}</span>
</div>

9、computed 计算属性

只用在当前的属性发生变化之后才会被触发（比如样式计算，还有搜索等等会被经常使用）
methods 里面一个发生变化两个都会做触发
computed 计算属性要注意的是每个方法里面一定要有return 返回值只会调整已经变化的

new Vue({
    el: '#vue-app',//element 要操作的DOM对象 只在用 new 创建实例时生效
    data() { //data本身是一个函数，返回的是一个对象
        return {
            a: 0,
            b: 0,
            age: 28
        }
    },
    methods: { //methods属性是定义方法的主要区域
        // addToA() {
        //     console.log('addToA');
        //     return this.a + this.age;
        // },
        // addToB() {
        //     console.log('addToB'); //methods 里面一个发生变化 两个都会做触发
        //     return this.b + this.age;
        // }
    },
    computed: { //computed 计算属性要注意的是 每个方法里面一定要有return 返回值  只会调整已经变化的
        addToA() {
            console.log('addToA');
            return this.a + this.age;
        },
        addToB() {
            console.log('addToB'); 
            return this.b + this.age;
        }
    }
})

<div id="vue-app">
    <h1>computed 计算属性</h1>
    <!-- 计算属性和方法很相像 -->

    <!-- methods -->
    <button @click="a++"> Add to A</button>
    <button @click="b++"> Add to B</button>
    <p>A: {{ a }}</p>
    <p>B: {{ b }}</p>

    <!-- methods -->
    <!-- <p>Age + A = {{addToA()}}</p>
    <p>Age + B = {{addToB()}}</p> -->
    <!-- computed -->
    <p>Age + A = {{addToA}}</p><!-- 计算属性在调用时不用加()  -->
    <p>Age + B = {{addToB}}</p>
</div>

10、动态样式绑定

样式变化率高，建议使用动态样式绑定

//实例化vue对象
new Vue({
    el: '#vue-app',//element 要操作的DOM对象 只在用 new 创建实例时生效
    data() { //data本身是一个函数，返回的是一个对象
        return {
            yaoChangeColor: false,
            yaoChangeLength: false
        }
    },
    methods: { //methods属性是定义方法的主要区域

    },
    computed: { //computed 计算属性要注意的是 每个方法里面一定要有return 返回值  只会调整已经变化的
        compClasses() {
            return {
                changeColor: this.yaoChangeColor,
                changeLength: this.yaoChangeLength
            }
        }
    }
})

<div id="vue-app">
    <h1>动态样式绑定 两种方式</h1>
    <!-- 样式变化率高，建议使用动态样式绑定 -->
    <!-- <h2>实例1 属性绑定</h2>
    <div @click="yaoChangeColor=!yaoChangeColor" v-bind:class="{changeColor:yaoChangeColor}">
        <span>YAO</span>
    </div> -->
    <h2>实例2 属性绑定</h2>
    <button @click="yaoChangeColor=!yaoChangeColor">changeColor</button>
    <button @click="yaoChangeLength=!yaoChangeLength">changeColor</button>
    <div v-bind:class="compClasses">
        <span>YAO</span>
    </div>
</div>

#canvas{
    width: 600px;
    padding: 200px 20px;
    text-align: center;
    border: 1px solid #333;
}
span{
    background: red;
    display: inline-block;
    padding: 10px;
    color: #fff;
    margin: 10px 0;
}
.changeColor span{
    background: green;
}
.changeLength span:after{
    content: 'yaobinggt';
}

11、v-if、v-else-if、v-else、v-show 指令

v-if 会直接操作demo进行节点的删除和添加
v-show只是控制demo节点的显示和隐藏

data() { //data本身是一个函数，返回的是一个对象
    return {
        error: false,
        success: true
    }
},

<div id="vue-app">
    <h1>v-if指令</h1>
    <button @click="error = !error">toogle</button>
    <!-- <p v-if="error">error 条件如果为真则会显示</p>
    <p v-else-if="success">success 条件如果为真则会显示</p>
    <p v-else>other</p> -->

    <!-- v-show -->
    <p v-show="error">yaobinggt</p>
</div>

12、v-for指令

基于源数据多次渲染元素或模板块。
预期：Array | Object | number | string | Iterable

data() { //data本身是一个函数，返回的是一个对象
    return {
        characters: ['小猪佩奇', '小羊苏西', '小兔林贝卡', '大象艾米丽'],
        users: [
            { name: '小猪佩奇', age: 3 },
            { name: '小羊苏西', age: 4 },
            { name: '小兔林贝卡', age: 5 },
            { name: '大象艾米丽', age: 6 },
        ]
    };
},

<div v-for="(user,index) in users">
    <em>{{user.name}}</em>----<em>{{user.age}}</em>
</div>

<template v-for="(user,index) in users">
    <em>{{user.name}}</em>----<em>{{user.age}}</em>
</template>

遍历对象

<!-- 遍历对象 -->
<template v-for="(user,index) in users">
    <div v-for="(val,key) in user">
        <p>{{key}}-{{val}}</p>
    </div>
</template>

13、整合DEMO

随意做了一个小案例整合理一下，碰到很多问题····

花了好长时间才解决了这个背景如何绑定
更换图片在js里面，想不到更好的解决办法

new Vue({
    el: '#app',
    data() {
        return {
            headlth: 0,
            ended: true,
            num: 1
        }
    },
    methods: {
        open() {
            this.headlth += 10;
            if (this.headlth >= 100) {
                this.ended = false;
                this.num = 5;
            };
            if (this.headlth >= 20) {
                this.num = 2;
            };
            if (this.headlth >= 40) {
                this.num = 3;
            };
            if (this.headlth >= 60) {
                this.num = 4;
            };
            if (this.headlth >= 80) {
                this.num = 5;
            }
        },
        reset() {
            this.headlth = 0;
            this.ended = true;
            this.num = 1
        }
    }
})

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/minireset.css/0.0.2/minireset.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div class="ts-box">
            <p :style="{'backgroundImage':'url(img/img'+ num +'.png)'}"></p>
        </div>
        <div class="ts-bar">
            <p :style="{width: headlth + '%'}"></p>
        </div>
        <div class="ts-control">
            <button @click="open" v-show="ended">开箱</button>
            <button @click="reset">重置</button>
        </div>
    </div>
</body>
<script src="app.js"></script>
<style>
#app{width: 200px; height: auto; margin: 0 auto; text-align: center;}
.ts-box{width: 200px; height: 200px;}
.ts-box p{width:150px; height: 150px; margin: 0 auto;}
.img1{background:url(img/img1.png);}
.img2{background:url(img/img2.png);}
.img3{background:url(img/img3.png);}
.img4{background:url(img/img4.png);}
.img5{background:url(img/img5.png);}
.ts-bar{width: 200px; height: 10px; border: solid 1px #e3e3e3; overflow: hidden;}
.ts-bar p{background: #ff6600; height: 10px;}
.ts-control{padding:30px;}
</style>
</html>

展示：