vue + component + vue-router + vuex + axios

[ 库 ]:相当于功能比较全的产品 ，直接拿取产品中的一部分使用就可以

[ 框架 ]:为了解决一系列问题而产生的产品，使用时只能按照它的规定来使用 vue 框架: MVVM 模式

  • npm init -y 初始化
  • npm install vue -D

Mustache(小胡子) 语法

  1. <!-- Mustache 语法 
  2.         JS 表达式:
  3.             1. 变量（data 中已经声明的）
  4.             2. 可以运算
  5.             3. 三元运算符
  6.             4. 函数的返回值 
  7.             5. 不可以定义变量、赋值、定义函数(只要是 JS 语句都不可以放入里面)
  8.     -->
  9.     <div id="app">
  10.         {{ msg }}
  11.     </div>

对象变更检测

  • Vue 不能检测对象属性的添加或删除
  • Vue 不允许动态添加根级别的响应式属性
  1. // 初始化 Vue 实例
  2.     let vm = new Vue({ // vm Vue 的实例
  3.         el: '#app', // 把 vue 的实例挂载到 id 名为 app 的 DOM 元素上
  4.         data: { // 把数据放入到响应式系统
  5.             msg: '我不喜欢这个世界，我只喜欢你！',
  6.             obj: {
  7.                 name: 'serendipity'
  8.             },
  9.             b: 0,
  10.         }
  11.     })
  13.     // vm.msg == data.msg;  会把 vue 选项中所有的数据挂载到 vm 的实例上
  14.     // vm.b =  10  先要在 data 中声明才可以
  16.     // 对象变更
  17.     // vm.obj.age = 10; 不可以直接更改根级别的对象 
  18.     vm.$set(vm.obj,'age',10);
  20.     // 合并对象
  21.     Object.assign(vm.obj, {
  22.         age: 27,
  23.         favoriteColor: 'Vue Green'
  24.     })

数组变更检测

Vue 不能检测以下数组的变动:

  • 不可以直接通过索引更改数组，例如:vm.items[indexOfItem] = newValue
  • 不可以通过数组的长度更改数组，例如:vm.items.length = newLength
  1. // 初始化 Vue 实例
  2.     let vm = new Vue({ // vm Vue 的实例
  3.         el: '#app', // 把 vue 的实例挂载到 id 名为 app 的 DOM 元素上
  4.         data: { // 把数据放入到响应式系统
  5.             arr: [1, 2, 3]
  6.         }
  7.     })
  8.     // 数组更改
  9.     // vm.arr[1] = 5;    // 不可以索引更改
  10.     // vm.arr[vm.arr.length -1 ] = 5;  // 不可以数组长度更改
  12.     // 方式一: 
  13.     vm.$set(vm.arr, 4, 12345)
  14.     // 方式二: 变异方法
  15.         // push()
  16.         // pop()
  17.         // shift()
  18.         // unshift()
  19.         // splice()
  20.         // sort()
  21.         // reverse()
  22.     vm.arr.splice(0,1,5) // 开始 个数 替换
  24.    /**
  25.      * 非变异方法:
  26.      *  如:filter()、concat() 和 slice() 它们不会改变原始数组，而总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组
  27.      * 
  28.      */ 
  30.     example1.items = example1.items.filter(function (item) {
  31.         return item.message.match(/Foo/)
  32.     })

Vue 实例的方法

  1. /**
  2.      * Vue 实例方法
  3.      *  
  4.      *  vm.$set/vm.$delete   更改对象或数组
  5.      *  vm.$el    获取挂载的 dom 元素 （知道确切 vue 实例是哪一个）
  6.      *  vm.$data  获取响应式数据
  7.      *  vm.$options  所有的选项
  8.      *  vm.$watch 监视数据的变化
  9.      *  vm.$nextTick 获取真实的 dom 元素
  10.      *  vm.$mount 设置 vue 实例挂载的 dom 元素（）
  11.      *  
  12.      * 
  13.      */
  14.     let vm = new Vue({
  15.         // el: '#app',
  16.         data: {
  17.             arr: [1,2,3,4,5],
  18.             msg: '我不喜欢这个世界，我只喜欢你！'
  19.         }
  21.     })
  23.     vm.$mount('#app')
  24.     vm.$watch('msg',function(newVal,oldVal){ // 异步 
  25.         console.log('现在的值是:'+ '  ' + newVal);
  26.     })
  27.     vm.msg = '时光静好，岁月安然！'; 
  29.     // console.log(vm.$el.innerHTML);  // 同步的 所以先执行
  31.     vm.$nextTick(function(){ // 触发 表示 dom 渲染完成
  33.         console.log(vm.$el.innerHTML); // 数据更改完成后 dom
  35.     })