Vue基础-Vue入门

一、Vue入门基础知识

1、Vue使用的基本操作

i. 先下载，引入vue.js
ii. Vue，实例化一个vue实例化对象（new Vue({})）
    1. 新建一个vue实例化对象（Vue是一个构造函数）
    2. 执行vue构造函数中每一句代码
    3. 将新创建的vue实例化对象赋值给vue构造函数中的this

iii. 往vue实例化对象中传入一个对象（Vue实例化传入的对象里面的值也都为对象，以键值形式对存在，如data对象）

2、Vue的基础知识（应用：普通版的todolist（待办事项））

1) el: 节点挂载

限定Vue语法的作用范围

2) Data(需要渲染的数据，Vue 实例的数据对象)

    a) data的类型可以为：Object | Function。

    注：组件的定义只接受 function（因为函数有自己的作用域，每一个实例的data属性都是独立的）

    b) data可以为：

        1.    自定义数据

        2.    通过ajax获取的后台数据

        3.    Data是一个函数

 3）Vue语法，实现对(DOM)节点的渲染、删除、添加

    a) 模板渲染{{ obj }}（data中的数据可以直接在html中显示,让js变量直接在html中使用）

    b) v-for (列表渲染，使用for循环遍历数据生成节点，遍历对象和数组)，数据驱动视图

    使用：1. 用 v-for 把一个数组对应为一组元素

                v-for=”(item,index) in list”

               list为源数据数组并且item是数组元素迭代的别名

                index为当前项的索引

                2、一个对象的 v-for

                v-for="（value,key） in object"

                object为data中定义的一个对象，value为对象的值，key为对象的键名

    c) 条件渲染v-if、v-show（使用数据隐藏和显示节点）
        1.v-if删除了节点
        2.v-show隐藏了节点(使用display:none隐藏了节点)

  d )删除节点，使用@click时间并在methods中定义delitem删除函数，并用v-bind绑定自定义属性，如：:data-id="item.id"

        事件处理@click与回调函数methods （与v-bind结合使用，因为在进行操作的时候需要传入值）

        1. 在节点上直接绑定click事件
        2. 在methods属性中定义函数
        3. methods中使用data中的数据必须使用this访问

        4. this代表vue实例化对象

   e) 添加节点,通过input的value值与data绑定

   v-model与表单元素的value值的双向数据绑定（在表单控件或者组件上创建双向绑定,在节点上直接修改value属性）
            双向数据绑定

           1. 将表单中input的值value和data中值绑定起来

           （data设置该数据的属性值title:"默认值"，input中绑定v-model="title"，添加按钮绑定@click="additem"）

            2. data改变input[value]改变

           data中的title的值改变，input中的value也会发生改变

            3. Input[value]改变data改变

            在input中输入值，点击添加按钮，data中的数据发生改变

    f)  绑定属性（自定义属性）（绑定属性值）V-bind:href，data-id
            1. 简写(：href)
            2. v-bind：的缩写 : （冒号）

    g)  v-if删除了节点,页面审查不到 

            v-show隐藏了节点(使用display:none隐藏了节点),页面能够审查到

  h)  template：定义组件模板，模板中的内容即为组件的内容
        1. 在template标签中写html模板,并标注id
        2. 在组件中使用template属性通过id引用template标签 

        3. 模板将会替换挂载的元素。挂载元素的内容都将被忽略

        4.    template中的html不会被浏览器首次加载时所渲染，在调用了组件之后才渲染的。

也就是说:template: '' 表示用替换index.html里面的

   i) 应用：普通版的todolist

    
    
    
    
    



    

            
        
{{message}}待办事项
        
        
{{message}}待办事项
        
即将添加的待办事项： {{title}}
        

            

                
id
                
标题
                
操作
            
            
            
            

                
{{item.id}}
                
{{item.title}}
                

                    删除
                
            
            
            

                
{{key}}
                
{{value}}
                

                    删除
                
            
        
        

            添加待办事项
            
            
            
        
        添加
        

            
作者信息：{{author}}
            
来源: 点击打开
        
    
    
    
    

3、Vue组件

1）组件的创建与注册

• 创建组件：Vue.extend({})
• 创建组件，要在实例化对象之前创建
• 组件是新的vue实例或者说是精简版的vue实例
• 每一个组件里必须有一个根元素
• 在父组件中使用components注册组件

  2) 组件通信

    1. 父子组件通信（通过局部注册）

    1)父组件传数据给子组件：（可以实现列表的渲染等操作）

        a) 为什么数据要放在父组件，数据需要分发，数据可能会在多个子组件中使用，所以vue官方推荐所有的数据都放在父组件中
        b) 父组件调用子组件的时候，给子组件绑定自定义属性，将值传递给子组件
       c) 子组件通过props接收父组件传递过来的数据
        d) props中的数据可以直接在子组件的模板中使用
        e) props在子组件中才有，父组件中没有
    2) 子组件传数据给父组件：$emit （用于实现节点的删除和添加等操作）
        a) 因为数据在父组件中，所以我们需要通过子组件将需要操作的数据传递给父组件，让父组件去操作数据
        b) 子组件通过$emit自定义一个事件，并且将需要操作的数据通过$emit传递给父组件
        c) 父组件我们需要@符来触发自定义事件，并且定义函数当做事件的回调函数，回调函数中形式参数接收子组件传过来的数据

a) 列表渲染（步骤）

• 渲染节点时，父组件需要调用子组件，而数据在父组件中，子组件不能直接使用，所以父组件需要传数据给子组件，子组件获取数据后进行渲染。
• 在父组件中绑定自定义属性如( :list="list")，子组件通过props接收父组件传递过来的数据，props接收的数据可以直接在子组件的模板中使用，然后用v-for进行数据的列表渲染。
• ps: props在子组件中才有，父组件中没有

b) 删除节点

• 删除节点，在子组件中点击删除按钮获取需要删除的记录的id，并将id传递给父组件，父组件中定义delitem进行删除。
• 子组件通过$emit自定义一个事件，并将需要操作的数据通过$emit传递给父组件 （如：this.$emit("delitem",id)）
• 父组件中需要@符去触发自定义事件，并且自定义函数当作事件的回调函数，回调函数中形式参数接收子组件中传过来的数据。

c) 添加节点

添加节点首先需要进行input value值和data数据的双向绑定，然后通过 子组件的additem方法获取输入的对象，并通过$emit将数据对象传入至父组件中，父元素通过@符触发自定义事件，接收子组件传递过来的数据，并实现定义的函数。将数据push到list中。

    
    
    
    
    



    

        
待办事项
        
        
        
    
    
    
    
    

2、兄弟组件通信（全局注册，在创建的时候就已经注册了）

    a) 使用Vue.component定义（包括创建和注册）全局组件
    b) 定义另外一个vue实例vm
    c) 在添加数据数据兄弟组件中使用vm.$emit传送数据
    d) 在获取的数据兄弟组件中created生命周期函数中使用vm.$on来接收数据，使用v-for渲染数据，绑定点击事件，删除元素

    
    
    
    
    



    

        
待办事项
        
        
    
    
    
    
    

3、生命周期函数

d) Vue生命周期函数（执行vue构造函数的过程中，必须执行的代码，执行生命周期就是执行构造函数）
        i. 生命周期：Vue 实例化对象从开始创建、初始化数据、编译模板、挂载节点elDom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期，各个阶段有相对应的事件钩子（在这个过程中会自己执行的函数）
        ii. beforeCreate：vue实例化对象创建完成之前
            1. this已经指向vue实例化对象，但不能访问data和methods中的属性和方法
        iii. created：vue实例化对象创建完成
            1. this已经指向vue实例化对象，可以访问data和methods中的属性和方法
            2. 未挂载到DOM，不能访问到$el属性
            3. 作用：
a) 常用于首屏数据渲染时，发送ajax请求获取数据。
        iv. beforeMount：通过数据生成了全部虚拟节点（使用createElement创建的节点，但是这些节点没有插入到html文档中），但还没有挂载到el节点上。
            1. 可以访问到$el
        v. mounted：vue实例挂载到el节点（DOM）上
            1. 把通过数据生成的虚拟节点，挂载 到el节点中
            2. 作用：
a) 常用于操作真实的dom节点
        vi. beforeUpdate：
            1. 手动添加的虚拟节点，但是还未插入到el（真实节点）中更新之前
            2. 不能操作该节点
        vii. updated：
            1. 手动添加的虚拟节点已经更新完成。
            2. 可以操作到手动添加的节点
        viii. beforeDestroy：(调用vm.$destroy()销毁实例)
            1. vue实例销毁之前调用。
        ix. destroyed：
            1. 实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

    
    
    
    




    

        

            
{{item}}
        
        添加li
    

    
    
    

4、computed计算属性与watch侦听器与methods方法的区别

    1）计算属性：适合大量计算，不适合大量逻辑判断，内存会缓存计算的结果，当要计算的数据相同时，它不会进行二次计算，而是取缓存里的数据。
    2）methods：适合大量逻辑处理（if,for等等），它不会缓存计算的过，当要计算的数据相同时，它会进行二次计算。

    3 watch：侦听需要变化的数据，执行回调函数。(可以用来监听pn的变化，实现分页)

    
    
    
    


    
    

       
计算属性的结果为：{{count}}
       
methods计算的结果为：{{count2()}}
       watch:
       
c的值为:{{c}}
    

    
    

5、插槽slot
    1.） 从父组件中将带有数据的html模板传入到子组件
        a) 在父组件中使用slot属性定义插槽（插槽写在调用子组件的内部）
        b) 在子组件中使用调用插槽
        c) 没有名字的模块，其内容会全部到没有名字的插槽中
        d) 作用：
                相当于不使用props也可以将父组件的data传递给子组件
    2.） 具名插槽
            a) 带有特点name属性的插槽
    3. ）匿名插槽
        a) 没有name属性的插槽，除了具名插槽，剩下的都会被内容都会被渲染到匿名插槽中
    4. ）作用域插槽
        a) 绑定了数据的插槽
        b) Slot-scope

        c) 必须使用template定义，并且要使用slot-scope属性定义一个引用

    删除节点步骤：1、先创建模板、创建组件、注册组件

                           2、父组件给子组件绑定自定义属性，将值传递给子组件；使用v-for渲染数据

                            3、将删除的按钮放到作用域插槽中，创建作用域插槽来传递数据

    5. ）三者区别：
        a) 具名插槽和匿名插槽内容和样式与数据都由父组件提供

        b) 作用域插槽可以传递数据，数据由子组件提供

    
    
    
    


    

        
        
            
我是头部
            
我是内容
            
我是尾部
           
            
 
                
{{item}}
            
        
    
    
    
    
    

    
    
    
    
    



    

        
待办事项
        
            
            
            
        
        
    
    
    
    
    

6、ref与$refs

    1. ）使用ref对元素或子组件加一个标识
    2.）this.$refs.标识

    3. ）作用：可以直接操作真实节点和子组件

    
    
    
    



    

        
        
        
        
        点击