vue学习

1. 介绍
   兼容性：ie8+
   特点：

   1. 声明式渲染     
       只需要将vue实例中的变量声明在模块中即可
       <p>{{message}}</p>
   2. 使用指令完成条件渲染和列表渲染
   3. 双向数据绑定
       <input type="text" name="username">
   4. 组件化（模块化）
   
   

2. 安装
   1) script

   只适合学习使用
   

   2) npm

   $ npm install vue --save
   

   3) 脚手架

   无需安装只管使用
   

3. vue实例对象
   1) 实例化

   let vm = new Vue({
       el,            // 用于表示模板
       data:{},    // 用于保存该vue实例的变量，用于页面渲染或者双向数据绑定 ,当vue实例创建后，data中的值就会放入到响应式系统中，只要data中的值发生了变化，页面中也就相应的得到响应。
   
   })

   2) vue实例可以直接访问data中的变量

   let vm = new Vue({
       data:{
           a:1,
           b:2
       }
   })        
   vm.a
   

4. vue的生命周期
   vue实例对象由创建到页面渲染到最后销毁的整个过程
   1) 生命周期函数

   breforeCreate
   created
       vue实例对象的创建完成，data中的变量也绑定在vue实例对象上
   beforeMount
       在模块转换为具体的虚拟dom之前的阶段，这个阶段完成mount的准备工作，比如将html转换为template,获取data中变量
   mounted
       已经mount完毕，也就是说已经将data中的变量设置到了template中
   beforeUpdate
       当data中的值发生了变化，网页准备重新更新之前
   updated
       当网页重新渲染完成
   beforeDestory
   destoryed

   2) 生命周期函数的应用

   这些函数作为Vue构造函数参数的属性存在，可以使用函数简写的语法，在生命周期钩子函数中，this指向指向vue实例
   
   let vm = new Vue({
       created(){
           this -> vm
       }
   })

5. 双向数据绑定

6. 模板语言
   1) 声明式渲染

   {{message}}
   {{表达式}}
   

   2) 指令

   v-on:事件类型
   v-bind:属性
   v-if="条件"
   v-show="条件"     
       当dom元素频繁的显示与隐藏相互切换使用v-show，因为在隐藏与显示切换的时候不操作dom对象只改变dom对象的display属性
   v-for="item in list"
   v-html="v"

   3) 指令简写

   v-on:click         => @click
   v-bind:value    => :value
   
   案例：
   <form action="" @submit="submitHandler"></form>
   <form action="" v-on:submit="submitHandler"></form>
   
   <input type="checkbox" v-bind:value="ids">
   <input type="checkbox" :value="ids">
       :属性 动态绑定，表示ids为变量，去data中匹配这个变量
   <input type="checkbox" value="ids">
       属性     静态绑定，表示ids为值，也就是value的值为ids
   <div v-bind:style="s"></div>
   
   new Vue({
       data:{
           ids:[],
           s:{
               color:"red",
               background:"#ededed"
           }
       },
       methods:{
           submitHandler(){
   
           }
       }
   })
   

7. 事件机制
   1) 事件绑定

   v-on:eventType="handler"
   @eventType="handler"
   @eventType="js表达式"
   

   2) 事件对象

   1. 事件处理函数中没有参数
       <button @click="add"></button>
   
       methods:{
           add(event){
               event就是事件对象
           }
       }
   2. 事件处理函数中有参数
       <button @click="add(3,$event)"></button>
   
       methods:{
           add(num,event){
               num 为3
               event就是事件对象
           }
       }

3) 事件类型修饰符
    1. 事件修饰符
        @eventType.prevent
        @eventType.stop
        @eventType.self
        @eventType.once
        @eventType.capture
        @scroll.passive
    2. 按键修饰符
        只适用于keyup、keydown、keypress
        @keyup.enter
        @keyup.tab
        @keyup.delete
        @keyup.esc
        @keyup.space
        @keyup.up
        @keyup.right
        @keyup.down
        @keyup.left
    3. 系统修饰键
        @eventType.ctrl
        @eventType.alt
        @eventType.shift
        @eventType.meta    
    4. 鼠标按键修饰符
        适用于mouseup、mousedown、mousepress
        @eventType.left
        @eventType.right
        @eventType.middle

1. 动态绑定class与style
   1) class

   :class="表达式"
   :class="{className:flag}"
       className存在与否取决于flag是否为true
   :class="['basic',a]">

   2) style

   style="backgrond:pink;color:#fff"
   =>
   :style="{background:'pink',color:'#fff'}"
   =>
   :style="{background:a,color:b}"
   data:{
       a:"pink",
       b:"#fff"
   }
   =>
   :style="[a,b]"
   data:{
       a:{background:"pink"},
       b:{color:"#fff"}
   }

2. 条件渲染
   v-if
   v-else-if
   v-else

   案例分析：

   <div v-if='flag' :key="1">
       hello
   </div>
   <div v-else :key="2">
       world
   </div>
   

   v-show

   <div v-show='flag'>
       hello
   </div>
   

3. 列表渲染
   <ul>

   <li v-for="item in list" :key="item">
       {{item}}
   </li>

   </ul>

   data:{

   return {
       list:["国际新闻","国内新闻","体育新闻"]
   }

   }

   list.pop()
   list.push()

4. 深入了解组件
   组件开发 （索菲亚家具设计与定制）
   组件调用 (索菲亚售后安装)

   1) 组件注册

   全局注册
       所有的vue实例对象都可以调用的组件
       Vue.component(组件名,config)
       在组件中，data属性不能为对象了，而必须为一个函数，这个函数返回一个对象
       config:{
           template:``,        //模板，类似于之前的el
           props:["title"],// 期望父组件传递给当前组件的参数title
           data(){                    //保证每个组件都拥有一份独立的data数据
               return {
   
               }
           },
           components:{},    //组件的局部注册
           methods:{},
           beforeCreate(){
   
           },
           ...
       }
   局部注册
       当前的vue实例对象才能调用该组件
       new Vue({
           el,
           data:{
   
           },
           methods:{},
           components:{
               组件名:config
           }
       })

   2) 组件之间参数的传递 props【父->子】

   用于声明当前组件期望接收父组件传递给它的参数，这些参数可以通过this来直接访问
   1. 通过数组来声明参数名称
       props:["title","type"]
   2. 通过对象来声明参数的名称以及数据类型
       props:{
           title: String,
         likes: Number,
         isPublished: Boolean,
         commentIds: Array,
         author: Object,
         callback: Function,
         contactsPromise: Promise 
       }
   3. 静态传值、动态传值
       静态传值只能传递字符串的值
       <my-test 
           a="hello world"     //静态传值
           :b="true"                  //动态传值
           :c="12.3" 
           :d="{a:'terry'}"
           :e="()=>{alert(1)}"></my-test>
   
       let myTest = {
           template:`
               <div>
                   <p>a:{{typeof a}} , {{a}}</p>
                   <p>b:{{typeof b}} , {{b}}</p>
                   <p>c:{{typeof c}} , {{c}}</p>
                   <p>d:{{typeof d}} , {{d}}</p>
                   <p>e:{{typeof e}} , {{e}}</p>
               </div>
           `,
           props:{
               a:String,
               b:Boolean,
               c:Number,
               d:Object,
               e:Function
           }
       }
   4. 单向数据流
       所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
   

3) 组件之间函数的传递 自定义事件【子->父】
    在子组件的方法调用的时候，需要修改父组件中的变量
    思路：
        1) 子组件直接修改父组件的值   X
        2) 当子组件中函数执行完毕后通知父组件的函数进行执行
            子组件的事件处理函数中
                this.$emit("foo")    通过父组件触发foo函数
            父组件
                <son-component @foo="handler"> </son-component>
            当this.$emit("foo")，父组件中的handle就要执行了
4) 插槽
    1. 匿名插槽
        <my-component>
            hello world
        </my-component>

        let myComponent = {
            template:`
                <div>
                    <h2></h2>
                    <div>
                        <slot></slot>
                    </div>
                </div>
            `
        }

        slot会接受到my-component的内容
    2. 具名插槽
        <my-component>
            实参1
            <template v-slot:content>
                <div>content的内容</div>
            </template>
            实参2
            <template v-slot:footer>
                <div>footer的内容</div>
            </template>
        </my-component>

        let myComponent = {
            template:`
                <div>
                    <h2></h2>
                    <div>
                        形式参数1
                        <slot name="content"></slot>
                    </div>
                    <div>
                        形式参数2
                        <slot name="footer"></slot>
                    </div>
                </div>
            `
        }
    3. 作用域插槽

1. 计算属性
2. 监听器
3. 表单
4. 脚手架 vue-cli

1) 为什么使用脚手架

    1. 模块化机制
    2. vue-cli能够进行项目管理
        1. 创建并且初始化工程
            node_modules
            src
                components
                pages
                App.vue     根组件
                main.js     入口文件
            package.json
        2. 测试
            自带静态服务器
        3. 打包
            vue -> html/css/js

2) 安装脚手架程序
    1. 本地安装node
        > node -v
        v 10.16.0
    2. 全局安装cnpm
        > npm install -g cnpm --registry=https://registry.npm.taobao.org

    3. 全局安装@vue-cli
        > cnpm install -g @vue/cli
        > vue --version
        @vue.cli 4.0.3

    4. 创建app01
        > vue create app01
    5. 安装依赖
        > cd app01
        // 安装axios qs
        > cnpm install axios qs --save

        // 安装element
        > vue add element