FrequencyStar-CSDN博客

原创 08.JavaScript BOM

BOMwindow对象全局作用域window对象同时扮演着ECMAScript中Global对象的角色，因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法var age = 29;function sayAge(){ alert(this.age);}alert(window.age); //29sayAge(); //29window.sayAge(); //29全局变量不能通过delete操

2020-08-30 14:57:04 155

原创 07.JavaScript函数表达式

函数表达式定义函数的方式有两种：一种是函数声明，另一种就是函数表达式函数声明的语法是这样的。function functionName(arg0, arg1, arg2) { //函数体}关于函数声明，它的一个重要特征就是函数声明提升（function declaration hoisting），意思是在执行代码之前会先读取函数声明。这就意味着可以把函数声明放在调用它的语句后面第二种创建函数的方式是使用函数表达式。函数表达式有几种不同的语法形式var functionName

2020-08-27 17:48:39 141

原创 06.JavaScript面向对象的程序设计

面向对象的程序设计理解对象创建自定义对象的最简单方式就是创建一个Object的实例，然后再为它添加属性和方法var person = new Object();person.name = "Nicholas";person.age = 29; person.job = "Software Engineer";person.sayName = function(){ alert(this.name); };几年后，对象字面量成为创建这种对象的首选模式。前面的例子用对象字面量语

2020-08-27 13:01:02 155

原创 05.JavaScript引用类型

引用类型引用类型的值（对象）是引用类型的一个实例。ObjectArrayDateRegExpFunction基本包装类型单体内置对象Object类型（ES6有变化）创建使用new操作符后跟Object构造函数var person = new Object();person.name = "Nicholas";person.age = 29;使用对象字面量表示法var person = { name : "Nicholas", age :

2020-08-22 21:59:08 612

原创 04.变量、作用域和内存问题

变量、作用域和内存问题基本类型和引用类型的值ECMAScript变量可能包含两种不同数据类型的值：基本类型值和引用类型值。基本类型值指的是简单的数据段，而引用类型值指那些可能由多个值构成的对象5种基本数据类型：Undefined、Null、Boolean、Number和String。这5种基本数据类型是按值访问的，因为可以操作保存在变量中的实际的值引用类型的值是保存在内存中的对象。在操作对象时，实际上是在操作对象的引用而不是实际的对象。为此，引用类型的值是按引用访问的。动态的属性定义

2020-08-19 20:57:51 115

原创 03.JavaScript基本概念

基本概念语法区分大小写ECMAScript中的一切都区分大小写标识符所谓标识符，就是指变量、函数、属性的名字；或者函数的参数。第一个字符必须是一个字母，下划线或一个美元符号其他字符可以是字母，下划线，美元符号或数字按照惯例，ECMAScript标识符采用驼峰大小写格式，也就是第一个字母小写，剩下每个有意义的单词的首字母大写，例如myCar注释// 单行注释/* * 这是一个多行 * （块级）注释 */严格模式启用严格模式，在脚本顶端添加"use strict"语句

2020-08-19 12:01:49 143

原创 02.在HTML中使用JavaScript

在HTML中使用JavaScript<script>元素通过<script>元素插入JavaScriptHTML4.01为<script>定义了以下6个属性：async：可选表示应该立即下载脚本，但不应妨碍页面中的其他操作只对外部脚本有效charset：可选表示通过src属性指定的代码的字符集defer：可选表示脚本可以延迟到文档完全被解析和显示之后再执行只对外部脚本有效language：已废弃表示用于表示代

2020-08-15 21:23:55 139

原创 01.JavaScript简介

JavaScript简介JavaScript实现一个完整的JavaScript实现应该由下面三个不同的部分组成。ECMAScript-核心DOM-文档对象模型BOM-浏览器对象模型文档对象模型-DOM文档对象模型（DOM，Document Object Model）是针对XML经过扩展用于HTML的应用程序接口（API，Application Programming Interface）。DOM把整个页面映射为一个多层节点结构。HTML页面中的每个组成部分都是某种类型的节点，这些节点

2020-08-15 16:24:04 106

原创 Vue自定义事件【十三】

自定义事件事件名推荐你始终使用 kebab-case 的事件名。<div id="app"> <blog-post @my-welcome="sayHi()"></blog-post> </div> <script> Vue.component('blog-post', { props: ['post'], template: `<button @click=

2020-08-11 18:43:45 140

原创 Vue的Prop【十二】

PropProp的大小写HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名<div id="app"> <blog-post post-title="hhhh"></blog-post> </div> <script

2020-08-09 20:34:35 332

原创 Vue组件注册【十一】

组件注册组件名Vue.component('my-component-name', { /* ... */ })该组件名就是 Vue.component 的第一个参数。自定义组件名 (字母全小写且必须包含一个连字符)。推荐组件名大小写定义组件名的方式有两种：使用kebab-caseVue.component('my-component-name', { /* ... */ })当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用

2020-08-09 18:52:29 114

原创 Vue组件基础【十】

组件基础基本示例// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'})<div id="compone

2020-08-07 22:35:23 159

原创表单输入绑定【九】

表单输入绑定基础用法文本多行文本复选框单选按钮选择框<div id="app"> <form action="#">  <input type="text" placeholder="文本" v-model="text" /> <span>text : {{text}}</span><br /> <hr

2020-08-07 17:48:51 109

原创 Vue事件处理【八】

事件处理监听事件用v-on指令监听DOM事件，并在触发时运行一些JavaScript代码或者methods方法。<div id="app"> <p>This is counter: {{counter}}</p> <button v-on:click="add()">Add 1</button> </div> <script> let vm = new Vue(

2020-08-07 11:44:33 126 1

原创 Vue列表渲染【七】

列表渲染v-for用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。<div id="app"> <ul> <li v-for="(item, index) in items" :key="index"> {{parent}}-{{index}}-{{item.message

2020-08-05 20:59:51 202

原创 Vue条件渲染【六】

条件渲染v-ifv-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。也可以用 v-else 添加一个“else 块”：<div id="app"> <h1 v-if="awesome">I am the first h1</h1> <h1 v-else>oh no</h1> </div> <script> let

2020-08-03 19:13:02 152

原创 Vue Class与Style绑定【五】

Class与Style绑定操作元素的class列表和内联样式是数据绑定的一个常见需求，因为他们都是attribute，所以我们可以用v-bind来处理他们绑定HTML Class对象语法通过v-bind:class,借助data或计算属性，来动态改变某个class是否存在<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta nam

2020-08-02 22:41:10 138 1

原创 Vue计算属性【四】

计算属性和侦听器计算属性模板内的表达式是用于简单运算的，放入太多的逻辑会让模板过重且难以维护。因此，对于复杂逻辑运算，应当使用计算属性。<div id="app"> <p>This is message: {{ message }}</p> <p>This is message.reverse: {{ reverse }}</p> </div> <script>

2020-08-01 23:26:41 122

原创 Vue模板语法【三】

模板语法Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。插值文本Mustache语法（双大括号）：<span>Message: {{ msg }}</span>msg的值绑定在data的msg的property上，如果data的msg的值发生改变，则插值处的内容就会更新。v-once指令，可以实现一次性插值

2020-08-01 12:35:32 188

原创 Vue的API之选项/数据

Vue的API之选项/数据data类型：Object | Function限制：组件的定义只接受Function详细：Vue实例的数据对象。Vue会递归将data的property转换为getter/setter，从而让data的property能够响应数据变化。如下代码，将message作为Vue对象的一个属性，进行getter和setter，message就变成了直属于vm对象的一个属性。let vm = new Vue({ el: '#app', dat

2020-07-31 12:09:56 242

原创 Vue实例【二】

Vue实例1、创建一个Vue实例每个Vue应用都是通过一个Vue函数创建一个新的Vue实例开始的。一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。var vm = new Vue({ // 选项})当创建一个 Vue 实例时，你可以传入一个选项对象。这篇教程主要描述的就是如何使用这些选项来创建你想要的行为。作为参考，你也可以在 API 文档中浏览完整的选项列表。2、数据与方法当一个 Vue 实例被创建时，它将 dat

2020-07-30 17:12:21 110

原创 Vue自学官方文档入门【一】

Vue入门之一1、介绍Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。2、起步可以通过下面的CDN引入Vue（入门过程中暂时不使用vue-cli）&lt

2020-07-29 22:47:17 395

原创【Vue踩坑之一】箭头函数的this指向

【一】methods箭头函数的this指向箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象<body> <h1 id="app"> <span>{{message}}</span><br /> <button v-on:click="reverseMessage">逆转消息</button> </

2020-07-29 21:39:28 1324

FrequencyStar的博客