前言

每个 Vue 实例在被创建时都要经过一系列的初始化过程 —— 例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

其实对生命周期而言，我们要搞懂的是。

1. 什么阶段初始化数据
2. 什么阶段初始化事件
3. 什么阶段渲染 DOM
4. 什么阶段挂载数据

前言

组件化也是 vue 的一大特点之一，组件是组成 vue 项目的基本单位。
一个组件可以做什么？ 这取决于组件的设计，组件一般由以下几点组成：

• 选项
• 实例属性 / 方法
• 生命周期
• 全局 API
• 指令
• 导入的其他组件

组件是可复用的 vue 实例，可以复用，导入导出，组成组件化系统。

vue 的组件都是保持相对独立的关系，可是又可以进行相互依赖（导入导出机制）；
这种规范下，实际开发又难免会出现组件之间传递数据、转发事件的场景。
而 vue 又对组件间的数据、事件做了一定的限制；
正因如此，我们需要好好探讨 vue 的组件通讯。

前言

双向绑定 是 vue 的一大特点之一，使用也非常方便。
在需要双向绑定的表单控件元素使用指令 v-model 即可。

官方文档教程 —— 表单输入绑定（传送门）
官方文档 api —— v-model 指令（传送门）

注意了：到目前为止，双向绑定只是针对表单控件元素，并没有说明其他 DOM 元素，或者是自定义组件。

那我们要如何实现在组件（或者说其他 DOM 元素）的双向绑定呢？

<base-components v-model="fieldValue"></base-components>

前言

写代码少不了，调试最简单方便的方法是控制台输出信息，如 js 的 control.log。
可有时候我们要监听的变量是改动频繁，可能要多次使用 control.log，控制台信息太多看得也容易乱。
有一次查阅资料的时候，看到其他开发者使用 pre 标签直接在页面上打印变量，突然受到了一点感悟。

pre 和 $data

html 的 pre 标签并不常用，它可以保留原格式（空格和换行符），常用于表示源代码。
有了 pre 我们很容易在页面上输出源码。此外，还需要 vue 的声明式渲染 —— ｛｛ x ｝｝ 或者是 v-text 指令。
以及 vue 的 $data 实例属性，其实引用的是 data 对象属性的访问。

附：博客系统，不支持双括号，这里用 v-text 代替，大部分情况下两者可以互换

说了那么多，其实只需要 <pre v-text="$data"></pre>, 这一行就够了。好的，今天就到这里，大家再见。

…

工作中实操过的项目部署记录，使用的是 Ubuntu 系统，nignx 和 C# 的运行环境均已安装。

前期配置文件准备

# 以acs.HOST.cn举例 （HOST）为主域名

# 项目路径
/home/wwwroot/acs.xxx.cn

# 从服务器下载文件配置文件（需要本机使用pscp或其他支持ftp协议的程序）
pscp USERNAME@IP:/home/wwwroot/acs.HOST.cn/appsettings.json E:\PATH

# nginx 配置acs 所有项目(HOSTboss.conf)
usr/local/nginx/conf/HOSTboss.conf

# nginx 配置路径
usr/local/nginx/conf/nginx.conf

# 守护进程
/etc/systemd/system/apps.acs.serive

v-if 获取 refs 问题

先简单介绍下这两个指令：

• v-if 条件渲染
• ref 返回组件实例或 DOM 元素

有时候我们需要在条件渲染的 DOM 节点上返回一个 DOM 对象或组件实例，可 this.$refs.child 返回的是 undefined。通过查阅文档得知:

v-if 是 “真正” 的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做 —— 直到条件第一次变为真时，才会开始渲染条块。
$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的 “逃生舱”—— 你应该避免在模板或计算属性中访问 $refs。

如此可得：

v-if 条件渲染： 惰性渲染，DOM、事件、组件会被销毁重建

ref 返回组件实例或 DOM 元素，非相应式

原型链是 js 的大动脉。

导读

js 的原型链难以避免要牵扯到面向对象，这里我们先简单说说原型还有原型链。之后我们说到面向对象的演变过程，会再次涉及到原型链，还有更多的东西。相信看完的读者会对 JavaScript 会有更深的认识。

原型对象

本小节意在介绍 js 中几位朋友，读者只需要记住有它们的存在就行了，毕竟这几位朋友性格有点隐匿。

首先，我们要明白，声明一个对象，哪怕是空属性，js 也生成一些内置的属性和方法。

/* 两种方法声明对象 */
// 对象直接量
var obj_1 = {};
// new关键字声明对象
var obj_2 = new Object();

// 在Object的原型对象添加属性
Object.prototype.attr = 'myarr'

console.log(obj_1); // {}
console.log(obj_2); // {}

// js中的恒等符号对函数来说只比较引用
// obj_1.valuOf函数来源于Object.valueOf
// 更准确来说是Object.protoype.valueOf
console.log(obj_1.valueOf === Object.valueOf); // true

// obj_1并未声明attr属性，通过Object.prototype继承得到attr属性
console.log(obj_1.attr); // myarr

ECMAScript 6（以下简称 ES6）是 JavaScript 语言的下一代标准。因为当前版本的 ES6 是在 2015 年发布的，所以又称 ECMAScript 2015。

Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。

let：let 实际上为 JavaScript 新增了块级作用域。用它所声明的变量，只在 let 命令所在的代码块（花括号）内有效；与 var 的区别是，var 用来做循环的计数变量，会泄露成全局变量，在外部调用的值是循环完成后的值。

const：声明变量，但声明的是常量，一旦声明，常量的值不能改变。

SQL 注入

通过把 SQL 命令插入到 web 表单提交或者页面请求的查询字符串，最终达到欺骗服务器执行恶意的 SQL 命令

防范 SQL 注入
1. 校验用户输入的参数，限制其长度或转义单引号或双连字符
2. 使用参数化 SQL 或直接使用存储过程进行数据查询存取
3. 每个应用使用单独的权限有限的数据库连接，不使用管理器权限连接数据库
4. 机密信息不明文存放，加密或 hash 掉密码和敏感信息

XSS

跨站脚本攻击 (Cross Site Scripting)，缩写为 XSS。恶意攻击者往 Web 页面里插入恶意 Script 代码，当用户浏览该页之时，嵌入其中 Web 里面的 Script 代码会被执行，从而达到恶意攻击用户的目的。

简单来说浏览器可以分为两个部分，shell + 内核，其中 shell 的种类比较多，内核的种类则比较少。

Shell 是指浏览器外壳：菜单、工具栏等；主要提供给用户操作，参数设置等，调用内核实现各种功能。

内核是浏览器的核心，基于标记语言显示内容的程序或模块。可分两部分，渲染引擎和 JS 引擎，负责渲染网页内容，计算网页的显示方式，不同内核的渲染效果不同。JS 引擎则执行 javascript 实现网页的动态效果。