Vue基本语法和生命周期

计算属性和监视

1. 计算属性
   在computed属性对象中定义计算属性的方法
   在页面中使用{{方法名}}来显示计算的结果
2. 监视属性:
   通过通过vm对象的$watch()或watch配置来监视指定的属性
   当属性变化时, 回调函数自动调用, 在函数内部进行计算
3. 计算属性高级:
   通过getter/setter实现对属性数据的显示和监视
   计算属性存在缓存, 多次读取只执行一次getter计算
   getter：属性的get方法
   setter：属性的set方法

<div id="demo">
    姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
    名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
    <!--fullName1是根据fistName和lastName计算产生-->
    姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
    姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
    姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>

    <p>{{fullName1}}</p>
    <p>{{fullName1}}</p>
    <p>{{fullName1}}</p>
</div>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el: '#demo',
        data: {
            firstName: 'A',
            lastName: 'B',
            // fullName1: 'A B'
            fullName2: 'A B'
        },
        computed: {
            // 什么时候执行：初始化显示/相关的data属性数据发生改变
            // 计算并返回当前属性的值
            fullName1(){//计算属性的一个方法，方法的返回值作为属性值
                console.log('fullName1()');
                return this.firstName + ' ' + this.lastName;
            },
            fullName3: {
                /*
                回调函数要满足3个条件：
                    1、你定义的；
                    2、你没有调用；
                    3、但最终它执行了
                什么时候调用？
                用来做什么？
                */
                // 回调函数，当需要读取当前属性值时回调，根据相关的数据计算并返回当前属性的值
                get(){
                    return this.firstName + ' ' + this.lastName;
                },
                // 回调函数，监视当前属性值的变化，当属性值发生改变时回调，更新相关的属性数据
                set(value){// value就是fullName3的最新属性值
                    const names = value.split(' ');
                    this.firstName = names[0];
                    this.lastName = names[1];
                }
            }
        },
        watch: {//配置监视
            firstName: function(value){//firstName发生了变化
                console.log(this);//就是VM对象
                this.fullName2 = value + ' ' + this.lastName;
            }
        }
    })
    vm.$watch('lastName', function(value){
        // 更新fullName2
        this.fullName2 = this.firstName + ' ' + value;
    });

class与style绑定

1. 理解
   在应用界面中, 某个(些)元素的样式是变化的
   class/style绑定就是专门用来实现动态样式效果的技术
2. class绑定: :class='xxx'
   xxx是字符串
   xxx是对象
   xxx是数组
3. style绑定
   :style="{ color: activeColor, fontSize: fontSize + 'px' }"
   其中activeColor/fontSize是data属性

<div id="demo">
    <h2>1. class绑定: :class='xxx'</h2>
    <p class="cClass" :class="a">xxx是字符串</p>
    <p :class="{aClass: isA, bClass: isB}">xxx是对象</p>
    <p :class="['aClass', 'cClass']">xxx是数组</p>

    <h2>2. style绑定</h2>
    <p :style="{color: activeColor, fontSize: fontSize + 'px'}">style绑定</p>

    <button @click="update">更新</button>
</div>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#demo',
        data: {
            a: 'aClass',
            isA: true,
            isB: false,
            activeColor: 'red',
            fontSize: 20
        },
        methods: {
            update(){
                this.a = 'bClass';
                this.isA = false;
                this.isB = true;
                this.activeColor = 'green';
                this.fontSize = 30;
            }
        }
    })

条件渲染

1. 条件渲染指令
   v-if
   v-else
   v-show
2. 比较v-if与v-show
   如果需要频繁切换 v-show 较好

<div id="demo">
    <p v-if="ok">成功了</p>
    <p v-else="true">失败了</p>

    <p v-show="ok">表白成功</p>
    <p v-show="!ok">表白失败</p>

    <button @click="ok=!ok">切换</button>
</div>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#demo',
        data: {
            ok: false
        }
    })
</script>

列表渲染

1. 列表显示
   数组: v-for / index
   对象: v-for / key
2. 列表的更新显示
   删除item
   替换item

<div id="demo">
    <h2>测试: v-for 遍历数组</h2>
    <ul>
        <li v-for="(p, index) in persons" :key="index">
            {{index}}---{{p.name}}---{{p.age}}
            ---<button @click="deleteP(index)">删除</button>
            ---<button @click="updateP(index, {name: 'Lucy', age: 20})">更新</button>
        </li>
    </ul>

    <h2>测试: v-for 遍历对象</h2>
    <ul>
        <li v-for="(value, key) in persons[1]" :key="key">
            {{value}}---{{key}}
        </li>
    </ul>
</div>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    /*
    vue本身只是监视了persons的改变，没有监视数组内部数据的改变
    vue重写了数组中的一系列改变数组内部数据的方法（先调用原生，再更新界面）-->数组内部改变，界面自动变化
    */
    new Vue({
        el: '#demo',
        data: {
            persons: [
                {name: 'Tom', age:18},
                {name: 'Jack', age:16},
                {name: 'Bob', age:19},
                {name: 'Rose', age:17}
            ]
        },
        methods: {
            deleteP(index){
                // 删除persons中指定index的p
                this.persons.splice(index, 1);
            },
            updateP(index, newP){
                // 并没有改变persons本身，数组内部发生变化，但并没调用变异方法，Vue不会更新界面
                // this.persons[index] = newP;
                // this.persons = [];
                this.persons.splice(index, 1, newP);
            }
        }
    })
</script>

过滤与排序

1. 列表过滤
2. 列表排序

<div id="demo">
    <input type="text" v-model="searchName">
    <ul>
        <li v-for="(p, index) in filterPersons" :key="index">
            {{index}}---{{p.name}}---{{p.age}}
        </li>
    </ul>
    <div>
        <button @click="setOrderType(1)">年龄升序</button>
        <button @click="setOrderType(2)">年龄降序</button>
        <button @click="setOrderType(0)">原本顺序</button>
    </div>
</div>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#demo',
        data: {
            searchName: '',
            orderType: 0,// 0代表原本、1代表升序、2代表降序
            persons: [
                {name: 'Tom', age:18},
                {name: 'Jack', age:16},
                {name: 'Bob', age:19},
                {name: 'Rose', age:17}
            ]
        },
        computed: {
            filterPersons(){
                // 取出相关的数据
                const {searchName, persons, orderType} = this;
                // 最终需要显示的数组
                let fPersons;
                // 对persons进行过滤
                fPersons = persons.filter(p => p.name.indexOf(searchName)!==-1);
                // 排序
                if(orderType!==0){
                    fPersons.sort(function(p1, p2){
                        // 1代表升序、2代表降序
                        if(orderType===2){
                            // 如果返回负数则p1在前，返回正数则p2在前
                            return p2.age - p1.age;
                        }else{
                            return p1.age - p2.age;
                        }
                    })
                }
                return fPersons;
            }
        },
        methods: {
            setOrderType(orderType){
                this.orderType = orderType;
            }
        }
    })
</script>

事件处理

1. 绑定监听:
   v-on:xxx="fun"
   @xxx="fun"
   @xxx="fun(参数)"
   默认事件形参: event
   隐含属性对象: $event
2. 事件修饰符:
   .prevent : 阻止事件的默认行为 event.preventDefault()
   .stop : 停止事件冒泡 event.stopPropagation()
3. 按键修饰符
   .keycode : 操作的是某个keycode值的健
   .enter : 操作的是enter键

<div id="example">

    <h2>1. 绑定监听</h2>
    <button @click="test1">test1</button>
    <button @click="test2('hello')">test2</button>
    <!-- <button @click="test3($event)">test3</button> -->
    <button @click="test3">test3</button>
    <button @click="test4(123, $event)">test4</button>

    <h2>2. 事件修饰符</h2>
    <div style="width: 200px;height: 200px;background: red" @click="test5">
        <div style="width: 100px;height: 100px;background: blue" @click.stop="test6"></div>
    </div>

    <a href="http://www.baidu.com" @click.prevent="test7">去百度</a>

    <h2>3. 按键修饰符</h2>
    <input type="text" @keyup.13="test8">
    <input type="text" @keyup.enter="test8">

</div>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#example',
        data: {
            test1(){
                alert('test1');
            },
            test2(msg){
                alert(msg);
            },
            test3(event){
                alert(event.target.innerHTML);
            },
            test4(number, event){
                alert(number + '---' + event.target.innerHTML);
            },
            test5(){
                alert('out');
            },
            test6(){
                alert('inner');
            },
            test7(){
                alert('点击了');
            },
            test8(event){
                // if(event.keyCode === 13){
                    alert(event.target.value + ',' + event.keyCode);
                // }
            }
        }
    })
</script>

表单输入绑定

1. 使用v-model(双向数据绑定)自动收集数据
   text/textarea
   checkbox
   radio
   select

<div id="demo">
    <form action="/xxx" @submit.prevent="handleSubmit">
        <span>用户名: </span>
        <input type="text" v-model="username"><br>

        <span>密码: </span>
        <input type="password" v-model="pwd"><br>

        <span>性别: </span>
        <input type="radio" id="female" value="女" v-model="gender">
        <label for="female">女</label>
        <input type="radio" id="male" value="男" v-model="gender">
        <label for="male">男</label><br>

        <span>爱好: </span>
        <input type="checkbox" id="basket" value="basket" v-model="hobby">
        <label for="basket">篮球</label>
        <input type="checkbox" id="foot" value="foot" v-model="hobby">
        <label for="foot">足球</label>
        <input type="checkbox" id="pingpang" value="pingpang" v-model="hobby">
        <label for="pingpang">乒乓</label><br>

        <span>城市: </span>
        <select v-model="cityId">
            <option value="">未选择</option>
            <option :value="city.id" v-for="(city, index) in allCitys" :key="index">{{city.name}}</option>
        </select><br>
        <span>介绍: </span>
        <textarea rows="10" v-model="desc"></textarea><br><br>

        <input type="submit" value="注册">
    </form>
</div>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#demo',
        data: {
            username: '',
            pwd: '',
            gender: '女',
            hobby: ['foot'],
            allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SH'}, {id: 3, name: 'GD'}],
            cityId: '1',
            desc: ''
        },
        methods:{
            handleSubmit(){
                console.log(this.username, this.pwd);
            }
        }
    })
</script>

Vue实例_生命周期

1. vue对象的生命周期
   1). 初始化显示
   • beforeCreate()
   • created()
   • beforeMount()
   • mounted()
     2). 更新显示：this.xxx = value
   • beforeUpdate()
   • updated()
     3). 销毁vue实例: vm.$destory()
   • beforeDestory()
   • destoryed()
2. 常用的生命周期方法
   mounted(): 发送ajax请求, 启动定时器等异步任务
   beforeDestory(): 做收尾工作, 如: 清除定时器

<div id="test">
    <button @click="destroyVM">destroy vm</button>
    <p v-show="isShow">Vue实例的生命周期</p>
    <p>{{isShow}}</p>
    <p>{{isShow}}</p>
    <p>{{isShow}}</p>
    <p>{{isShow}}</p>
</div>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#test',
        data: {
            isShow: true
        },
        // 1、初始化阶段
        beforeCreate(){
            console.log('beforeCreate()');
        },
        created(){
            console.log('created()');
        },
        beforeMount(){
            console.log('beforeMount()');
        },
        mounted(){// 初始化显示之后立即调用（1次）
            console.log('mounted()');
            this.intervalId = setInterval(() => {
                console.log('-------->');
                this.isShow = !this.isShow;// 更新数据
            }, 1000);
        },
        // 2、更新阶段
        beforeUpdate(){
            console.log('beforeUpdate()');
        },
        updated(){
            console.log('updated()');
        },
        // 3、死亡阶段
        beforeDestroy(){// 死亡之前调用（1次）
            console.log('beforeDestroy()');
            // 清除定时器
            clearInterval(this.intervalId);
        },
        destroyed(){
            console.log('destroyed()');
        },
        methods: {
            destroyVM(){
                // 干掉VM
                this.$destroy();
            }
        }
    })
</script>