Vue整理--感谢穗儿同学

Vue

1. Vue 定义

官网：https://cn.vuejs.org/

Vue (类似于 view) 是一套用于构建用户界面的渐进式框架，Vue 被设计为可以自底向上逐层应用，Vue是mvvm模式的。

2. Vue API

2.1 全局配置

2.2 全局API

2.2.1 filter 过滤器

​ Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。

    

      

        
        
{{goods.title | toUpper}}
        
        
{{goods.price | toFix}}
      
    
  

补充：

  

  const app = new Vue({
      el: '#app',
      data: {
        goodsList: [
          {
            id: 1,
            title: '罗技鼠标',
            price: 9.9999999999
          }
        ]
      },
      filters: {
        // 定义一个过滤器，接收要过滤的值，返回过滤的结果
        toFix (val) {
          return val.toFixed(2)
        },
        toUpper (val) {
          return val.toUpperCase()
        }
      }
    })

过滤器是 JavaScript 函数，因此可以接收参数。如：

{{ message | filterA('arg1', arg2) }}

filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，
普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

2.3 选项 / 数据

2.3.1 data

​ 类型：Object | Function

data => Vue实例中的数据对象，对象必须是纯粹的对象 (含有零个或多个的 key/value 对)。

​ 注意：data 属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。

​ 组件的data必须是一个方法。因为每个组件的数据是独立的，使用方法可以保证不共享，在data里return一个对象。复用组件时，data必须是个函数（function）

var data = { a: 1 }

// 直接创建一个实例
var vm = new Vue({
  data: data
})
vm.a // => 1
vm.$data === data 

2.3.2 methods 事件处理器

​ 类型：{ [key: string]: Function }

​ methods是用来写方法的地方，可以在其他地方调用这里的方法。methods 将被写到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

​ 注意：不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus() // 调用方法
vm.a // 输出 2  

2.3.3 computed 计算属性

​ 类型：{ [key: string]: Function | { get: Function, set: Function } }

​ 计算属性将被写到 Vue 实例中。所有 get 和 set 的 this 上下文自动地绑定为 Vue 实例。计算属性每次的计算结果都会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。

​ 注意：一个计算属性如果使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取  
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3  // 设置计算结果为 3
vm.a         // 所以输出a => 2
vm.aDouble // => 4

2.3.4 watch 侦听属性

​ 类型：{ [key: string]: string | Function | Object | Array }

​ watch 用于监听（观察）某个属性是否发生改变，发生改变就做出相应的操作来响应这个数据变化。一个对象，键是需要观察的表达式，值是对应回调函数、方法名或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性是否发生数据变化，并做出响应。

​ 注意：不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.updateAutocomplete 将是 undefined。

    姓：

    名：

    姓名：

   

 const app = new Vue({
      el: '#app',
      data: {
        xing: '',
        ming: '',
        name:''
      },
      watch: {
        // 监听值的修改
        // 只要值发生了改变，都会执行这个方法
        xing (nVal, oVal) {
          console.log(nVal, oVal)
          // 姓发生了改变
          this.name = nVal + this.ming
        },
        ming (nVal) {
          this.name = this.xing + nVal
        },
        name (nVal) {
          this.xing = nVal.slice(0, 1)
          this.ming = nVal.slice(1)
        }
      }
    })

2.3.5 props

类型：Array | Object

​ props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。

基于对象的语法使用以下选项：

• type: 校验数据类型。可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。
• default: any prop 指定一个默认值。
• required: Boolean定义该 prop 是否是必填项。
• validator: Function自定义验证函数会将该 prop 的值作为唯一的参数代入。

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

​ props 使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

Vue.component('blog-post', {
  // 在 JavaScript 中是 postTitle 的
  props: ['postTitle'],
  template: '
{{ postTitle }}
'
})

​ props 是单向数据流， 所有的prop都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。所以props可用于组件传参（父 => 子）。

2.4 特殊特性

2.4.1 ref

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果用在子组件上，引用就指向组件实例。

在普通的 DOM 元素上使用，引用指向的就是 DOM 元素。

new Vue ({
    el: '#app',
    data: {
        
    },
    methods: {
        // 取到input这个DOM元素
        this.$refs.add.focus()
    }
})

3. Vue的基础使用

3.1 引入Vue

或者保存 Vue.js 到本地，本地调用也可

3.2 声明式渲染

​ 声明式渲染 就是利用插值表达式进行数据渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：


  {{ message }}    

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

输出：Hello Vue!

注意：此时数据和 DOM 已经被建立了关联，所有东西都是响应式的。如：修改 app.message 的值，输出信息也会更改。

3.3 Vue 实现双向绑定的原理（插值表达式的原理）：

​ Vue的双向绑定是基于defineProperty实现的。流程如下：

注意：defineProperty是用来给一个对象定义属性的。基于defineProperty的get/set实现

3.4 模板语法

​ Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

​ 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

3.4.1 插值表达式

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

  {{ message }}   ——插值表达式


注：插值表达式里面代表是javascript表达式。所以字符要加引号
  

    {{isHandsome}} 

    {{1+1}} 

    {{isHandsome && 'you are right'}} 
  
    {{1 + 1 !== 2 ? '你算对了' : '回去读小班'}} 

  

3.4.2 template标签

template标签，HTML5提供的新标签，更加规范和语义化 ；可以把列表项放入template标签中，然后进行批量渲染。

打开网页，会发现在浏览器并没有渲染出任何信息，这是因为template标签内容天生不可见，设置了display：none；属性。

var tem =document.getElementById("tem");//获取template标签
var title = tem.content.getElementById("title"); //在template标签内部内容，必须要用.content属性才可以访问到
console.log(title); //找到h1

template标签中的 元素是被当做一个不可见的包裹元素，主要用于分组的条件判断和列表渲染。

3.5 Vue 指令

​ Vue.js的指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

3.5.1 v-text

​ v-text 更新元素文本内容, 让元素的文本内容显示属性的内容。

    
    {{str}}     输出结果：hello
    
    
    
    输出结果：hello
    
    
   
   输出结果：报错

    
    
{{str}}
     输出结果：你真帅 

const app = new Vue({
      el: '#app',
      data: {
        str: 'hello'
      }
    })

3.5.2 v-html

​ 双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

    
    
    输出结果：加粗的 hello 

3.5.3 条件渲染 v-if(else) / v-show

v-if(else)

​ v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。

​ v-if 是通过是否渲染来决定显示隐藏。v-show 是一定会渲染，通过display样式来决定是否显示隐藏。

    
这是一个弹框1
         false  不渲染显示
    
这是一个弹框2
   true   渲染显示

​ 也可以用 v-else 添加一个“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。v-else指令与v-if或者v-show同时使用，v-if条件不成立则会显示v-else内容。

        
    
这是一个弹框4
  
        
    
这事跟弹框4相反的一个显示

const app = new Vue({
      el: '#app',
      data: {
        isModelShow: false
      }
    })

v-show

​ 用于根据条件展示元素的选项是 v-show 指令。用法跟v-if大致一样：

    
这是一个弹框5
           显示
    
这是一个弹框6
    隐藏

注意：v-show 不支持