VUE基础知识点整理

最新推荐文章于 2023-12-23 15:25:49 发布

原创最新推荐文章于 2023-12-23 15:25:49 发布 · 1.9k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

js 专栏收录该内容

15 篇文章

订阅专栏

本文深入解析Vue.js的关键特性，包括指令、组件、生命周期、数据绑定与事件处理。涵盖v-model、v-bind的高级应用，组件通信策略，以及动态组件的使用技巧。

纯知识点整理，适合vue小白（不小心点了发布 /泪目）

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>

异步组件推荐和 webpack 的 code-splitting 功能一起配合使用

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