Vue01

一、认识Vue

定义：一个构建数据驱动的 web 界面的渐进式框架

优点：

1、可以完全通过客户端浏览器渲染页面，服务器端只提供数据

2、方便构建单页面应用程序（SPA）

二、引入Vue

三、Vue实例

• 实例：el

• 数据：data

    
    


    

        
        {{ msg }}
        {{ num }}
        
        {{ 1 + 2 + 3 * 4 }}
    

• 方法：methods

    
    
    


    

        
        
{{ abc }}
        
{{ def }}
        
88888
    

• 计算属性：computed

    
    


    

        

            
            姓:
        
        

            名:
        
        

            
            
姓名: {{ fisrt_name + " " + last_name }} 
            
            
姓名: {{ full_name }} 
            
            
姓名: {{ full_name_bac() }} 
        
    

• 监听器：watch

    
    


    

        

            姓名:
            
        
        
姓: {{ first_name }} 
        
名: {{ last_name }} 
    

• 分隔符：delimiters

    
    


    

        {{ msg }} ${ msg }
    

• 实例对象使用成员属性与方法

四、实例生命周期钩子

代码示例：

    
    


    

        {{ msg }}
    

• 定义

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

• 钩子方法

beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。

beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。

updated：数据更新时调用，发生在虚拟 DOM 打补丁之前。

activated：keep-alive 组件激活时调用。

deactivated：keep-alive 组件停用时调用。

beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed：Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

errorCaptured：2.5.0+ 新增，当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

• 重点钩子

created：实例完全创建完毕(属性与方法都准备就绪)。可以进行数据操作(请求后台数据，重新渲染最新数据)

mounted：虚拟DOM构建完毕，并完成实例的el挂载。可以重新操作页面DOM