Vue入门到精通学习总结（二）

转载

mob604756fbd94e 2021-08-18 00:08:00

文章标签 html 数据数组双向绑定事件冒泡 文章分类 代码人生

事件修饰符
- .stop阻止冒泡

Vue入门到精通学习总结（二）_数组

Vue入门到精通学习总结（二）_数据_02

- .prevent阻止默认事件

Vue入门到精通学习总结（二）_双向绑定_03

　　　　如果不加.prevent默认事件，点击会直接跳转到百度页面

Vue入门到精通学习总结（二）_html_04

- .capture添加事件侦听器使用事件捕获模式

不加capture就会先执行button再执行div:

Vue入门到精通学习总结（二）_事件冒泡_05

加了capture捕获事件会先执行当前这个div再执行里面的button

Vue入门到精通学习总结（二）_事件冒泡_06

- .self事件在该元素本身触发时产生回调

Vue入门到精通学习总结（二）_事件冒泡_07

- .once事件只触发一次

　　　　 Vue入门到精通学习总结（二）_事件冒泡_08

　　　第一次点击a标签是阻止默认行为，第二次点击就不执行阻止默认事件了

注意：.self和.stop都可以阻止事件冒泡，但是.self只会阻止自己本身的事件冒泡

简单计算器

<!--
 * @Descripttion: 
 * @version: 
 * @Author: 会飞的猪礼
 * @Date: 2021-08-17 19:42:31
 * @LastEditors: 会飞的猪礼
 * @LastEditTime: 2021-08-17 19:57:17
-->
<!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>简单的计算器</title>
    <script src="./js/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="n1">

        <select v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>

        <input type="text" v-model="n2">
        <input type="button" value="=" @click="cal">
        <input type="text" v-model="res">
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                n1:'',
                n2:'',
                res: 0,
                opt:'+'
            },
            methods:{
                cal(){
                    var codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)'
                    this.res = eval（codeStr)
                }
            }
        })
    </script>
</body>
</html>

v-model:数据的双向绑定
v-bind：数据的单向绑定

<!-- 
            1.v-bind  只能实现数据的单向绑定，从M自动绑定到V,无法实现数据的双向绑定
            2.v-model 实现数据的双向绑定，只能运用在表单元素中
            比如：input select checkbox textarea
         -->

vue中的class属性用法

:class="['','',...]"

第一种使用方式，直接传递一个数组，里面输入字符串，注意：这里的class需要使用v-bind做数据绑定

Vue入门到精通学习总结（二）_事件冒泡_09

第二种使用方式：三元表达式

Vue入门到精通学习总结（二）_数组_10

由于三元表达式略微麻烦，所以可以使用对象的形式

Vue入门到精通学习总结（二）_数据_11

第三种使用方式：对象

在为 class 使用v-bind 绑定对象的时候，对象的属性是类名，可用引号可不用，属性的值是一个标识符

Vue入门到精通学习总结（二）_html_12

vue中的style内联样式的用法

第一种：使用对象的方式

Vue入门到精通学习总结（二）_html_13

第二种：将对象写在data的一个变量里

Vue入门到精通学习总结（二）_双向绑定_14

第三种:写成数组的形式

Vue入门到精通学习总结（二）_数组_15

v-for循环遍历的四种用法

v-for遍历普通数组
v-for遍历对象数组
v-for遍历对象
v-for迭代数字

v-for中key属性的作用：key给了所选中内容一个约束
- 加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联。

Vue入门到精通学习总结（二）_事件冒泡_20

<!--
 * @Descripttion: 
 * @version: 
 * @Author: 会飞的猪礼
 * @Date: 2021-08-17 23:34:06
 * @LastEditors: 会飞的猪礼
 * @LastEditTime: 2021-08-17 23:59:29
-->
<!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>v-for中key的作用</title>
    <script src="./js/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <label for="">
                id: <input type="text" v-model="id">
            </label>

            <label for="">
                name: <input type="text" v-model="name">
            </label>
            
            <input type="button" value="添加" @click="add">
        </div>
        
        <!-- 注意： v-for 循环的时候，key 属性只能使用 number获取string -->
        <!-- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 -->
        <!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 -->
        <p v-for="item in list">
            <input type="checkbox">{{item.id}}---{{item.name}}
        </p>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                id:'',
                name:'',
                list:[
                    {id: 1, name: "瑶"},
                    {id: 2, name: "李元芳"},
                    {id: 3, name: "孙尚香"},
                    {id: 4, name: "上官婉儿"},
                    {id: 5, name: "关羽"},
                ]
            },
            methods:{
                add(){
                    // unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度
                    this.list.unshift({id: this.id, name: this.name})
                }
            }
        })
    </script>
</body>
</html>

如果不加key属性，原本选中的是瑶，添加完英雄，选中的则是新添加的安琪拉

Vue入门到精通学习总结（二）_数组_21