一叶之秋的博客

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。M（Model）V（View）VM（View-Model）官方网站：https://cn.vuejs.org ...

12、模块化随着网站逐渐变成"互联网应用程序"，嵌入网页的Javascript代码越来越庞大，越来越复杂。Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，它不支持"类"（class），更遑论"模块"（module）了。在 ES6 前， 实现模块化使用的是 RequireJS 或者 seaJS（分别是基于 AMD 规范的模块化库， 和基于 CMD 规范的模块化库）。

11、Promise在JavaScript的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现：例1、定时器// 1、timeout的定时器功能使用了回调函数console.log('before setTimeout()')setTimeout(()=>{ console.log('Done')}, 1000) // 1秒钟后调用callback函数console.log('af

10、箭头函数箭头函数提供了一种更加简洁的函数书写方式。基本语法是：参数 => 函数体// 传统var f1 = function(a){ return a}console.log(f1(1))​​// ES6var f2 = a => aconsole.log(f2(1)) // 当箭头函数没有参数或者有多个参数，要用 () 括起来。// 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，// 当只有一行语句，并且需要返回结果时，可以省略 {}

8、函数的默认参数function showInfo(name, age = 17) { console.log(name + "," + age)}​// 只有在未传递参数，或者参数为 undefined 时，才会使用默认参数// null 值被认为是有效的值传递。showInfo("Amy", 18) // Amy,18showInfo("Amy", "") // Amy,showInfo("Amy", null) // Amy, nullshowInfo("Amy")

5、声明对象简写const age = 12const name = "Amy"​// 传统const person1 = {age: age, name: name}console.log(person1)​// ES6const person2 = {age, name}console.log(person2) //{age: 12, name: "Amy"}6、定义方法简写// 传统const person1 = { sayHi:function(){

3、解构赋值解构赋值是对赋值运算符的扩展。他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。 //1、数组解构// 传统let a = 1, b = 2, c = 3console.log(a, b, c)// ES6let [x, y, z] = [1, 2, 3]console.log(x, y, z) //2、对象解构let user = {name: 'Helen', age: 18}

二、基本语法ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。本部分只学习前端开发中ES6的最少必要知识，方便后面项目开发中对代码的理解。1、let声明变量// var 声明的变量没有局部作用域// let 声明的变量 有局部作用域{var a = 0let b = 1}console.log(a) // 0console.log(b) // ReferenceError: b is not defined /

一、ECMAScript 6 简介ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。1、ECMAScript 和 JavaScript 的关系一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscap

二、下载和安装VS Code下载地址https://code.visualstudio.com/三、初始设置1、中文界面配置首先安装中文插件：Chinese (Simplified) Language Pack for Visual Studio Code右下角弹出是否重启vs，点击“yes”重启后如果界面没有变化，则 点击 左边栏Manage -> Command Paletet...【Ctrl+Shift+p】在搜索框中输入“configure display language”，

一、前端开发前端工程师“Front-End-Developer”源自于美国。大约从2005年开始正式的前端工程师角色被行业所认可，到了2010年，互联网开始全面进入移动时代，前端开发的工作越来越重要。最初所有的开发工作都是由后端工程师完成的，随着业务越来越繁杂，工作量变大，于是我们将项目中的可视化部分和一部分交互功能的开发工作剥离出来，形成了前端开发。由于互联网行业的急速发展，导致了在不同的国家，有着截然不同的分工体制。在日本和一些人口比较稀疏的国家，例如加拿大、澳洲等，流行“Full-Stack

二、基本语法1、基本数据渲染和指令你看到的 v-bind 特性被称为指令。指令带有前缀 v-除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）data: { content: '我是标题', message: '页面加载于 ' + new Date().toLocaleString()} <!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令 此时title中显示的是模型数据-->

2、初始Vue.js <!-- id标识vue作用的范围 --><div id="app"> <!-- {{}} 插值表达式，绑定vue中的data数据 --> {{ message }}</div><script src="vue.min.js"></script><script>​ // 创建一个vue对象 var app = new Vue({ el: '#

一、组件（重点）组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：1、局部组件定义组件var app = new Vue({ el: '#app', // 定义局部组件，这里可以定义多个局部组件 components: { //组件的名字 'Navbar': {

9、过滤器例1：局部过滤器data: { userList: [ {id: 1, name: 'peter', gender: 1}, {id: 2, name: 'helen', gender: 0} ]}使用if指令判断<table border="1"> <tr v-for="item in userList"> <td>{{item.id}}</td>

8、侦听属性当你有一些数据需要随着其它数据变动而变动时，可以使用侦听属性例1：data: { firstName: '道格拉斯', lastName: '狗剩' fullName: '道格拉斯 狗剩' },watch: { firstName(val){ console.log('firstName changed...') this.fullName = val + ' ' + this.lastName },​

7、计算属性例1：差值模板中使用js表达式data: { message: '上海自来水来自海上 haha'}模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。 <p>原始值: "{{ message }}"</p>​<!-- 1、插值数据绑定中使用表达式 --><p>反转消息: {{ message.split('').reverse().join('') }}</p&

6、列表渲染v-for：列表循环指令例1：简单的列表渲染<!-- 1、简单的列表渲染 --><ul> <li v-for="n in 10">{{ n }} </li></ul><ul> <!-- 如果想获取索引，则使用index关键字，注意，圆括号中的index必须放在后面 --> <li v-for="(n, index) in 5">{{ n }} - {{ index

5、条件渲染v-if：条件指令data: { ok: false}注意：单个复选框绑定到布尔值<input type="checkbox" v-model="ok">同意许可协议<!-- v:if条件指令：还有v-else、v-else-if 切换开销大 --><h1 v-if="ok">if：Lorem ipsum dolor sit amet.</h1><h1 v-else>no</h1>v-show：

4、修饰符修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：即阻止事件原本的默认行为data: { user: {}} <!-- 修饰符用于指出一个指令应该以特殊方式绑定。 这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault()：

3、事件需求：点击查询按钮，按照输入框中输入的内容查找公司相关信息在前面的例子基础上，data节点中增加 result，增加 methods节点 并定义 search方法data: { searchMap:{ keyWord: '尚硅谷' }, //查询结果 result: {}},methods:{ search(){ console.log('search') //TODO }}ht

使用element-ui渲染教师管理数据列表1、引入css和js<!-- import CSS --><link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <!-- import Vue before Element --><script src="vue.min.js"></script><!-- import JavaScript -->

六、element-ui：element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建官网： http://element-cn.eleme.io/#/zh-CN 1、引入css<!-- import CSS --><link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">2、引入js<!-- import Vue before Elemen

五、axiosaxios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端在浏览器中可以帮助我们完成 ajax请求的发送，在node.js中可以向远程接口发送请求1、获取数据<script src="axios.min.js"></script>注意：测试时需要开启后端服务器，并且后端开启跨域访问权限data: { teacher: {}},​created() { // 向具有指定ID的用户发出请求 t

四、路由Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。Vue.js 路由需要载入 vue-router 库1、引入js<script src="vue.min.js"></script><script src="vue-router.min.js"></script>2、编写html<div id="ap

三、实例生命周期data: { message: '床前明月光'},methods: { show() { console.log('执行show方法') }, update() { this.message = '玻璃好上霜' }}, <button @click="update">update</button><h3 id="h3">{{ message }}</h3>

二、自定义指令除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。1、局部指令// 局部指令的定义directives: { // 定义一个局部自定义指令 `v-focus` focus: { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } }}