Vue笔记1-Vue初介绍

朋友们，博客写到一半一定要记得存草稿，别头脑一热就把网页关了，要不写了一大半还得重写。

01 Vue Introduction

我是Vue，是个渐进式框架，我家买全家桶的，能满足你不少特殊的需求

• 渐进式框架
  • 使用Vue可以作为项目的一部分，嵌套重构项目
  • 对于多个页面群，可以有选择的挑出个别页面使用Vue重构
• 全家桶：Core+Vue-router+VueX
• 特点：
  • 解耦视图和数据
  • 复用组件
  • 前端路由
  • 状态管理
  • 虚拟DOM

02 Vue Install

Methods 1：CDN

<!--开发环境版本：包含有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--生产环境版本：优化了尺寸和速度-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

NPM包源代码浏览站点

Methods 2：NPM安装

npm包管理器竭诚为您服务

适用规模：构建大规模应用

配合工具：webpack、Browserify

$ npm install vue

03 Start to Use Vue

3.1 Vue的声明式编程

通常我们使用JavaScript DOM来管理一个Html元素，一般都要以下几个 步骤：

1. 创造Html元素，设置元素的id属性。
2. 使用js代码定义一个变量。
3. 使用js代码改变该变量的值来反显到Html元素上。

这种一步接着一步，都要你亲自把控的编程范式，即命令式编程

引入Vue的做法就比较不一样了：

<div id="container">
    <h2>{{variableA}}</h2>
    <p>{{variableB}}</p>
</div>
<script src="手动引入vue.js源码路径"></script>
<scritp>
    //使用一个常量接受被创建的vue实例
    const app = new Vue({
        el:"#container",   //用于挂载要管理的元素
        data:{            //定义需要使用到的数据
            variableA:"I am variableA",
            variableB:"I am variableB",
        }
    })
</script>

Vue的编程范式为声明式编程

• JS就像厨具，使用JS语言按部就班的亲手料理
• Vue则是厨师，按照给它的食材和需求达成目标，但烹饪过程是不可见的

3.2 Vue的响应式数据

我们在Vue实例操作的元素之中添加一个数组数据，

然后在console对数组数据进行修改，就会发现显示在页面中的数据也会实时变化，

这就是Vue的响应式特点，下面分别是响应部分和Vue实例声明部分代码

<div id="app">
    <!--
        v-for：vue的循环关键属性
        v-for作用域：被添加了该属性的元素，即被循环元素
        v-for属性类型：字符串
        v-for属性值："循环单位 in 被循环数据组"
    -->
    <ul>
        <li v-for="item in messageList">{{item}}</li>
    </ul>
</div>

<script>
    const app = new Vue({
        el:"#app",
        data:{
            messageList:['list 1','list 2','list 3'],
        }
    })
</script>

3.3 Vue的声明式函数体验

3.1中我们简单的感受到了Vue的声明式特点带来的编程体验，

接下来我们用一个简单的计数器小案例来体验一下Vue的监听函数的声明与使用：

第一部分：在html元素中使用带有vue监听属性的元素

<div id="#app">
    <h1>Counter:{{count}}</h1>
    <!--
        在语法上，vue事件监听属性有2种添加方式：
        - v-on:事件名="已声明函数名/行内语句"
        - @事件名="已声明函数名/行内语句"
        碎碎念：事实上我觉得这两种都挺不方便的
    -->
    <button v-on:click="count++">add</button>
    <!--
        在事件属性值上，也有2种定义方式：
        - 行内执行语句（监听事件简单的时候使用）
        - 已声明函数名（在Vue实例中methods中声明过的函数，推荐使用）
    -->
    <button @click="sub">sub</button>
</div>

第二部分：在Vue实例的声明中添加监听函数

const app = new Vue({
    el:"#app",
    data:{
        count:0,
    },
    methods:{  //声明vue实例的函数
        sub:function(){
            this.count--;
        }
    }
})

04 Vue的MVVM

Wiki中对MVVM的介绍

• M - Model - Plain JavaScript Objects
• V - View - DOM
• VM - View Model - Vue实例（DOM Listeners/Data Bindings）

05 Vue实例的options

如上面的例子所示，Vue实例在创建时常需要一个拥有指定属性的options对象作为参数，

这些特定的属性，即实例property可以在API参考中进行查阅、

题外话：开发过程中，方法和函数的区别在哪里？

答：首先方法英文methods，一般情况下定义在类中，和某一实例对象挂钩。函数英文function，并不特别强调和对象的关系。

06 Vue的生命周期

Vue作为声明式语言固然对于程序员而言省了很多要写的代码，

但是程序员不写不代表没有人写，那自然就是Vue来写了，

所以在我们创建一个Vue实例时，会发现Vue源码中对该实例进行了初始化创建、监控绑定、数据更新、销毁等一系列黑箱操作，这些操作被屏蔽了但也没完全屏蔽，因为Vue在生命周期内每一步的最后都会提供一个callHook回调函数供程序员调用，做点小操作啥的。