一、事件的参数传递
示例为通过按钮删除一行v-for渲染出来的数据
<body> <table id="app" border=""> <tr> <th>id</th> <th>name</th> <th>tester</th> <th>project</th> <th>操作</th> </tr> <tr v-for="item in lists"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.tester}}</td> <td>{{item.project}}</td> <td><button @click="del(item.id)">删除</button></td> </tr> </table> <script> var vm = new Vue({ el: "#app", data: { lists: [{ "id": 1, "name": "登录接口1", "tester": "测试人1", "project": "自动化测试平台1" }, { "id": 2, "name": "登录接口2", "tester": "测试人2", "project": "自动化测试平台2" }, { "id": 3, "name": "登录接口3", "tester": "测试人3", "project": "自动化测试平台3" }] }, methods: { del: function (id) { console.log("点击了删除按钮", id); // 方法一，filter // this.lists = this.lists.filter( // function (item) { // return item.id != id // } // ) // 方法二，找到索引，再删数据 const ind = this.lists.findIndex(function (item) { return item.id === id }) console.log("索引", ind); // 第一个入参为索引，第二入参为从入参索引开始删除的个数 this.lists.splice(ind, 1) } } }) </script> </body>
二、事件修饰符
https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6
上一篇文章还有提到表单修饰符：https://cn.vuejs.org/v2/guide/forms.html#%E4%BF%AE%E9%A5%B0%E7%AC%A6
<body> <div id="app"> <div @click="work"> <!-- 点击子元素也会触发父元素的事件 事件修饰符： .stop ，阻止冒泡（事件冒泡：点击子元素，事件会一级一级冒泡到父元素） .prevent ，阻止事件的默认行为 .capture ，添加事件监听器时使用事件捕获模式，即内部触发的事件优先在此处理，然后再内部处理 --> <button type="button" @click.stop="work2()">按钮1</button> </div> <a href="https://www.baidu.com" @click.prevent="work3">百度</a> </div> <script> var vm = new Vue({ el: "#app", data: { }, methods: { work: function () { console.log("调用work方法"); }, work2: function () { console.log("----work2---"); }, work3: function () { console.log("----work3---"); } } } ) </script> </body>
三、按键修饰符
https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E7%A0%81
<body> <div id="app"> <form action=""> 账号：<input type="text" v-model="loginForm.user"> <br> <!-- 按键修饰符 --> 密码：<input type="password" v-model="loginForm.pwd" @keyup.enter="login_btn()" @keyup.delete="del()"> <br> <button type="button" @click="login_btn()">登录</button> </form> </div> <script> var vm = new Vue({ el: "#app", data: { loginForm: { user: "", pwd: "" } }, methods: { login_btn: function () { console.log("用户登录数据为：", this.loginForm); }, del:function(){ this.loginForm.pwd="" } } } ) </script> </body>
四、计算属性computed、侦听属性watch
<body> <div id="app"> <div> <h3>订单</h3> <h5>商品名：{{name}}</h5> <h5>单价：{{price}}</h5> <h5>库存：{{stock}}</h5> <h5> 数量： <button @click="sub">-</button> {{num}} <button @click="add">+</button> </h5> <hr> <h5>总价：{{priceSum}}</h5> <h5>总价：{{test}}</h5> </div> <hr> <form action=""> 账号：<input type="text" v-model="loginForm.user"> <br> <!-- 按键修饰符 --> 密码：<input type="password" v-model="loginForm.pwd" @keyup.enter="login_btn()" @keyup.delete="del()"> <br> <button type="button" @click="login_btn()">登录</button> </form> </div> <script> var vm = new Vue({ el: "#app", data: { name: "西瓜", num: 10, price: 99, stock: 20, test: "990", loginForm: { user: "", pwd: "" } }, methods: { add: function () { this.num += 1; this.test = this.num * this.price }, // 函数简写 sub() { this.num -= 1; this.test = this.num * this.price }, }, // 定义计算属性 computed: { priceSum: function () { return this.num * this.price } }, //定义侦听器，只能监听data里面的值是否发生变化 watch: { // 单层监听 num(newValue, oldValue) { console.log(newValue, oldValue); if (newValue < 0) { this.num = 0 } else if (newValue > this.stock) { this.num = this.stock } }, // 监听层级内的某个数据 'loginForm.user': function (newValue, oldValue) { console.log(newValue, oldValue); }, // 监听层级内的数据，示例监听的是loginForm整个对象 loginForm: { handler:function(newValue, oldValue){ console.log("测试",newValue.user, oldValue.user); }, // 不管层级有多深，都能监听到 deep:true } } }) </script> </body>
五、过滤器
<body> <div id="app"> <!-- 添加过滤器函数 --> <p :style="style|styleChange">{{price|doubleFloat}}</p> </div> <script> var vm = new Vue({ el: "#app", data: { price: 99, style: "color:red" }, // 过滤器（对传入的数据进行处理） filters: { doubleFloat: function (value) { return value.toFixed(2) }, styleChange(value){ return "color:green" } } }) </script> </body>