Vuejs提高篇（一）-阿里云开发者社区

事件处理指令

我们可以用 v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法。

v-on指令可以简写为：@

样例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title></title>
  </head>
  <body>
    <div id="app">
        <button v-on:click="pointme">点击我</button>
        <!-- v-on指令的简写 -->
        <button @click="pointyou">点击你</button>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
            },
            methods:{
                pointme(){
                    alert('点击了我');
                },
                pointyou(){
                    alert('点击了你');
                }
            }
        });
    </script>
  </body>
</html>

效果动图：

对一个数进行加减运算

样例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app">
        <button v-on:click="add(1)">加</button>
        <button @click="subtract(1)">减</button>
      <br/>
      num:{{num}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                num:0
            },
            methods:{
                add(value){
                    this.num += value;
                },
                subtract(value){
                    this.num -= value;
                }
            }
        });
    </script>
  </body>
</html>

效果动图：

条件渲染指令

条件渲染指令，可以根据条件判断，来设置元素的显示与隐藏。

v-if指令

当v-if的值为false时，网页中将不会对此元素进行渲染。

样例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app">
        <div v-if="isShow1">DOM元素的样式绑定1</div>
        <div v-if="isShow2">DOM元素的样式绑定2</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                isShow1:false,
                isShow2:true
            }
        });
    </script>
  </body>
</html>

效果截图：

从效果图可以发现 DOM元素的样式绑定1并没有显示出来，因为v-if=false时，网页中将不会对此元素进行渲染。

v-else指令和v-else-if指令

我们可以使用 v-else 指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。而v-else-if则是充当 v-if 的“else-if 块”，可以链式地使用多次。

样例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app">
        <div v-if="type==1">A</div>
        <div v-else-if="type==2">B</div>
        <div v-else-if="type==3">C</div>
        <div v-else>D</div>
      &nbsp;
      <div v-if="type2==1">AA</div>
      <div v-else-if="type2==2">BB</div>
      <div v-else-if="type2==3">CC</div>
      <div v-else>DD</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                type:3,
          type2:5
            }
        });
    </script>
  </body>
</html>

效果截图：

v-if指令和v-show指令

v-show也是根据条件展示元素的指令。带有 v-show 的元素始终会被渲染并保留在 DOM 中。 v-show 是简单地切换元素的 CSS 属性 display 。

样例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app">
        <div v-if="isShow">这里是v-if</div>
        <div v-show="isShow">这里是v-show</div>
      <div v-if="isShow1">这里是v-if1</div>
      <div v-show="isShow1">这里是v-show1</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                isShow:false,
          isShow1:true
            }
        });
    </script>
  </body>
</html>

效果截图：

通过上面的例子，我们可以发现两者的不同：

1. v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

2. v-if是惰性的，只有当条件为true时才会渲染，如果条件为false则什么都不做。

3. v-if有很高的切换开销，适用于条件不太容易改变的时候。

4. v-show不管条件是true还是false都会进行渲染。并且只是简单地基于 CSS 进行切换。

5. v-show有很高的初始渲染开销，适用于非常频繁地切换。

循环遍历指令

vue.js 的循环渲染是依赖于 v-for 指令，它能够根据 vue 的实例里面的信息，循环遍历所需数据，然后渲染出相应的内容。它可以遍历数组类型以及对象类型的数据，js 里面的数组本身实质上也是对象，这里遍历数组和对象的时候，方式相似但又稍有不同。

遍历对象属性

value 是遍历得到的属性值，key 是遍历得到的属性名，index 是遍历次序，这里的 key、index 都是可选参数，如果不需要，这个指令其实可以写成 v-for=“value in user”。

样例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app">
        <p v-for="(value,key,index) in user">{{index}}：{{key}} ：{{value}} </p>
        <hr>
        <p v-for="value in user">{{value}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                user:{
                    userId:999999,
                    userName:'牛哄哄的柯南',
                    userSex:'男'
                }
            }
        });
    </script>
  </body>
</html>

效果截图：

遍历数组元素

value 是遍历得到的元素，index 是数组下标，这里的index 也是可选参数，如果不需要，这个指令其实可以写成 v-for=“value in userArr”。

样例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app">
        <p v-for="(item,index) in userArr">
            {{index}}--{{item.userId}}:{{item.userName}}:{{item.userSex}}
            <button @click="operate(index)">操作</button>
        </p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                userArr: [{
                    userId: 1,
                    userName: '张三',
                    userSex: '男'
                }, {
                    userId: 2,
                    userName: '李四',
                    userSex: '女'
                }, {
                    userId: 3,
                    userName: '王五',
                    userSex: '男'
                }]
            },
            methods:{
                operate(index){
                    console.log(this.userArr[index]);
                }
            }
        });
    </script>
  </body>
</html>

效果截图：

综合案例(添加删除员工信息)

需求效果图：

完整代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style>
            #app{
                        width: 500px;
                    }
                    table{
                        width: 100%;
                        border-collapse: collapse;
                    }
                    table tr th,table tr td{
                        height: 35px;
            border : solid 1px #999;
                        text-align: center;
                    }
                    .clear-btn{
                        text-align: right;
                    }
                </style>
    </head>
    <body>
        <div id="app">
            <table>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(obj,index) in arr">
                    <td>{{obj.userId}}</td>
                    <td>{{obj.userName}}</td>
                    <td>{{obj.userAge}}</td>
                    <td><button  @click="del(index)" >删除</button></td>
                </tr>
                <tr >
                    <td colspan="4"> <button  @click="clear()" >清空</button></td>
                </tr>
            </table>
            <h3>添加:</h3>
            姓名：<input type="text" v-model="userName"><br>
            年龄：<input type="text"  v-model="userAge"><br>
            <button @click="add">添加</button>
        </div>
        <script>
            let vm = new Vue({
                el: '#app',
                data: {
                    arr: [{
                        userId: 1,
                        userName: '张三',
                        userAge: 20
                    }, {
                        userId: 2,
                        userName: '李四',
                        userAge: 21
                    }, {
                        userId: 3,
                        userName: '王五',
                        userAge: 22
                    }],
                    userName:'',
                    userAge:null,
                },
                methods:{
                    del(index){
                        //this Vue实例
                        this.arr.splice(index,1);
                    },
                    clear(){
                        this.arr = [];
                    },
                    add(){
                        //获取控件
                        let userName = this.userName;
                        let userAge = this.userAge;
                        let userId = (this.arr.length +1);
                        this.arr.push({
                            userId,
                            userName,
                            userAge
                        })
            this.userName='';  // 输入后清空
            this.userAge='';  // 输入后清空
                    }
                }
            });
        </script>
    </body>
</html>

添加效果：

删除清空效果：

Vuejs提高篇（一）

事件处理指令

对一个数进行加减运算

条件渲染指令

v-if指令

v-else指令和v-else-if指令

v-if指令和v-show指令

循环遍历指令

遍历对象属性

遍历数组元素

综合案例(添加删除员工信息)

热门文章

最新文章

相关课程

相关电子书