前面课程大纲

前端与HTML

前端工作的定义
前端技术栈拆解与分析
HTML 作用解析
HTML 语义化

走进前端技术栈 - CSS

CSS 代码构成
CSS 使用方法
CSS 流程之选择器组、文本渲染
调试 CSS

深入CSS

CSS 选择器的特异度
CSS 继承
CSS 求值过程解析
CSS 布局方式及相关技术
CSS 盒模型 - 行级
CSS 盒模型 - 块级

JavaScript 编码原则

以上的东西都不难，但是很悲惨，我要做项目，得学点别的。

关于VUE

如何搭建环境

1、下载node.js并安装用cmd node -v检查版本号

2、安装模块包，安装vue/cli -g vue-V检查是否安装成功

3、配置一下各种环境变量啥的

我要说一下，我这个搭建顺序比较混乱，原本是在搭express，后来干脆把前端这些也搭建了。反正过程就一直出错，就是得一直改一直等，也算耗费了一下午时间。出错的话，如果说你非法，可能就是权限的问题，如果是说什么不存在，就是没有成功咯，有的东西是像盖房子一样一层一层的，得按顺序来。

如何创建vue项目

1、 vue create xx

2、选择模板和包

3、启动

成功图片：http://localhost:8080/

一些基本语法

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。

在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。

文本插值

双大括号标签，将数据解释为纯文本

原始HTML

使用v-html指令

<p>Using text interpolation: {{ rawHtml }}</p>

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

Attribute 绑定

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

布尔型

布尔型依据 true / false 值来决定 attribute 是否应该存在于该元素上。

<button :disabled="isButtonDisabled">Button</button>

动态绑定多个值

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}

通过不带参数的 v-bind，可以将它们绑定到单个元素上：

使用 JavaScript 表达式

Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

这些表达式都会被作为 JavaScript ，以当前组件实例为作用域解析执行。

在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：

在文本插值中 (双大括号)
在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中

仅支持表达式

每个绑定仅支持单一表达式，也就是一段能够被求值的 JavaScript 代码。一个简单的判断方法是是否可以合法地写在 return 后面。

调用函数

可以在绑定的表达式中使用一个组件暴露的方法：

<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>

绑定在表达式中的方法在组件每次更新时都会被重新调用，因此不应该产生任何副作用，比如改变数据或触发异步操作。

指令

指令是带有 v- 前缀的特殊 attribute。Vue 提供了许多内置指令指令 attribute 的期望值为一个 JavaScript 表达式。一个指令的任务是在其表达式的值变化时响应式地更新 DOM。

<p v-if="seen">Now you see me</p>

参数

某些指令会需要一个“参数”，在指令名后通过一个冒号隔开做标识。例如用 v-bind 指令来响应式地更新一个 HTML attribute：

修饰符

修饰符是以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。例如 .prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()：

深入前端VUE ｜ 青训营