前言

每个 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实现网页的动态效果。