VUE基础学习笔记(writing)

1. VUE实例

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


<div id="app">
  {{ message }}
</div>


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

vue实例化的常用参数:

实例创建之后，可以通过 vm.$data访问原始数据对象。Vue 实例也代理了 data 对象上所有的 property，因此访问 vm.a等价于访问 vm.$data.a。

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

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this自动绑定为 Vue 实例(所以在方法中用this.xxxx可以直接访问data参数中的数据)。

字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement方法作为第一个参数用来创建 VNode。

vue常用指令:

v-bind:title="message” 把message绑定到title这个attribute上面去

v-if="xxx” 控制元素显示或者隐藏

v-for="todo in todos” 把todos数组中的元素循环渲染出来

<input v-model="message"> 把当前input框输入的数据双向绑定到message变量上

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。

所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。

在 Vue 中注册组件很简单：


// 定义名为 todo-item 的新组件
// "prop"，类似于一个自定义 attribute。
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>这是个待办项: {{todo.text}}</li>'
})

然后就可以使用这个组件:


<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

比如 created钩子可以用来在一个实例被创建之后执行代码：


new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

import require等导入导出关键字的区别: https://juejin.cn/post/6844904168818229261

自定义属性 props: 组件props中声明的属性

原生属性 attrs: 没有声明的属性, 默认自动挂载到组件根元素上, 设置inheritAttrs为false可以关闭自动挂载

特殊属性 class, style: 挂载到组件根元素上, 支持字符串, 对象, 数组等多种语法

普通事件: @click, @input, @change, @xxx等事件, 通过this.$emit(’xxx’, …)触发

修饰符事件: @input.trim,@click.stop, @submit.prevent等, 一般用于原生HTML元素, 自定义组件需要自行开发支持

普通插槽和作用域插槽(基本没区别了)

Vue中的三个缩写符号

第一个是冒号，是v-bind的缩写，表示标签的属性值取vue的数据属性值。

第二个是@符号，是v-on指令的缩写，表示触发事件。

第三个是#符号，是在使用vue组件的插槽时的v-slot缩写。