Vue框架2.x的初尝试(二)动态绑定，响应式数据，事件修饰符，（含小练习）

2023-11-12 14:42:10

动态绑定样式(对v-bind的补充)：

动态绑定样式(对v-bind的补充)：

通过class

使用变量或者表达式的形式

css样式：

<style>
    .change{
        color:red
    }
</style>

html样式：

<span :class="change">Hello Vue! <span>  //这里使用到v-bind,绑定了Vue中的change变量

vue实例中的data样式：

    data:{
        change:'change'
    }

2.对象形式

css样式：

<style>
        .mycolor{
            color:red
        }
    </style>

html样式：

<span :class="{mycolor:isshow}">Hello Vue! <span>   //前者是上面的ClassName 后者是Vue中的变量

vue实例中的data样式：

data:{
        isShow:true
    }

3.数组形式

html样式：

<span :class="[变量1，变量2，变量3]">Hello Vue! <span>

vue实例中的data样式：

    data:{
        变量1:'',
        变量2:'',
        变量3:''    
    }

通过style

1.变量或者表达式

<span :style="myStyle">Hello Vue! <span> 
 
<span :style="JS表达式">Hello Vue! <span>

2.对象形式

{属性：变量或者表达式}

<span :style-"{color:mycolor}">Hello Vue! <span> 
    
    data:{
        mycolor:'red'
    }

3.数组形式

<span :style-"[myStyle1,myStyle2]">Hello Vue! <span> 

data:{
    mystyle1:{
        color:red;
    },
    mystyle:{
        font-size:24px
    }
}

注意：我们常用的是class的前两种方法,数组形式的用的少

$event

$event是指当前触发的是什么事件（鼠标事件，键盘事件等）

$event.target则指的是事件触发的目标，即哪一个元素触发了事件，这将直接获取该dom元素

下面是例子:

<button @click="console.log($event)" name="哈哈">单击</button>

由于鼠标点击，所以触发鼠标单击事件，打印出来的是事件，如下图：

实际上展开target就可以看到更具体的信息，这里不做演示，其实也就是这个button的各种属性等等，直接就是这dom元素。

且看下面这段代码，直接打印出target：

<button @click="console.log($event.target)" name="哈哈">单击</button>

可见打印出来的值就是这个元素本身
我们可尝试获取其属性值

<button @click="console.log($event.target.name)" name="哈哈">单击</button>

事件修饰符

键盘事件修饰符

在JavaScript事件中除了前面所说的事件，还有键盘事件，也经常需要监测常见的键值。在Vue中允许v-on在监听键盘事件时添加关键修饰符。记住所有的keyCode比较困难，所以Vue为最常用的键盘事件提供了别名：

.enter：回车键
.tab：制表键
.delete：含delete和backspace键
.esc：返回键
.space: 空格键
.up：向上键
.down：向下键
.left：向左键
.right：向右键

点击事件修饰符

stop 阻止冒泡
self 只有点击自身才执行
stop.self组合只有点击自身并且阻止冒泡了
capture将后面的函数转换为捕获阶段的函数
prevent阻止默认事件常用在a标签和form表单上

响应式数据常见问题以及解决方法

关于插值语法问题的提出

先看如下代码：

<body>
    <div id="app">
<span>{{user.name}}</span>
<button @click="change">变换名字</button>
</div>
</body>

<script src="../node_modules/vue/dist/vue.js"></script>

<script>
    const app=new Vue({
        el:'#app',
        data:{
       user:{

       }
        },
        methods: {
            change(){
         this.user.name='小王'
            }
        },
    })
</script>

代码的意图是通过插值语法显示user里面的name不过我们会发现，当我们点击按钮的时候并不会出现任何反应。不过我们打开Vue或者是打印app都可以发现name属性已经更改完成。

解决方法

在声明时就声明name

data:{
    user:{
        name:''
    }
}

2.直接修改user数据

  methods: {
            change(){
         this.user={
             name:'小王'
         }
            }

3.this.$set

this.$set(this.user,'name',"小明")

z4.$forceUpdate()强制更新不过这种方案没有让name变成响应式数据

this.user.name="小明"
this.$forceUpdate()

关于v-for问题的提出
先看代码：

<body>
    <div id="app">
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>
        <button @click="change">改变数组</button>
    </div>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            list: [1, 2, 3, 4]
        },
        methods:{
            change(){
                this.list[0]=111
            }
        }
    })
</script>

我们出现了同样的问题，在Vue插件和查看代码中发现了list的变化，但是浏览器的显示没有任何变化。那么我们怎么去解决这个问题呢？

解决方法

1.$set 最佳方案

this.$set(this.list,0,666)

2.$forceUpdate() 强制更新，不推荐使用

this.$forceYpdate()

3.push 和pop

push方法已经经过Vue重写了，另外经常使用的方法也改写过了

4.直接替换数组内容，重写list

案例：购物车

要求：我们利用所学的知识制作一个简单的商品购物车，要有添加删除操作，要能自动计算总价。
思路：前端的静态代码部分采用bootstrap框架，逻辑去使用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>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

</head>
<body>
    <div id="app">
        <form style="width: 500px;margin:0 auto">
            书名:<input type="text" v-model="book.name"> <br>
            价格:<input type="text" v-model="book.price"> <br>

            
            <button type="button" class="btn btn-default" @click.prevent="addBook">添加</button>
            
        </form>


        <table class="table table-bordered" style="width: 800px;margin:50px auto;">
            <thead>
                <tr>
                    <th>
                        id
                    </th>
                    <th>
                        书名
                    </th>
                    <th>
                        价格
                    </th>
                    <th>数量</th>
                    <th>
                        操作
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(book, index) in bookList">
                    <td>{{book.id}}</td>
                    <td>{{book.name}}</td>
                    <td>{{book.price}}</td>
                    <td>
                        <input type="number" v-model.number="book.num">
                    </td>
                    <td>
                        <button class="btn btn-danger" @click="delBook(book.id)">删除</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="5">
                        总价: {{total()}}
                    </td>
                </tr>
            </tbody>
        </table>
        
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            methods: {
                addBook() {
                    console.log("999")
                    this.bookList.push({
                        id: this.bookList.length+1,
                        name: this.book.name,
                        price: this.book.price,
                        num: 1
                    })
                },
                total() {
                    return this.bookList.reduce((total, item)=> {
                       total += item.price * item.num
                       return total
                    }, 0)
                },
                delBook(id) {
                    this.bookList = this.bookList.filter(item=>item.id !== id)
                }
            },
            data: {
                book: {
                    
                },
                bookList: [
                    {
                        id: 1, 
                        name: 'Javascript 权威指南',
                        price: 20,
                        num: 1
                    },
                    {
                        id: 2, 
                        name: 'Javascript 从入门到放弃',
                        price: 29.99,
                        num: 1
                    },
                    {
                        id: 3, 
                        name: 'Vue 从入门到放弃',
                        price: 28,
                        num: 1
                    },
                    {
                        id: 4, 
                        name: 'uniapp 从入门到放弃',
                        price: 24,
                        num: 1
                    }
                ]
            }
        })
    </script>
</body>
</html>

看完文章就抓紧多练习几遍，趁热打铁，希望能在学习的道路上为你们贡献份力量！！！

码农公寓

通过class

使用变量或者表达式的形式

2.对象形式

3.数组形式

通过style

1.变量或者表达式

2.对象形式

3.数组形式

$event

事件修饰符

键盘事件修饰符

点击事件修饰符

响应式数据常见问题以及解决方法

解决方法

关于v-for问题的提出 先看代码：

解决方法

案例：购物车

相关文章

关于v-for问题的提出
先看代码：