v-model

本质是v-bind:value和
v-on:input 的语法糖

  1. 可以等价于
  2. <input v-bind:value="message" v-on:input="message=$event.target.value" placeholder="edit me">
  4. 如果写在一个自定义子组件中
  5. @input="$emit('input', $event)"

记住

@click.stop
@click.prevent
@keypress.enter
:money:sync=”total”

v-on 缩写

  1. <!-- 完整语法 —>
  2. <a v-on:click="doSomething">...</a>
  4.  <!-- 缩写 —>
  5. <a @click="doSomething">...</a>

stop

阻止事件继续向上传播（默认都是冒泡事件）

prevent

阻止默认事件

Sync

Sync为了解决父组件和子组件数据传递的双向绑定问题
在组件中维护一个单向数据流有利于数据的传递
示例代码
父组件使用sync自动处理bar的同步问题

  1. <comp :foo.sync="bar"></comp>

等价于

父组件监听update:foo事件

  1. <comp :foo="bar" @update:foo="val => bar = val"></comp>
  2. 或者
  3. <comp :foo="bar" @update:foo="bar = $event"></comp>

子组件更新值

  1. this.$emit('update:foo', newValue)


父组件和子组件的数据传递问题

image.png

v-on后面也可以绑定自定义的事件，主要是在组件中。下面的代码中ListItem是一个组件，remove是一个自定义事件，我对他的理解更像是一个回调函数，内部依然是dom事件+$emit的处理。

  1. <ListItem
  2.         v-for="todoitem in todoList"
  3.         v-bind:key="todoitem.id"
  4.         v-bind:todoitem="todoitem"
  5.         v-on:remove="removeItem"
  6.       ></ListItem>

原生事件绑定组件的问题

原生事件绑定到组件，官方的方案是通过native完成
https://cn.vuejs.org/v2/guide/components-custom-events.html#%E5%B0%86%E5%8E%9F%E7%94%9F%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A%E5%88%B0%E7%BB%84%E4%BB%B6

但是如果根元素不是对应元素存在问题，具体看我在vue实验室的另一篇博客
https://www.yuque.com/bo939y/ubkqtp/un3aln

Props

用kebab-case (短横线分隔命名) 命名

  1. 存在样式1 （数组）

    1. props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

  2. 存在样式2 （字典可以指定类型）

  1. props: {
  2.   title: String,
  3.   likes: Number,
  4.   isPublished: Boolean,
  5.   commentIds: Array,
  6.   author: Object,
  7.   callback: Function,
  8.   contactsPromise: Promise // or any other constructor
  9. }

静态传值
  1. <blog-post title="My journey with Vue"></blog-post>

动态
  1. <blog-post v-bind:title="post.title"></blog-post>

重要：prop值为数字、布尔、数组、对象的时候，要用v-bind，否则就会当成字符串了！同理，传递字符串属性的时候，也要当心v-bind造成的变对象问题。这些细节看起来简单，真碰上查起来还耗心神。

单向数据流原则

按照vue设计原则，props是父组件传递给子组件的，子组件只有不改，如果要加工使用，不能直接修改props。
通过data、computed来进行二次加工实现。

v-directive

主要用于dom操作