前言

本篇作为vue的知识梳理，包括：
- vue的创建
- vue的指令
- vue的插值
- vue的生命周期
- vue的组件
- vue的计算属性
- vue的组件
- 扩展——Es6模块化

vue的特点：

渐进式（vue的侵入性很少）
组件化
数据响应式 -> 其会监控数据的变化，当数据发生变化时，自动重新渲染页面

创建vue工程

直接在页面上引入vue.js
使用脚手架（vue-cli）搭建工程

正课开始

一. 创建vue实例

<div id="app"></div>        //被挂载的元素，
<script>
    // 在这里无论是挂载，还是模板等都有多种写法，后面会慢慢接触
    const vm = new Vue({    // 创建一个vue实例
        el: "#app",          // 挂载 ：  用来控制我们想控制的元素
        template: '',       // 模板 ：  可用来书写代码，模板里只能有一个根元素 否则报错
        data: {},           // 数据 ：  可能用到的数据
        methods: {}         // 方法 ：  可能用到的函数  注意this指向，后面会提到
    })
</script>

知识点：

    当创建vue实例时，Vue会将下面配置成员提升到vue实例中
    1. data配置中的所有成员
    2. methods配置中的所有成员
    3. ...还有后面会介绍

二. 模板语法 - 插值

当要插入数据时可在模板中使用插值
在模板的元素内部使用 {{ js表达式 }}

例：

{{ num + 1 }}
{{ ok ? 'yes' : 'no' }}
{{ '123'.split('').reverse().join('') }}
...

三. $watch - 用于监控数据前后的改变

<div id="app">{{a}}</div>       // {{}}这个就是插值表达式 

<script>
    var data = {a : 1}
    
    var vm = new Vue ({ 
        el:'#app',
        
        data :data              // 注：这两个data不是一个
        // 前面的代表此对象的属性，而后面的代表新定义的变量
    })
    
    vm.$watch ('a',function (newval,oldval) {
        //第一个参数为观察的变量，第二个参数为回调函数
        console.log(newval,oldval)
    })
    vm.$data.a = 2
    //改变的数据要写在 vm.$watch 后
</script>

小知识点：

    上一节说过data配置中的所有成员，会提升到vue实例中
    - 所以 data.a == vm.a == vm.$data.a
    - 即 vm.$data == data

四. 模板语法 - 指令

指令是带有v-前缀的特殊特性，通常作为元素的属性存在，名称上以 v- 开头

常用指令：

v-once  当添加上此指令时，会进行一次性的插值，当数据改变时插值处的内容不会更新
v-html  双大括号语法会将数据解释为普通的文本。而当添加上此指令时，会输出真正的html代码。 v-html = "xxx"
v-bind  Mustache语法不能作用到html特性上。当添加上此指令时，就可以作用在html特性上。 v-bind:属性="xxx"
v-if    根据值的真假来插入或移除该元素  v-if='xxx' , 当xxx取值为true时，该元素会被渲染
v-on    用于注册事件，[语法糖 @]。  @click = 'xxx' 
v-show  根据值的真假来插入或移除该元素  v-show ='xxx'
v-for   基于一个数组渲染一个列表，循环生成元素  v-for = '(item,index) in items'  :key = index  ，可用key属性来确定唯一值
v-model 双向数据绑定，是一个语法糖。指令在表单 <input> , <textarea> 及<select>元素上创建

指令用法详解：

v-on

     在@click = 'xxx'中， 当xxx为函数时，这就用到了前面提到的methods属性

     <div id="app3">
         // 第二个实参 $event 为原始的dom事件
         <button  @click="click1('abc',$event)">提交</button>
         
     </div>
     
     <script>
         var vm = new Vue({
             el: "#app3",
             methods: {
                 click1: function (str, e) {
                     console.log(str, e)
                 }
             }
         })
     </script>

v-bind 与class和style的特殊用法

     当v-bind 用于class和style时，vue.js做了专门的强化，表达式结果的类型除了字符串之外，还可以是对象或数组
     
     1. 当作用在class身上时
     
     <div id="app3">
         <div  :class='{active:isActive}'>2313</div>
             //  active这个class是否存在 取决于数据属性isActive的取值
             //  其可以和普通的class共存
             //  也可以传入多个属性来动态切换多个class  {green:isGreen , red: "isRed"}
             //  也可用数组的方式 ： ['green','red']  这样就直接添加了这两个类名
             //  可配合三元运算来获取动态样式    [isGreen?'green':'',isRed?'red':'']
     </div>
     
     <script>
         var vm = new Vue({
             el: "#app3",
             data :{
                 isActive : 'ture'  // 在这里只举了一个例子，其他同理
             }
         })
     </script>
     
     
     2. 当作用在style身上时
     
     <div id="app3">
         <div :style='{color:color,fontSize:size}'>2313</div>
         
         //  同样此处也可以用三元运算 来动态绑定数据
         //  <div :style = '{background : isgreen ? 'green' : ""}'>2313</div>
     
     </div>
     
     <script>
         var vm = new Vue({
             el: "#app3",
             data :{
                 color:'red',
                 size:'20px'，
                 isgreen : true
             }
         })
  </script>

v-show 与 v-if 的区别

 v-if 是真正的渲染
 v-show 是通过控制css样式来改变元素的显示和隐藏，其元素会被渲染并保留在dom中

v-model

  <div id="app3">
      <input type="text" v-model='val'>       // 这样就实现了input的双向数据绑定
          // 当input中的内容改变时，下方sapn标签内的内容也会改变
          
      <span>姓名：{{val}}</span>              //将val数据显示在页面中
  </div>
  <script>
      
      var vm = new Vue({
          el: "#app3",
          data: {
              val: "土行孙"                           // 设置input中的初始值
          }
          methods:{
              hand:function(){
                  this.val                 //  可通过this对象获取到data中的值
              }
      })
  </script>

五. 模板的配置

页面中直接书写
在template配置中书写（常见）
在render中手动用函数创建,render函数的参数是创建虚拟dom对象的方法
render的优先级> template > 在页面中书写

例

     <script>
      
      var vm = new Vue({
          el: "#app3",
          template:'<h1>商品和库存管理</h1>' ,  // 模板
          render(createElement){
              return createElement('h1','hello')
          }
      })
  </script>

六. 小结：

配置对象中

el ：配置控制的元素， css选择器
data : 管理的数据，该数据是响应式的
methods : 配置方法方法中的this指向vue实例，所以不能使用箭头函数，会干扰

挂载的配置

通过el进行配置
使用vue实例中的$mount函数进行配置

七. 计算属性 computed

计算属性,其中的配置也会提升到vue实例中
通常情况下,计算属性是用户通过data或其他计算属性得到的数据

例：

1. 普通篇
    <div id="app">
        <h1>名字：{{name}}</h1>
        <h1>qq:{{qqNumber}}</h1>
        <h5>合计信息：{{full}}</h5>   // 计算属性会自动的帮你带调用这个函数来得到这个结果，所以不用这么些full()
    </div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            name: '战士',
            qqNumber: 123456789
        },
        //这就是计算属性，当然这个功能也能用其他方式完成，比如methods方法，后面会介绍他们的不同
        computed: {
            full() {   // 这样写是只读的，改变数据也没用
                return this.name + this.qqNumber
            }
        }

    })
</script>

 2. 进阶篇
    <script>
    var vm = new Vue({
        el: "#app3",
        data: {
            name: '战士',
            qqNumber: 123456789
        },
        // 只看这里
        computed: {
            full: { // 这样配置就既能读取值 又能设置值了
                get() {
                    return this.name + this.qqNumber
                },
                set(newVal) {
                    //比如再用到双向数据绑定的时候，就能监控到改变的值了
                    console.log(newVal)
                }

            }
        }

    })
</script>

计算属性与方法的区别：

计算属性会检查计算属性的依赖,当依赖没有发生变化时,vue会直接使用之前缓存的结果,而不会重新计算
计算属性可以配置get和set,分别用于读取时和设置时
计算属性的读取函数,不可以有参数,有参数无意义

八. 组件的创建和注册

组件是页面中可重复使用的功能单元
组件的创建 : 组件对于开发者,是一个普通的配置对象,该配置对象几乎和之前的vue配置对象一样
组件的注册分为两种：全局注册和局部注册
组件可以嵌套重复使用,因此会形成一个组件树,树的根叫做根组件

组件的使用：

    <div id="app3">
        <vue></vue>   // 组件的名称
    </div>
    <script>
    // 定义全局组件  第一个参数为组件的名字 ， 第二个参数为一个配置对象
    Vue.component('vue', {template: '<h1>看到你，很开心！！！</h1>'})

    var vm = new Vue({
        el: "#app3",
        data: qq = 123,

        // 局部注册组件
        components: {
            vue: {
                // 在这里接收了属性并赋值
                template: '<h1 :title = 1>看到你{{str}}，很开心{{title}}！！！</h1>',
                // 组件中也可以有数据和方法
                data: function () {
                    return {
                        str: "的时候"
                    }
                },
                // 通过props为组件定义属性
                props: ['title']
            },
            //这里的属性名为 组件名称， 属性值为一个配置对象
        }
    })

九. vue的生命周期

new Vue（）从创建vue实例开始

beforeCreate:组件实例刚刚创建好之后，此时，组件实例中还没有提升任何的成员
created:组件实例中已经提升了所有成员，但是，此时还没有渲染页面的任何内容
beforeMount: 组件即将进行渲染，但是还没有进行渲染，此时已经编译好模板，渲染的所有条件已经满足
mounted : 组件已经完成了渲染（页面可见）[重要！！！！]
此时，等待组件更新（当一个组件的属性或状态发生变化的时候，会自动重新渲染）
beforeUpdate:组件即将更新，但还没有更新，此时得到的数据是新的，但界面是旧的
updated：组件已经完成更新，此时数据和界面都是新的
beforeDestroy:当组件即将被销毁时
destroyed: 组件已经被销毁后

十. 扩展 - 初识模块化

模块化简介

历史上，JavaScript一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼起来。而其他语言都有此功能
在ES6之前，社区制定过一些模块加载方案，最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。ES6在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。
ES6模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系（这种加载称为'编译时加载'），以及输入和输出的变量。而CommonJS和AMD模块，都只能在运行时确定这些东西

实现模块化的方式 :

CommonJs
AMD
CMD
ES6官方规范

Es6模块化 :

模块中的所有变量,全部是局部的,只能在模块内部使用
模块导出 : export default 导出的数据
模块导入(要在所有代码之前) : import 变量名 from "模块路径"