By

MVVM

M:  h5里的模板
V: h5
VM: Vue实例

Vue 实例的数据,在 h5 通过模板立即使用.这就是Model->VM->View

虽然数据是双向的但是从 h5 到 Vue 实例(VM)方向的其实不多，比如 input,select 等标签

组件数据传递

  • props

组件里的 props 告诉外界，可以通过组件传递属性 post 把数据给到组件内部:

new Vue({
  el: "#blog-post-demo",
  data: {
    posts: [
      { id: 1, title: "My journey with Vue", content: "111" },
      { id: 2, title: "Blogging with Vue", content: "222" },
      { id: 3, title: "Why Vue is so fun", content: "333" }
    ]
  }
});

数据从 VM 流向组件,(父到子)组件动态输出渲染后的 h5 结果.

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:post="post"
></blog-post>

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行.

  • slot

https://cn.vuejs.org/v2/guide/components-slots.html

想传数据到子组件?参考前面的组件 props,可以通过属性传数据;

把任意(整段的 h5,另 1 个组件)传到组件，才叫完美.

内容从组件外分发在组件内, slot 就是承接者，这就是槽的含义.

注意,分发到组件的内容，要使用的数据，是父模板作用域的.

<blog-post url="/profile">
  Logged in as  // ok 来自new Vue url = 
  //error　slot不能直接访问blog-post作用域<>里的url属性
</blog-post>
  • 具名 slot

多个 slot 的应用.

直接看个例子，看如何把原来的 h5 结构完全 vue 组件化: 这个定义在 index.blade.php or index.html:

<base-layout>
  <!-- 具名slot,名字为header -->
  <template v-slot:header>
    <post-header></post-header>
  </template>

  <!-- 往默认slot -->
  <post-content></post-content>

  <template v-slot:comments>
    <post-comments></post-comments>
  </template>
</base-layout>

base-layout,post-header,post-content,post-comments都是组件. base-layout 的 template 部分为:

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

作用域插槽: 组件内也可以把数据传递到使用组件的元素.

插槽 props:绑定在 <slot>元素上的特性被称为插槽 prop.

<span>
  <!-- 定义了slot prop, v-bind绑定的user本来来自父作用域。组件内无法访问
  现在通过v-bind后，可以访问了. 注意和普通props的区别.
   -->
  <slot v-bind:user="user">
    
  </slot>
</span>

好处是?
h5通过slot把数据给组件，组件里slot通过插槽prop可复用组件内的data,`插槽转换为可复用的模板`,不同的输入(组件里的data),就可以`直接`有不同的h5页面输出.
不理解上面这个，可能体会不到为啥要搞这么复杂的components,slot,slot prop... ###
VUE render

.

响应式的本质的就是`数据变化时，调用render函数.
```js
render: function (createElement) {
  return createElement('h1', this.blogTitle)
}

createElement的本质:创建新的 virtual dom,与旧的 dom diff 后，将 diff 修改到原 DOM tree,实现局部更新.

VUE-cli

VUE-router

router 里绑定　路径和该路径下访问的组件.

VUE-vuex 　状态管理

服务器渲染 nuxt.js

Quasar Framework SSR + PWA