Tong jiebin's Blog
0%

发表于 分类于 本文字数： 1.8k 阅读时长 ≈ 2 分钟

Object.create(proto, [propertiesObject]) 方法创建一个新对象，并且把 proto 设置为新对象的原型对象，propertiesObject 为可选参数，这个参数和JavaScript数据属性和访问器属性博客中 Object.defineProperty() 方法的第三个参数格式相同，如果提供了这个参数，那么将会给新对象添加指定的属性和对应的属性描述符。

Object.assign(target, ...sources) 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回分配属性后的目标对象。

阅读全文 »

发表于 分类于 本文字数： 1.5k 阅读时长 ≈ 1 分钟

  1. 在循环对象属性的时候使用for...in，在遍历数组的时候使用for...of

  2. for...of是 ES6 新引入的特性，可用于在可迭代对象（包括 Array、Map、Set、String、TypedArray、arguments对象）上创建一个迭代循环

  3. for...in遍历的是对象的可枚举属性和原型对象上的属性

阅读全文 »

发表于 更新于 分类于 本文字数： 4.5k 阅读时长 ≈ 4 分钟

Set

基本用法

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

阅读全文 »

发表于 更新于 本文字数： 92 阅读时长 ≈ 1 分钟

点击右下角的齿轮图标，然后点击”设置“，进入到设置界面。(打开设置的快捷键为 Ctrl + ,)

阅读全文 »

发表于 更新于 分类于 本文字数： 4.8k 阅读时长 ≈ 4 分钟

模块化的理解

引入

在早期的 JavaScript 开发中存在全局变量污染和依赖管理等问题，在多人开发前端应用时这是一个棘手的问题。

阅读全文 »

发表于 更新于 分类于 本文字数： 2.8k 阅读时长 ≈ 3 分钟

Prop 的大小写

在 HTML 标签中的属性名是大小写不敏感的，浏览器会自动把大写字符解释为小写字符。所以如果你在组件的 prop 中使用的是驼峰命名规则：

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
阅读全文 »

发表于 分类于 本文字数： 2.3k 阅读时长 ≈ 2 分钟

全局组件注册

写法一
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <!-- 第三步：使用组件 -->
    <div id="app">
        <my-component></my-component>
    </div>
    <script>
        // 第一步：使用extend定义组件
        var myHeader = Vue.extend({
            template: '<h1>header</h1>'
        });
        // 第二步：使用Vue.component注册组件
        // 格式：Vue.component('组件的名称', 创建出来的组件模板对象)
        Vue.component('my-component', myHeader);

        new Vue({
            el: '#app'
        });
    </script>
</body>
</html>
阅读全文 »

发表于 更新于 分类于 本文字数： 6.7k 阅读时长 ≈ 6 分钟

基本示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../lib/vue.js"></script>
	</head>
	<body>
		<!-- 第一步：定义模板 -->
		<template id="counter">
			<div>
				<button @click="count++">click me {{count}} times</button>
			</div>
		</template>
		<!-- 第三步：使用组件 -->
		<div id="app">
			<counter></counter>
		</div>
		<script type="text/javascript">
			// 第二步：定义、注册组件
			Vue.component('counter', {
				data() {
					return {
						count: 0
					}
				},
				template: '#counter'
			});
			new Vue({
				el: '#app'
			});
		</script>
	</body>
</html>
阅读全文 »