Vue.js知识总结 （一）

Vue.js框架是什么以及核心内容

Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue
采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue
生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

---

Vue.js通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
这句话有两个关键词：数据绑定 和 视图组件。

Vue的数据驱动：数据改变驱动了视图的自动更新，传统的做法你得手动改变DOM来改变视图，vuejs只需要改变数据，就会自动改变视图，一个字：爽。再也不用你去操心DOM的更新了，这就是MVVM思想的实现。

视图组件化：把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。

Vue.js的优点

1. 简易安装（vue.js是一个js库，直接在外部引入即可）
2. 数据驱动视图
3. 数据双向绑定（Vue.js还提供了方便的语法指令，实现视图和数据的双向绑定）
4. 组件化（组件化就是把页面中特定的区块独立抽出来，并封装成一个可方便复用的组件。）

创建一个Vue实例

第一步：创建语法

<script>
      let vm = new Vue({});
</script>

通过关键语句 new Vue( )我们就可以创建一个Vue实例：vm了。我们注意到了我们给Vue( )传了一个参数选项，是一个空对象。

第二步：设置数据

 let vm = new Vue({
   //实例vm的数据
   data:{
          name: "张三",
          age :  21
     }
  });

写法也很简单，参数对象不再是一个空对象，它包含一个属性：data，而data的值也是一个对象，这个对象就是我们给实例vm设置的数据了。比如：name为张三，age为21等等。

第三步：挂载元素

视图view部分：

<div id="app"></div>

视图（html部分）上我们有一个id为”app”的div元素。

let vm = new Vue({
  //挂载元素
  el:'#app',
  //实例vm的数据
  data:{
        name: "张三",
        age :  21
    }
  });

参数中我们不但有属性“data”，还多了个属性：“el”，el参数提供一个在页面上已经存在的DOM元素，作为我们实例vm的挂载目标。表示我们的实例vm和id为“app”的DOM节点就关联起来了。

第四步：渲染

实例vm创建好了，数据data有了，DOM节点也关联起来了，最后一步，就是把vm的数据绑定到指定的视图上了，也就是数据渲染。

<div id="app">
    我是{{ name }}，今年{{ age }}岁
</div>

我们只需要用一个双大括号：{{ }} 即可，你可以留意到，{{ name }} 和 {{ age }} 就是我们给实例vm设置的数据name和age，我们用{{ }}可以直接读取到它们的值。

定义一个vue实例的4个常用选项

filters 过滤器

假设我们有一组数字，都是小数，num1，num2，num3都是Vue实例vm的小数，我们把它展示在视图上。
突然，需求改了，我们不能把小数展示出来，需要把小数转换成整数再显示。这个时候，我们需要把三个小数经过过滤处理后再展示，不能直接展示。这种情况就需要用到Vue的filters过滤器了。

let vm = new Vue({
  //挂载元素
  el:'#app',
  //实例vm的数据
  data:{
         num1:33.141,
         num2:46.212,
         num3:78.541
    },
  //过滤器
  filters:{
      toInt(value){
         return parseInt(value);
      }
    }
  });

相信大家都注意到了，参数对象除了el和data属性之外，还多了一个filters属性，它的值也是一个对象，里面定义了一个叫toInt( )的方法，传入了一个value的参数，函数的作用就是把传入的参数value，简单地转成一个整出并return回去。

定义完filters属性后，我们怎么用呢？

<div id="app">
    数字1：{{ num1 | toInt}}<br>
    数字2：{{ num2 | toInt}}<br>
    数字3：{{ num3 | toInt}}
</div>

也很简单，如上面代码所示，通过管道符 | 把函数toInt 放在变量后面即可，num1，num2，num3会分别作为参数value传入toInt( value )方法进行运算，并返回一个整数。

computed 计算属性

有时候，我们拿到一些数据，需要经过处理计算后得到的结果，才是我们要展示的内容。
比如：我们有三个数，但是需要展示的是三个数字之和。这种情况，就适合用我们的计算属性computed。

let vm = new Vue({
    //挂载元素
  el:'#app',
    //实例vm的数据
  data:{
         num1:1,
         num2:3,
         num3:6
    },
    //计算属性
  computed:{
        sum(){
          return this.num1+this.num2+this.num3
        }
    }
 });

 <div id="app">
     总和：{{ sum }}
 </div>

计算属性computed用法更简洁，仅需{{ sum }}就能读取到它的计算结果：1+3+6结果应该为10。
需要注意的是，sum的值是依赖data中的数据num1，num2，num3的，一旦它们发生了变化，sum的值也会自动更新。

methods 方法

let vm = new Vue({
    //挂载元素
  el:'#app',
    //实例vm的数据
  data:{
         a:0
    },
    //方法
  methods:{
        plus(){
            return this.a++;
        }
    }
 });

定义一个plus( )的方法在methods中，下面我们把plus( ) 绑定在按钮的点击事件上：

<div id="app">
    {{ a }}
    <button v-on:click="plus">加1</button>
  </div>

在Vue中通过v-on:指令来绑定事件（指令后面章节会介绍），我们点击按钮，methods中的方法plus( )就会被调用,实现给a的值加1，并更新视图。

watch 观察
watch选项是Vue提供的用于检测指定的数据发生改变的api。

上面点击按钮a的值加1的例子，不就是数据发生变化了吗？我们就用watch选项来监听数字a是否发生了变化，如果了监听到了变化，我们就在控制台输入以下a的最新值。

在上个例子的代码基础上，我们加上watch部分的代码：

let vm = new Vue({
    //挂载元素
  el:'#app',
    //实例vm的数据
  data:{
         a:0
    },
    //方法
  methods:{
        plus(){
            return this.a++;
        }
    },
    //观察
  watch:{
        a(){
          console.log(`有变化了，最新值：`);
          console.log(this.a);
        }
    }
 });

我们点击按钮的时候，a的值加1发生了变化，而此时watch监听到了它的变化，便在控制台输出了我们指定的内容。