Vue 2.X 基础篇第2章快速入门

最新推荐文章于 2022-07-12 17:47:07 发布

老张谋

最新推荐文章于 2022-07-12 17:47:07 发布

阅读量591

点赞数 2

分类专栏：前端技术文章标签： html vue

本文链接：https://blog.csdn.net/wgf5845201314/article/details/88577401

版权

前端技术专栏收录该内容

111 篇文章 4 订阅

订阅专栏

课时7：Vue常用指令-v-else-if

课时8：Vue常用指令-v-for

课时9：Vue常用指令-v-for练习

课时10：Vue常用指令-v-text, v-html

课时11：Vue常用指令-v-bind

课时12：Vue常用指令-v-bind补充

课时13：Vue常用指令-v-on

课时14：Vue常用指令-综合练习

课时15：Vue计算属性（computed properties）

第2章快速入门

课时1：vue初体验

Vue.js主要负责的是上图绿色正方体ViewModel的部分，其在View层（即DOM层）与Model层（即JS逻辑层）之间通过ViewModel绑定了DOM Listeners与Data Bingings两个相当于监听器的东西。

当View层的视图发生改变时，Vue会通过DOM Listeners来监听并改变Model层的数据。相反，当Model层的数据发生改变时，其也会通过Data Bingings来监听并改变View层的展示。这样便实现了一个双向数据绑定的功能，也是Vue.js数据驱动的原理所在。

以上参考：https://www.jianshu.com/p/78c9e5342990

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
        <p>{{msg}}</p>
    </div>
    <div class="test"></div>
    <script>
        //1. 创建Vue实例 view层
        let vm = new Vue({
            el:'#app',     //vue视图
            data:{       //vue中的model->数据
                message:'你好，世界！',
                msg:'我要吃饭'
            }
        });
    </script>
</body>
</html>

课时2：Vue-v-model

<div id="app">
        <p>{{message}}</p>
        <input type="text" v-model="message">
    </div>
    <div class="test"></div>
    <script>
        //1. 创建Vue实例 view层
        let vm = new Vue({
            el:'#app',     //vue视图
            data:{       //vue中的model->数据
                message:'你好，世界！'
            }
        });

输出内容变化，显示的也变化

课时3：Vue常用指令-v-once

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-once</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <!--视图，通过app挂载-->
    <div id="app">
        <p v-once>原始值：{{msg}}</p>
        <p>后面值：{{msg}}</p>
        <input type="text" v-model="msg">
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'今天的天气很好！'
            }
        })
    </script>
</body>
</html>

课时4：Vue常用指令-v-if

v-if: 用于根据表达式的值的真假条件渲染元素，如果上图P3为false则不会渲染P标签

<div id="app">
    <p v-if="show">要显示出来</p>
    <p v-if="hide">不要显示出来</p>
    <p v-if="sex">性别：1 女生</p>
    <p v-if="height>1.55">小明的身高：{{height}}</p>
    <p v-if="height1>1.55">小明的身高：{{height1}}</p>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            show:true,
            hide:false,
            sex: 1,
            height:1.68,
            height1:1.50
        }
    })
</script>

课时5：Vue常用指令-v-show

v-show: 也是条件渲染指令，不同的是V-show的元素会始终渲染并保持在DOM中，和v-if指令不同点在于：v-show是根据表达式的真假值，切换元素的 display CSS 属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-show</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p v-show="show">要显示出来</p>
    <p v-show="hide">不要显示出来</p>
    <p v-show="sex">性别：1 女生</p>
    <p v-show="height>1.55">小明的身高：{{height}}</p>
    <p v-show="height1>1.55">小明的身高：{{height1}}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data:{
            show:true,
            hide:false,
            sex: 1,
            height:1.68,
            height1:1.50
        }
    })
</script>
</body>
</html>

应用场景：

频繁切换 v-show

不频繁切换： v-if

课时6：Vue常用指令-v-else

v-else : 可以用v-else指令为v-if或者v-show添加一个‘else块’

注意：v-else前一个兄弟必须为v-if或v-else-if

<div id="app">
    <p v-if="height>1.7">小明的身高是：{{height}}m</p>
    <p v-else>小明的身高不足1.70m</p>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            height:1.68
        }
    })
</script>

v-if和v-else之间添加其他元素时，会报错

<div id="app">
    <p v-if="height>1.7">小明的身高是：{{height}}m</p>
    <p>xiiwiuiu</p>
    <p v-else>小明的身高不足1.70m</p>
</div>

只有v-else时

<div id="app">
    <p v-else>小明的身高不足1.70m</p>
</div>

课时7：Vue常用指令-v-else-if

判断多种情况时使用：

v-if

v-else-if

v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-else-if</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p>输入的成绩对应的等级为：</p>
    <p v-if="score>=90">优秀</p>
    <p v-else-if="score>75">良好</p>
    <p v-else-if="score>60">及格</p>
    <p v-else>不及格</p>
    <input type="text" v-model="score">
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            score:90  //优秀 良好 及格 不及格
        }
    })
</script>
</body>
</html>

课时8：Vue常用指令-v-for

v-for: 用于遍历数据渲染元素或模板

语法：（item,index）in items 或者 item in items (不需要索引时）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-for="(score,index) in scores">
            {{index+":"+score}}
        </p>
        <p v-for="d in dog">
            {{d}}
        </p>
        <p v-for="str in name">
            {{str}}</p>
        <p v-for="num in phone">
            {{num}}
        </p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                scores:[100,87,88,60],  //数组  优秀 良好 及格 不及格
                dog:{name:'旺财',age:2,height:1.44},//对象
                name:'zhangsan',
                phone:'18888869699'
            }
        })
    </script>
</body>
</html>

课时9：Vue常用指令-v-for练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style>
        table{
            width: 600px;
            border: 1px solid orange;
            text-align: center;
        }
        thead{
            background: green;
        }
    </style>
</head>
<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>性别</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="p in persons">
                    <td>{{p.name}}</td>
                    <td>{{p.age}}</td>
                    <td>{{p.sex}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                persons:[
                    {name:'张三',age: 18,sex: '男'},
                    {name:'李四',age: 12,sex: '女'},
                    {name:'王五',age: 20,sex: '男'},
                    {name:'赵六',age: 30,sex: '女'}
                ]
            }
        })
    </script>
</body>
</html>

课时10：Vue常用指令-v-text, v-html

v-text: 用于更新绑定元素中的内容

<div id="app">
        <p>{{msg}}哈哈哈哈</p>
        <p v-text="msg">哈哈哈哈</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'今天天气很好呀！'
            }
        })
    </script>

v-text会更新覆盖p标签中内容

课时11：Vue常用指令-v-bind

<div id="app">
        <img v-bind:src="imgSrc" :alt="alt">
        <img :src="imgSrc" :alt="alt">
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                imgSrc:'img/9.png',
                alt:'我是美女'
            }
        });
    </script>

课时12：Vue常用指令-v-bind补充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style>
        .active{
            background-color: orange;
            font-size:20px;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="app">
       <p v-for="(college,index) in colleges" :class="index ===activeIndex ? 'active':''">
           {{college}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                colleges:[
                        'IOS学院',
                        'java学院',
                        'UI学院',
                        'HTML5学院',
                        'VR学院',
                ],
                activeIndex:2
            }
        });
    </script>
</body>
</html>

    <div id="app">
        <p v-bind:style="{color:fontColor}">{{msg}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'今天天气很好！',
                fontColor:'red'
            }
        });
    </script>

课时13：Vue常用指令-v-on

监听事件

v-on:click =" " 等价于 @click=" "

<body>
    <div id="app">
        <p v-bind:style="{color:fontColor}">{{msg}}</p>
        <button v-on:click="msg='今天很热'">改变内容</button>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'今天天气很好！',
                fontColor:'red'
            }
        });
    </script>

点击按钮后：

通过钩子选项添加函数，改变内容

    <div id="app">
        <p v-bind:style="{color:fontColor}">{{msg}}</p>
        <button v-on:click="msg='今天很热'">改变内容</button>
        <button @click="changeContent()">改变内容</button>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'今天天气很好！',
                fontColor:'red'
            },
            methods:{//实例的所有函数实现
                changeContent(){
                    alert(0);
                    this.msg='测试改掉么有@'
                }
            }
        });
    </script>

改变颜色

changeColor(){
                    this.fontColor='blue'
                }

  <button @click="changeColor()">改变颜色</button>

课时14：Vue常用指令-综合练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-常用指令-综合练习</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style>
        #app{
            margin:50px auto;
            width: 600px;
        }
        fieldset{
            background: 1px solid #ffde1b;
            margin-bottom:20px;
        }
        fieldset input{
            width: 200px;
            height: 30px;
            margin:10px 0;
        }
        table{
            width: 600px;
            border: 2px solid orange;
            text-align:center;
        }
        thead{
            background-color: orange;
        }


    </style>
</head>
<body>
    <div id="app">
        <!--第一部分-->
        <fieldset>
            <legend>拇指哥学生录入系统</legend>
            <div>
                <span>姓名：</span>
                <input type="text" placeholder="请输入姓名" v-model="newStudent.name">
            </div>
            <div>
                <span>年龄：</span>
                <input type="text" placeholder="请输入年龄" v-model="newStudent.age">
            </div>
            <div>
                <span>性别：</span>
                <select v-model="newStudent.sex">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div>
                <span>手机：</span>
                <input type="text" placeholder="请输入手机号码" v-model="newStudent.phone">
            </div>
            <button @click="createNewStudent()">创建新用户</button>
        </fieldset>
        <!--第二部分-->
        <table>
            <thead>
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>手机</td>
                <td>删除</td>
            </tr>
            </thead>
            <tbody>
                <tr v-for="(p,index) in persons">
                    <td>{{p.name}}</td>
                    <td>{{p.age}}</td>
                    <td>{{p.sex}}</td>
                    <td>{{p.phone}}</td>
                    <td>
                        <button @click="deleteStudentMsg(index)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                persons:[
                    {name:'张三',age:20,sex:'女',phone:'189656552'},
                    {name:'李四',age:18,sex:'男',phone:'189656554'},
                    {name:'王五',age:30,sex:'女',phone:'189656555'},
                    {name:'赵六',age:50,sex:'男',phone:'189656556'}
                ],
                newStudent:{name:'',age:0, sex:'男',phone:''}
            },
            methods:{
                //创建一条新纪录
                createNewStudent(){
                    //姓名不能为空
                    if(this.newStudent.name ==''){
                        alert('姓名不能为空');
                        return ;
                    }
                    //年龄不能小于0
                    if(this.newStudent.age <=0){
                        alert('请输入正确的年龄');
                        return ;
                    }
                    //手机号码
                    if(this.newStudent.phone ===''){
                        alert('手机号码不正确！');
                        return ;
                    }
                    //向数组中添加一条新纪录
                    this.persons.unshift(this.newStudent);
                    //清空数据
                    this.newStudent={name:'',age:0,sex:'',phone:''};
                },
                //删除一条学生记录
                deleteStudentMsg(index){
                    this.persons.splice(index,1);
                }
            }

        });
    </script>
</body>
</html>

可添加，删除元素（本地实现）

课时15：Vue计算属性（computed properties）

翻转字符串：

<body>
    <div id="app">
        <p>原始值：{{name}}</p>
        <p>翻转值：{{name.split('').reverse().join('')}}</p>
        <p>调用函数：{{reverseStr()}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                name:'Jock rose'
            },
            methods:{
                reverseStr(){
                    return this.name.split('').reverse().join('');
                }
            }
        });
    </script>
</body>

虽然在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。这样，模板不再简单和清晰。在实现反向显示 message 之前，你应该通过一个函数确认它。所以，Vue.js提供了计算属性来让我们去处理实例中的复杂逻辑。

计算属性 (computed properties) 就是不存在于原始数据中，而是在运行时实时计算出来的属性。

<body>
    <div id="app">
        <p>原始值：{{name}}</p>
        <p>翻转值：{{name.split('').reverse().join('')}}</p>
        <p>调用函数：{{reverseStr()}}</p>
        <p>计算属性：{{reverse}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                name:'Jock rose'
            },
            methods:{
                reverseStr(){
                    return this.name.split('').reverse().join('');
                }
            },
            //计算选项
            computed:{
                //get方法
                reverse(){
                    return this.name.split('').reverse().join('');
                }
            }
        });
    </script>

计算属性和 Methods的区别？

当页面重新渲染（不是刷新）的时候，计算属性不会变化，直接读取缓存使用，适合较大量的计算和改变频率较低的属性；而method，就是当页面重新渲染的时候（页面元素的data变化，页面就会重新渲染），都会重新调用method。

如果不希望有缓存，我们可以用method取代computed。

疑惑：为什么需要缓存？

假设我们有一个重要的计算属性 A ，这个计算属性需要一个巨大的数组遍历和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter ！

计算属性的setter方法

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

<body>
    <div id="app">
        <p>{{fullName}}</p>
        <button @click="deal()">调用计算属性的setter方法</button>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                firstName:'zhang',
                lastName:'sanfeng'
            },
            methods:{
                deal(){
                    return this.fullName='Token Lily';
                }
            },
            computed: {
                /*!//get
                fullName(){
                    return this.firstName+" "+this.lastName;*/
                fullName:{
                    //get方法
                    get(){
                        return this.firstName+" "+this.lastName;
                },
                    //set方法
                    set(str){
                        let nameArr=str.split(' ');
                        this.firstName=nameArr[0];
                        this.lastName=nameArr[1];
                    }
              }
            }
        });
    </script>
</body>