Vue基础笔记-2

渐进式js框架

指令

v-bind:绑定，不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构

<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>

v-for:绑定数组的数据，渲染一个项目列表
v-if:条件判断,，销毁或重建元素 v-show：根据表达式之真假值，切换元素的 display CSS 属性
v-on：指令添加一个事件监听器 @
<button v-on:click="reverseMessage">逆转消息</button>
v-text:更新DOM对象的 textContent
<h1 v-text="msg"></h1>
v-html:更新DOM对象的 innerHTML
v-for:基于源数据多次渲染元素或模板块
使用v-for提供key属性，VUE会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素

{{item}} -- {{key}}

```

v-model:表单输入和应用状态之间的双向绑定

<input type="text" v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

v-pre：跳过子元素和本元素的的编译过程，用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<span v-pre>{{ this will not be compiled }}</span>

v-once:vue只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

事件修饰符

.stop 阻止冒泡，调用 event.stopPropagation()
.prevent 阻止默认行为，调用 event.preventDefault()
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时，才会触发事件
.once 事件只触发一次

样式处理 class&style

使用方式：v-bind:class=“expression” or :class=“expression”
表达式的类型：字符串、数组、对象（重点）

<div v-bind:class="{ active: true }"></div> 
//解析后
//<div class="active"></div>

<div :class="['active', 'text-danger']"></div> 
//解析后
//<div class="active text-danger"></div>

<div v-bind:class="[{ active: true }, errorClass]"></div> 
//解析后
//<div class="active text-danger"></div>

<!-- 1 -->
<div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>
<!-- 2 将多个 样式对象 应用到一个元素上-->
<!-- baseStyles 和 overridingStyles 都是data中定义的对象 -->
<div v-bind:style="[baseStyles, overridingStyles]"></div>

过滤器filter

作用：文本数据格式化
过滤器可以用在两个地方：{{}}和 v-bind 表达式
两种过滤器：1 全局过滤器 2 局部过滤器

全局过滤器

说明：通过全局方式创建的过滤器，在任何一个vue实例中都可以使用
注意：使用全局过滤器的时候，需要先创建全局过滤器，再创建Vue实例
显示的内容由过滤器的返回值决定

Vue.filter('filterName', function (value) {
  // value 表示要过滤的内容
})

局部过滤器

某一个vue实例的内容创建的，只在当前实例中起作用

{
  data: {},
  // 通过 filters 属性创建局部过滤器
  // 注意：此处为 filters
  filters: {
    filterName: function(value, format) {}
  }
}

按键值修饰符

在监听键盘事件时，Vue 允许为 v-on 在监听键盘事件时添加关键修饰符
修饰键（.ctrl等）、鼠标按键修饰符（.left等）.enter、.tab、.delete (捕获“删除”和“退格”键)、.esc、.space、.up、.down

<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

监视数据变化 - watch

概述：watch是一个对象，键是需要观察的表达式，值是对应回调函数
作用：当表达式的值发生变化后，会调用对应的回调函数完成响应的监视操作
VUE $watch

计算属性

说明：计算属性是基于它们的依赖进行缓存的，只有在它的依赖发生改变时才会重新求值
注意：Mustache语法（{{}}）中不要放入太多的逻辑，否则会让模板过重、难以理解和维护
注意：computed中的属性不能与data中的属性同名，否则会报错
Vue computed属性原理

组件系统

注册组件

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  // todo-item 组件现在接受一个
  // "prop"，类似于一个自定义特性。
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})

构建组件模板

<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>

Vue 组件实现了 Slot API 与 is 特性

Object.freeze():阻止修改现有的属性

生命周期钩子

不要在选项属性或回调上使用箭头函数，比如 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 之类的错误。

kebab-case (短横线分隔命名):例如
使用 PascalCase (驼峰式命名) :使用 PascalCase (驼峰式命名)

全局注册

Vue.component('my-component-name', {
  // ... 选项 ...
})

局部注册

局部注册的组件在其子组件中不可用

//ComponentA 在 ComponentB 中可用
import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  },
  // ...
}

require.context 只全局注册通用的基础组件
全局导入基础组件的示例代码

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // 其组件目录的相对路径
  './components',
  // 是否查询其子目录
  false,
  // 匹配基础组件文件名的正则表达式
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName)

  // 获取组件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 剥去文件名开头的 `./` 和结尾的扩展名
      fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
    )
  )

  // 全局注册组件
  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，
    // 否则回退到使用模块的根。
    componentConfig.default || componentConfig
  )
})

prop

使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名
如果使用字符串模板，那么这个限制就不存在了

指令