vue笔记三

十.组件

1.组件中的data为函数

2.props: 父组件向子组件传递数据

子组件:
Child.vue

<template>
<span>{{ myMsg }}</span>
</template>

<script>
export default {
  props: [‘myMsg‘],
  data () {
    return { }
  }
}
</script>

  

父组件:

<template>
  <div id="app">
    <child :my-msg="msg"></child>
  </div>
</template>

<script>
import Child from ‘@/components/Child‘
export default {
  name: ‘app‘,
  components: {Child},
  data () {
    return {
      msg: ‘ok‘
    }
  }
}
</script>

  

3.字面量语法和动态语法:

<!-- 传递了一个字符串 "1" -->
<comp some-prop="1"></comp>

  

如果你想要传递的是一个数字,你应该这么做

<!-- 传递了一个字符串 "1" -->
<comp :some-prop="1"></comp>

  

4.prop验证:

props: {
    // 基础类型检测 (`null` 意思是任何类型都可以)
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字,有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组/对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: ‘hello‘ }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }

  

type 可以是下面原生构造器:

String
Number
Boolean
Function
Object
Array
Symbol

  

5.非 prop 特性
所谓非 prop 特性,就是它可以直接传入组件,而不需要定义相应的 prop。如class,style等

6.子组件跟父组件的通信:
父组件使用 $on(eventName) 监听事件
子组件使用 $emit(eventName) 来触发事件

示例:

子组件:

<template>
<button @click="onClick">单击</button>
</template>

<script>
export default {
  methods: {
    onClick () {
      this.$emit(‘increment‘)
    }
  }
}
</script>

  

父组件:

<template>
  <div id="app">
    <span>{{ data }}</span>
    <child v-on:increment="inCrementTotal"></child>
  </div>
</template>

<script>
import Child from ‘@/components/Child‘
export default {
  name: ‘app‘,
  components: {Child},
  data () {
    return {
      data: 0
    }
  },
  methods: {
    inCrementTotal () {
      this.data ++
    }
  }
}
</script>

  

7.绑定原生事件:

<my-component v-on:click.native="doTheThing"></my-component>

  

ps:这将触发my-component组件的click事件

8.修饰符 .sync
.sync双向绑定,从 2.3.0 起我们重新引入了 .sync 修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 侦听器。

示例:

子组件:

<template>
<button @click="onClick">单击</button>
</template>

<script>
export default {
  data () {
    return {foo: 1}
  },
  methods: {
    onClick () {
      this.$emit(‘update:foo‘, 10)
    }
  }
}
</script>

  

父组件:

<template>
  <div id="app">
    <span>{{ data }}</span>
    <child :foo.sync="data"></child>
  </div>
</template>

<script>
import Child from ‘@/components/Child‘
export default {
  name: ‘app‘,
  components: {Child},
  data () {
    return {
      data: 0
    }
  }
}
</script>

  

9.自定义表单事件:

<input v-model="something">

  

相当于:

<input
  v-bind:value="something"
  v-on:input="something = $event.target.value">

  

10.slot

子组件使用父组件传递过来的内容:

子组件:

<div>
  <h2>我是子组件的标题</h2>
  <slot>
    只有在没有要分发的内容时才会显示。
  </slot>
</div>

  

父组件:

<div>
  <h1>我是父组件的标题</h1>
  <my-component>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </my-component>
</div>

  

最终渲染:

<div>
  <h1>我是父组件的标题</h1>
  <div>
    <h2>我是子组件的标题</h2>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </div>
</div>

  

11.命名solt

子组件:

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

  

父组件:

<app-layout>
  <h1 slot="header">这里可能是一个页面标题</h1>
  <p>主要内容的一个段落。</p>
  <p>另一个主要段落。</p>
  <p slot="footer">这里有一些联系信息</p>
</app-layout>

  

最终渲染:

<div class="container">
  <header>
    <h1>这里可能是一个页面标题</h1>
  </header>
  <main>
    <p>主要内容的一个段落。</p>
    <p>另一个主要段落。</p>
  </main>
  <footer>
    <p>这里有一些联系信息</p>
  </footer>
</div>

  

12.作用域solt

子组件:

<div class="child">
  <slot text="hello from child"></slot>
</div>

  

父组件:

<div class="parent">
  <child>
    <template scope="props">
      <span>hello from parent</span>
      <span>{{ props.text }}</span>
    </template>
  </child>
</div>

  

最终结果:

<div class="parent">
  <div class="child">
    <span>hello from parent</span>
    <span>hello from child</span>
  </div>
</div>

  

13.作用域solt列表组件

子组件:

<ul>
  <slot name="item"
    v-for="item in items"
    :text="item.text">
    <!-- 这里写入备用内容 -->
  </slot>
</ul>

  

父组件:

<my-awesome-list :items="items">
  <!-- 作用域插槽也可以是具名的 -->
  <template slot="item" scope="props">
    <li class="my-fancy-item">{{ props.text }}</li>
  </template>
</my-awesome-list>

  

14.动态组件:
通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,我们让多个组件可以使用同一个挂载点,并动态切换

var vm = new Vue({
  el: ‘#example‘,
  data: {
    currentView: ‘home‘
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

<component v-bind:is="currentView">
  <!-- 组件在 vm.currentview 变化时改变! -->
</component>

  

也可以直接绑定到对象上:

var Home = {
  template: ‘<p>Welcome home!</p>‘
}
var vm = new Vue({
  el: ‘#example‘,
  data: {
    currentView: Home
  }
})

  

15.keep-alive
如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数

<keep-alive>
  <component :is="currentView">
    <!-- 非活动组件将被缓存! -->
  </component>
</keep-alive>

  

16.子组件索引ref

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>

  

使用:

var parent = new Vue({ el: ‘#parent‘ })
// 访问子组件
var child = parent.$refs.profile

  

17.异步组件
在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载。为了让事情更简单,Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数,并且把结果缓存起来,用于后面的再次渲染。例如:

Vue.component(‘async-example‘, function (resolve, reject) {
  setTimeout(function () {
    // Pass the component definition to the resolve callback
    resolve({
      template: ‘<div>I am async!</div>‘
    })
  }, 1000)
})

  

工厂函数接收一个 resolve 回调,在收到从服务器下载的组件定义时调用。也可以调用 reject(reason) 指示加载失败。

18.命名约定
当注册组件 (或者 props) 时,可以使用 kebab-case,camelCase,或 PascalCase;在html中应当使用kebab-case

19.内联模板
如果子组件有 inline-template 特性,组件将把它的内容当作它的模板,而不是把它当作分发内容。这让模板更灵活。

<my-component inline-template>
  <div>
    <p>These are compiled as the component‘s own template.</p>
    <p>Not parent‘s transclusion content.</p>
  </div>
</my-component>

  

20.对低开销的静态组件使用 v-once

尽管在 Vue 中渲染 HTML 很快,不过当组件中包含大量静态内容时,可以考虑使用 v-once 将渲染结果缓存起来,就像这样:

Vue.component(‘terms-of-service‘, {
  template: ‘    <div v-once>      <h1>Terms of Service</h1>      ... a lot of static content ...    </div>  ‘
})

  

时间: 2024-11-08 21:56:51

vue笔记三的相关文章

Vue笔记 ( 三 )

window系统 安装 yarn     :npm install -g yarn 安装cnpm     : npm install -g cnpm --registry=https://registry.npm.taobao.org 安装vue-cli    :npm install -g vue-cli 一个node package有两种依赖,一种是dependencies一种是devDependencies, dependencies 程序正常运行需要的包. devDependencies

Caliburn.Micro学习笔记(三)----事件聚合IEventAggregator和 Ihandle&lt;T&gt;

Caliburn.Micro学习笔记(三)----事件聚合IEventAggregator和 Ihandle<T> 今天 说一下Caliburn.Micro的IEventAggregator和IHandle<T>分成两篇去讲这一篇写一个简单的例子 看一它的的实现和源码 下一篇用它们做一个多语言的demo 这两个是事件的订阅和广播,很强大,但用的时候要小心发生不必要的冲突. 先看一下它的实现思想 在Caliburn.Micro里EventAggregator要以单例的形式出现这样可以

构建之法阅读笔记三—结对编程

构建之法阅读笔记三——结对编程 何谓结对编程,结对编程就是程序员肩并肩,平等的,互补的进行开发工作,他们使用同一台电脑,编写同样的程序,一起分析,一起设计,一块交流想法. 然而我以前却并不是这样做的,我以前喜欢在没人打扰的环境下写代码,我觉得有人在我身边看着,会影响我的思路,还有我个人自尊心比较强,不太喜欢被人指指点点,所以每次都是,我写完代码之后,自己先找自己的bug,每当自己实在找不到之后,才会请教大神,但是有时候可能由于自己的能力不足,往往一个很简单的问题,我自己发现就会花费很久的时间,让

3. 蛤蟆的计算机组成原理笔记三系统总线

3. 蛤蟆的计算机组成原理笔记三系统总线 本篇名言:"公正,一定会打倒那些说假话和假作证的人. --赫拉克利特" 欢迎转载,转载请标明出处:http://blog.csdn.net/notbaron/article/details/47988545 1.  总线 总线是连接各个部件的信息传输线,是 各个部件共享的传输介质. 1.1             面向CPU 的双总线结构框图 1.2             单总线结构框图 1.3             以存储器为中心的双总线

OpenCV for Python 学习笔记 三

给源图像增加边界 cv2.copyMakeBorder(src,top, bottom, left, right ,borderType,value) src:源图像 top,bottem,left,right: 分别表示四个方向上边界的长度 borderType: 边界的类型 有以下几种: BORDER_REFLICATE # 直接用边界的颜色填充, aaaaaa | abcdefg | gggg BORDER_REFLECT # 倒映,abcdefg | gfedcbamn | nmabcd

NFC学习笔记——三(在windows操作系统上安装libnfc)

本篇翻译文章: 这篇文章主要是说明如何在windows操作系统上安装.配置和使用libnfc. 一.基本信息 1.操作系统: Windows Vista Home Premium SP 2 2.硬件信息: System: Dell Inspiron 1720 Processor: Intel Core 2 Duo CPU T9300 @ 2.5GHz 2.5GHz System type: 32-bit Operating System 3.所需软件: 在windows操作系统上安装软件需要下列

swift学习笔记(三)关于拷贝和引用

在swift提供的基本数据类型中,包括Int ,Float,Double,String,Enumeration,Structure,Dictionary都属于值拷贝类型. 闭包和函数同属引用类型 捕获则为拷贝.捕获即定义这些常量和变量的原作用域已不存在,闭包仍然可以在闭包函数体内引用和修改这些值 class属于引用类型. Array的情况稍微复杂一些,下面主要对集合类型进行分析: 一.关于Dictionary:无论何时将一个字典实例赋给一个常量,或者传递给一个函数方法时,在赋值或调用发生时,都会

《你必须知道的.NET》读书笔记三:体验OO之美

一.依赖也是哲学 (1)本质诠释:"不要调用我们,我们会调用你" (2)依赖和耦合: ①无依赖,无耦合: ②单向依赖,耦合度不高: ③双向依赖,耦合度较高: (3)设计的目标:高内聚,低耦合. ①低耦合:实现最简单的依赖关系,尽可能地减少类与类.模块与模块.层次与层次.系统与系统之间的联系: ②高内聚:一方面代表了职责的统一管理,一方面又代表了关系的有效隔离: (4)控制反转(IoC):代码的控制器交由系统控制而不是在代码内部,消除组件或模块间的直接依赖: (5)依赖注入(DI): ①

老男孩培训视频听课笔记三(在51cto上听的)

SSH 连接Linux工具CRT SSH概念: 现在有两个版本的SSH1/SSH2,建议选择SSH2 查看服务端启动情况:$netstat -lntup | grep 22 自己加的:现在CRT工具很多:crt xshell putty ,现在我使用的是xshell           另外在在centos系统里可以安装lrzsz的软件包,可以实现在crt里利用rz/sz上传/下载小文件,大文件容易出错           CRT连接经常出现的问题:              ·超时问题:利用p