VUE基础知识点整理

Vue (读音 /vjuː/，相似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不一样的是，Vue 被设计为能够自底向上逐层应用。Vue 的核心库只关注视图层，不只易于上手，还便于与第三方库或既有项目整合。另外一方面，当与现代化的工具链以及各类支持类库结合使用时，Vue 也彻底可以为复杂的单页应用提供驱动。

这里就有两个重点，Vue是一套用于构建用户界面的渐进式框架；Vue 被设计为能够自底向上逐层应用；

那么什么是Vue是一套用于构建用户界面的渐进式框架，什么是Vue 被设计为能够自底向上逐层应用呢。这也能够针对面试官常常会问到，你对vue有什么了解之类的问题。

而对于“渐进式”的解释，我在知乎上看到了一个不错的回答，这个答案也被Vue的设计者点了赞。这个回答的角度很好，主要从与React、Angular的比较来阐述的，因为本人没怎么用过另外这两个框架，也就不妄加评述，因此仅把回答进行摘录，以供参考[4]。 在我看来，渐进式表明的含义是：主张最少。 每一个框架都不可避免会有本身的一些特色，从而会对使用者有必定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。好比说，Angular，它两个版本都是强主张的，若是你用它，必须接受如下东西：

-必须使用它的模块机制、

-必须使用它的依赖注入

-必须使用它的特殊形式定义组件（这一点每一个视图框架都有，难以免）

因此Angular是带有比较强的排它性的，若是你的应用不是从头开始，而是要不断考虑是否跟其余东西集成，这些主张会带来一些困扰。好比React，它也有必定程度的主张，它的主张主要是函数式编程的理念，好比说，你须要知道什么是反作用，什么是纯函数，如何隔离反作用。它的侵入性看似没有Angular那么强，主要由于它是软性侵入。Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你能够在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也能够整个用它全家桶开发，当Angular用；还能够用它的视图，搭配你本身设计的整个下层用。你能够在底层数据逻辑的地方用OO和设计模式的那套理念，也能够函数式，均可以，它只是个轻量视图而已，只作了本身该作的事，没有作不应作的事，仅此而已。 渐进式的含义，个人理解是：没有多作职责以外的事。

1，指令 v-bind:id=‘domId’ //属性值绑定(缩写:id=‘XX’)；v-on:click=‘add’//事件处理(缩写@click=‘XX’)；v-if='seen’条件； v-for=‘todo in todos’；

var app = new Vue({
  el: '#app',     //元素
  data: {         //数据
    message: 'Hello Vue!'，
    todos: [
      { text: 111, value: "Hhh" },
      { text: 222, value: "Hhh22" },
      { text: 333, value: "Hhh333" },
      { text: 444, value: "Hhh44" }
    ],
    demo: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  },
  methods: {      //方法
    add: function() {
      this.value = this.value + 1;
    }
  },
  computed:{//计算属性 只在相关依赖发生改变时它们才会从新求值
  	reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  },
  watch:{//侦听属性，在数据变化时执行异步或开销较大的操做时使用
  }
})
Vue.component('todo-item', {
  // todo-item组件接受一个"prop"，自定义特性，这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

-----html：-------------------------------
<div id="app">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
  <div v-for="(value, key, index) in demo" :key="key">
	 {{ index }}. {{ key }}: {{ value }}
  </div>
  <todo-item
    v-for="item in todos"
    v-bind:todo="item"
    v-bind:key="item.value">
  </todo-item>
  <span>{{reversedMessage}}</span>
</div>

2，生命周期钩子的函数：

• beforeCreate created
• beforeMount mounted
• beforeUpdate updated
• beforeDestory destoryed
• 3， 事件修饰符。由点开头的指令后缀表示。
• .stop
  .prevent
  .capture
  .self
  .once
  .passive
  .once
  .passive
  按键.enter .tab .delete .esc.space.up.down.left.right
  .sync修饰符
  当你须要双向数据绑定时，会致使数据流混乱，因此推荐使用update:myPropName 的模式触发事件取而代之。即
  子组件：this.$emit(‘update:title’, newTitle)
  父组件：<text-document v-bind:title.sync="doc.title"></text-document>
  等同于：

  <text-document
    v-bind:title="doc.title"
    v-on:update:title="doc.title = $event"
  ></text-document>

  带有 .sync 修饰符的 v-bind 不能和表达式一块儿使用
  能够串用 顺序很关键
  4， v-model 指令在表单 、 及 元素上建立双向数据绑定。绑定的值一般是静态字符串 (对于复选框也能够是布尔值)

  v-model 在每次 input 时将输入框的值与数据进行同步。你能够添加 lazy 修饰符，从而转变为使用 change 事件进行同步
  若是想自动将用户的输入值转为数值类型，能够给 v-model 添加 number 修饰符
  若是要自动过滤用户输入的首尾空白字符，能够给 v-model 添加 trim 修饰符<input v-model.trim="msg">
  5，组件基础：
  一个组件的 data 选项必须是一个函数，每一个实例能够维护一份被返回对象的独立的拷贝：

  data: function () {
    return {
      count: 0
    }
  }

  6，父组件子组件通讯：子组件调用内建的 $emit 方法并传入事件的名字，来向父级组件触发一个事件，父组件用v-on 在博文组件上监听这个事件，就像监听一个原生 DOM 事件同样，父级组件监听这个事件时，能够经过 $event 访问到被抛出的值；（事件名推荐用kebab-case而非驼峰格式 ）
  父子 prop 之间是单向下行绑定：父级 prop 的更新会向下流动到子组件。每次父级组件发生更新时，子组件中全部的 prop 都将会刷新为最新值。你不该该在子组件内部改变该 prop，不然数据流向难以理解。

  组件：<blog-post v-on:enlarge-text="postFontSize += $event"></blog-post>
  内容：<button v-on:click="$emit('enlarge-text'，0.5)">Enlarge text</button>

  7，插槽，使用自定义组件时内容输出位置
  8，动态组件：
  组件名随currentTabComponent变化而变化
  9，局部注册：局部注册的组件在其子组件中不可用

  new Vue({
    el: '#app',
    components: {
      'component-a': ComponentA,
      'component-b': ComponentB
    }
  })
  var ComponentA = { /* ... */ }
  var ComponentB = { /* ... */ }

  10，其余：

  v-bind 用于 class 和 style 时，Vue.js 作了专门的加强。表达式结果的类型除了字符串以外，还能够是对象或数组
  v-show 的元素始终会被渲染并保留在 DOM 中，不支持 元素，也不支持 v-else，v-if 是“真正”的条件渲染
  使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新，只渲染元素和组件一次。随后的从新渲染，元素/组件及其全部的子节点将被视为静态内容并跳过。<div class="box" v-once></div>
  Object.freeze()，这会阻止修改现有的属性
  Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $
  不要在选项属性或回调上使用箭头函数，好比 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。由于箭头函数是和父级上下文绑定在一块儿的，this 不会是如你所预期的 Vue 实例，常常致使 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
  对于已经建立的实例，Vue 不能动态添加根级别的响应式属性。可是，可使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。赋予多个属性时要用两个对象合成新的对象而非直接在一个上面添加：

  vm.userProfile = Object.assign({}, vm.userProfile, {
   age: 27,
   favoriteColor: 'Vue Green'
  })

  有时也须要在内联语句处理器中访问原始的 DOM 事件。能够用特殊变量 $event 把它传入方法：

• <button v-on:click="warn('Form cannot be submitted yet.', $event)">
   Submit
  </button>

  有些 HTML 元素，诸如

  1. 、 和 ，对于哪些元素能够出如今其内部是有严格限制的，自定义组件 会被做为无效的内容提高到外部，并致使最终渲染结果出错。幸亏 is 有特性

     <table>
      <tr is="blog-post-row"></tr>
     </table>

  2. 异步组件推荐和 webpack 的 code-splitting 功能一块儿配合使用

     Vue.component('async-webpack-example', function (resolve) {
       // 这个特殊的 `require` 语法将会告诉 webpack
       // 自动将你的构建代码切割成多个包，这些包会经过 Ajax 请求加载
       require(['./my-async-component'], resolve)
     })