渐进式 JavaScript 框架

通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目

走进Vue

what -- 什么是Vue

可以独立完成前后端分离式web项目的JavaScript框架

why -- 为什么要学习Vue

三大主流框架之一：Angular React Vue先进的前端设计模式：MVVM可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发

special -- 特点

单页面web应用数据驱动数据的双向绑定虚拟DOM

how -- 如何使用Vue

• 开发版本：
• 生产版本：

    
         {
    { }}
    

Vue实例

el：实例

new Vue({    el: '#app'})// 实例与页面挂载点一一对应// 一个页面中可以出现多个实例对应多个挂载点// 实例只操作挂载点内部内容

data：数据

    
         {
    { msg }}
    
    
    

methods：方法

    
    
     
测试
    
     
测试
    
    
    

computed：计算

    
    
         
         
     
              {
    { c }}    
     
    

watch：监听

    
    
         
     
              {
    { a }}        {
    { b }}    
     
    

delimiters：分隔符

    
         ${ msg }
    

生命周期钩子

• 表示一个vue实例从创建到销毁的这个过程,将这个过程的一些时间节点赋予了对应的钩子函数
• 钩子函数: 满足特点条件被回调的方法
• 详情参见：

new Vue({    el: "#app",    data: {        msg: "message"    },    beforeCreate () {        console.log("实例刚刚创建");        console.log(this.msg);    },    created () {        console.log("实例创建成功, data, methods已拥有");        console.log(this.msg);    },    mounted () {        console.log("页面已被vue实例渲染, data, methods已更新");    }    // 拿到需求 => 确定钩子函数 => 解决需求的逻辑代码块})