Vue简单了解。

vue.js，是一个个人项目，目前是国内使用比较广泛的。国内十家公司的vue只能有一种写法

基础api

• v-model

  作用是实现页面中表单元素和data数据的双向绑定。是一个语法糖，相当于绑定了表单元素的input事件和value值。当输入框的值变化的时候data中的数据跟着变化。实现的原理是Object.defineProperty

  可以添加修饰符：number(转换为数字)、trim(去空格)

• v-bind

  作用是绑定标签的属性，可以简写为:

  绑定样式的时候可以为样式写成对象的形式：属性名表示样式名，属性值为bool值，如果值为true表示这个样式生效，否则这个样式效果无效

• v-html

  是绑定一个富文本内容，相当于设置innerHTML属性

• v-text

  相当于设置innerText属性

• v-on

  作用是事件绑定，可以简写为@符号。在vue中绑定事件的时候只写事件名字就好

  处理键盘事件的时候可以加修饰符，具体的可用修饰符可以参考官网事件处理 — Vue.js

  最常用的一个按键修饰符是enter

• v-for

  循环遍历，展示数据。是以后用到的最多的一个指令

  可以对数组，数字，字符串，对象这些数据做循环

  <ul>
    <!-- list表示需要循环的数据 item表示循环到的每一项,index表示索引；其中item和index是形参，叫什么都可以； 循环的时候建议为每一项设置一个唯一的key，他的作用是做节点替换时候性能优化使用 -->
    <li v-for="(item, index) in list" :key="item.id">{
     {index}}-{
     {item}}</li>
  </ul>

• v-if

  是直接删除或者插入标签

• v-show

  是控制标签的display属性

  在实际使用的时候v-show的性能更高一些，建议使用

• filter

  过滤器，作用是对数据做过滤显示

• watch

  监听数据的变化，数据改变之后会触发一些列其他的操作

  watch的应用场景：一个数据改变之后引起的一些列其他连锁反应

• computed

  当依赖的数据改变之后重新计算一个结果。计算属性具有缓存功能，当依赖数据没有改变的时候不会重新计算

  计算属性和方法调用的区别：

  1. 方法调用需要加括号，计算属性不用

  2. 方法调用每一次页面更新的时候都会执行

  3. 计算属性只有在依赖的数据改变的时候才会执行

  有两种写法：

  ...
  computed: {
    val1() {
      return 'xxx'
    },
    val2: {
      set(v) {
        
      },
      get() {
        return ......
      }
    }
  }
  ...

  计算属性的应用场景：多个数据改变之后引起的一个计算结果

• 组件

  组件是vue中很重要的一个东西，是vue项目的主要组成部分。组件可以理解为自定义标签

  • 组件定义

    组件定义的时候有常见的两种：局部组件和全局组件

    • 局部组件

      局部组件在使用的时候需要先进行注册，使用components属性进行注册

      const hello = {
        template: ``//....
      }

    • 全局组件

      可以直接使用不需要注册

      Vue.component('xx', {
        template: ''
      })

  • 组件嵌套

    组件中可以调用另一个组件。组件之间时可以相互嵌套的，在使用之前也是需要先注册