Vue课程学习笔记-day02

复习
    1、回顾
    2、什么是vue
        mvvm、mvc
        vue特点
            es6
            双向数据绑定
            零DOM操作

            mvvm与mvc的区别？
            vue与jQuery的区别？

    3、vue基础语法
        1) 使用方式
            cdn
            npm
        2) vue实例对象
            let vm = new Vue({});

            <div id="app">
                {{msg}}
            </div> 
            new Vue({
                el:'#app',
                //数据
                data(){
                    return {
                        msg:'helle vue'
                    }
                },
                //方法
                methods:{
                    
                }
            });

            注意：vue可以对data中的值进行监听，当data中的数据发生改变时，页面刷新
                但是数组、对象无法被监听到

        3) 声明式渲染
            变量
                {{msg}}
            js表达式
                {{num + 1}}
                {{str.split('').reverse().join('')}}
        
        4) 列表渲染 (v-for)
            1. 数组 
                list = [{},{},{},{}]
                <div v-for="(item,index) in list" v-bind:key="item.id">
                    <div>{{item.id}}</div>
                    <div>{{item.name}}</div>
                </div>
                
                v-for是一个指令，用于列表渲染
                item当前每一项
                index当前每一项的索引
                list被遍历数组
                key是为为vue提供标识，取值为数字或者字符串
            
            2. 对象
                {id:1,name:'xpf'}

                <div v-for="(value,key,index) in list">
                    <div>{{key}}:{{value}}:{{index}}</div>
                </div>
                
                value键值
                key键名
                index索引
            
            3. 数字(整数)
                <div v-for="n in 5">
                    <div>{{n}}</div>
                </div>

            4. *数据更新
                1、数组
                    let arr = [1,2,3,4]
                    let random = Math.random();

                    let arr = [...arr,random]
                    arr.push(random);
                2、对象
                    对象新增属性值的时候，页面不更新
                    let obj = {id:1,name:'xpf'}
                    gender = 'male';
                    address = {
                        province:'安徽省',
                        city:'合肥市'
                    }

                    1. this.$set(this.obj,'gender','male')
                    2. Object.assign()
                        this.obj = Object.assign({},this.obj,address)
                    3. this.$forceUpdate() 【一般情况下不推荐】
                    4. lodash()
                        this.obj = _.clone(this.obj)

        5) 属性的绑定
            v-bind:key='xxx'
            ===>
            :key='xxx'

学习
        6) 条件渲染 (v-if/v-show)
            1. v-if
                v-if v-else
                v-if v-else-if .. v-else

                注意：使用key管理可复用的元素
                    Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染
                    1. 加key
                        加上key的元素会在每次切换的时候都去重新渲染
                    2. 不加key
                        没有jiakey的元素，在每次切换的时候都不会渲染，复用已存在的元素
                    参考：3-key.html
        
            2. v-show
                根据条件正确与否，显示某一块内容，但是v-show仅仅是切换元素display属性
                参考：4-vSho.html
            
            3. v-if与v-show
                1) v-if式根据条件判断是否渲染元素，而v-show自始至终都渲染，仅仅改变display属性
                2) v-if可以搭配v-else，但是v-show没有
                3) 
                    频繁地切换  ==>  v-show 较好
                    条件很少改变  ==>  v-if 较好

                注意：不推荐同时使用 v-if 和 v-for

        7) 事件绑定 (v-on)
            jQuery中需要先获取到DOM节点，再绑定事件

            1. 事件绑定
                v-on:click="函数"
                    <img v-on:click="toggle">
                v-on:click="js表达式"
                    <div v-on:click="num += 1">{{num}}</div>
                    <div v-on:click="alert('hello vue')">123</div>
            
            2. 事件参数
                v-on:click="函数(参数)"
                    v-on:click="handler(1)"
                    v-on:click="handler('1')"

            3. 事件简写
                v-on:click="函数"
                ===>等价于
                @click="函数"
                
            4. 事件对象(一般不推荐使用)
                @click='handler($event)'
                通过$event可以访问到被点击的DOM节点
            
            5. 事件修饰符
                <a href="" @click.prevent="login($event)">登录</a>

                事件修饰符是以.开头的指令后缀来表示的
                    @click.xxx
                        @click.prevent
                            表单提交的默认行为，a标签的默认行为

                        @click.stop
                            阻止单击事件的继续传播
            
            6. 按键修饰符
                v-on:keyup.enter="" 回车键
                @keyup.enter="" 

                @keyup.up
                @keyup.left
                @keyup.right
                @keyup.down

        8) 表单 (v-model)
            双向数据绑定
            1. v-model指令在表单input、textarea及select元素上创建双向数据绑定
                model                   vm                  view
                模型                     viewModel          视图
                data() {
                    return {                                <input type="text" v-model="username">
                        username:'xpf'
                    }
                },

                双向：
                    data中的值发生了改变，会影响视图
                    视图输入了值，又会改变data中的值
                
                注意：
                    v-model 会忽略所有表单元素的 value、checked、selected的初始值而总是将 Vue 实例的数据作为数据来源。
                    你应该通过 JavaScript 在组件的 data 选项中声明初始值。

            2. 对于表单的双向数据绑定
                1、form.title的值绑定到了输入框的value上
                2、form中没有title属性时，会自动的在输入时去创建，有title时，会去对title进行修改
                3、在select中，如果v-model的初始值未能匹配到任何值，select为'未选择'的状态
                    如果希望默认选择第一个，给定一个初始值即可
                    form:{
                        title:'初始标题',
                        categoryId:1
                    }
                4、表单具有默认行为，需要使用prevent阻止

                单选按钮
                    在给单选按钮绑定值的时候，需要添加value属性