Vue 入门 目录结构 .env.development v-if
1、官网
Vue 官网
Vue API 官网
Vue CLI 官网 npm 安装：npm install -g @vue/cli
Element 官网 npm 安装：npm i element-ui -S
2、安装
# 兼容性
Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
# Vue Devtools
在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools（https://github.com/vuejs/vue-devtools#vue-devtools）。它允许你在一个更友好的界面中审查和调试 Vue 应用。
# 直接用
* 对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
* 如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：
VUE 生命周期
生命周期图示 *
Vue 的生命周期包括四个状态
● creating 状态--vue 实例被创建的过程
● mounting 状态--挂到到真实的 DOM 节点
● updating 状态--如果 data 中的数据改变就会触发对应组件的重新渲染
● destroying 状态--实例销毁
Vue 生命周期方法和介绍
*
*
*
Vue 实例化
打开【运行】窗口输入【cmd】输入【tree /f> list.txt】生成项目的文件树状结构
§ 目录结构
.
├── build/ # Webpack 配置目录
├── config/ # vue 基本配置文件，项目初始化的配置
├── dist/ # build 生成的生产环境下的项目，打包后的项目
├── mock/ # mock数据目录
├── public/ # public
├── node_modules/ # 依赖包
├── src/ # 源码目录（开发都在这里进行）
│ ├── api/ # api接口请求地址
│ ├── assets/ # 放置需要经由 Webpack 处理的静态文件
│ ├── components/ # 组件
│ ├── directive/ # 指令
│ ├── filters/ # 过滤器
│ ├── icons/ # icons
│ ├── router/ # 路由
│ ├── store/ # 状态管理
│ ├── styles/ # styles 样式
│ ├── services/ # 服务（统一管理 XHR 请求）
│ ├── utils/ # 工具类
│ ├── vendor/ # vendor
│ ├── views/ # 路由页面组件
│ ├── App.vue # 根组件，项目入口文件
│ ├── main.js # 核心文件，引入vue框架，根组件，路由设置，并定义vue实例，加载公共组件
├── static/ # 静态资源，放置无需经由 Webpack 处理的静态文件
├── tests/ # 测试文件目录（unit&e2e）
├── .env.development # 环境变量配置（开发环境）
├── .env.production # 环境变量配置（生产环境）
├── .babelrc # Babel 转码配置
├── .eslintignore # （配置）ESLint 检查中需忽略的文件（夹）
├── .eslintrc # ESLint 配置
├── .gitignore # （配置）需被 Git 忽略的文件（夹）
├── package.json # 项目配置文件（这个就不用多解释了吧）
├── package-lock.json # （以记录当前状态下实际安装的各个npm package的具体来源和版本号)/vue-element-admin/.env.development（环境变量配置 - 开发环境）
/vue-element-admin/.env.production（环境变量配置 - 生产环境）
.env——全局默认配置文件，无论什么环境都会加载合并
注意：属性名必须以VUE_APP_开头，比如VUE_APP_SIGNAL_URL = "http://localhost:66666/"
# just a flag
ENV = 'development'
# base api
# VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = 'http://localhost:66666/api/'
VUE_APP_BASE_DOMAIN = 'http://localhost:66666/'
VUE_APP_SIGNAL_URL = 'http://localhost:66666/'
# 在 vue 文件中调用
# ${process.env.VUE_APP_BASE_API}
# ${process.env.VUE_APP_SIGNAL_URL}
vue-element-admin 目录结构
3、NPM 安装
npm install vue4、模板语法
*
*
*
5、Class 与 Style 绑定
*
可以传给 v-bind:class 一个对象，以动态地切换 class
可以把一个数组传给 v-bind:class，以应用一个 class 列表：
绑定内联样式
6、条件渲染
条件渲染
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-if
Vue is awesome!
也可以用 v-else 添加一个“else 块”：
Vue is awesome!
Oh no
在 元素上使用 v-if 条件渲染分组：因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 元素。
Title
Paragraph 1
Paragraph 2
v-else
可以使用 v-else 指令来表示 v-if 的“else 块”：
Now you see me
Now you don't
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-else-if
A
B
C
Not A/B/C
【注意：v-else-if 必须紧跟在带 v-if 或者 v-else-if 的元素之后。】
v-show【v-show指令：true 显示，false 隐藏】
Hello!
【注意：v-show 不支持 元素，也不支持 v-else。】
v-if 与 v-for 一起使用
【注意：不推荐同时使用 v-if 和 v-for。请查阅风格指南以获取更多信息】
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
7、列表渲染
列表渲染
可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
可以用 of 替代 in 作为分隔符，
-
{{ item.message }}
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})v-for 还支持一个可选的第二个参数，即当前项的索引。
-
{{ parentMessage }} - {{ index }} - {{ item.message }}
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})在 v-for 里使用对象
可以用 v-for 来遍历一个对象的属性。
-
{{ value }}
new Vue({
el: '#v-for-object',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})结果：
How to do lists in Vue
Jane Doe
2016-04-10可以提供第二个的参数为 property 名称 (也就是键名)：
{{ name }}: {{ value }}
结果：
title: How to do lists in Vue
author: Jane Doe
publishedAt: 2016-04-10可以用第三个参数作为索引：
{{ index }}. {{ name }}: {{ value }}
结果：
0. title: How to do lists in Vue
1. author: Jane Doe
2. publishedAt: 2016-04-10数组更新
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
*
8、事件处理
事件处理
监听事件
v-on 指令监听 DOM 事件
The button above has been clicked {{ counter }} times.
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})接收一个需要调用的方法名称
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})内联处理器中的方法
new Vue({
el: '#example-3',
methods: {
say: function (message) {
alert(message)
}
}
})
9、指令
{{}}
*
v-clock
保持在元素上直到关联实例结束时进行编译`
v-once
关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。
v-text
主要用来更新textContent，可以等同于JS的text属性，等价{{msg}}
v-html
双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。
v-pre
来跳过这个元素和它的子元素编译过程
v-mode
双向数据绑定
v-bind
给html元素或者组件动态的绑定一个或多个特性，例如动态绑定style和class
v-on
*
v-if
*
v-else
*
v-else-if
*
v-show
*
v-for
*
*
10、表单输入绑定
*
*
*
11、computed 计算属性
计算属性在处理一些复杂逻辑时是很有用的
Test1
原始字符串: {{ message }}
计算后反转字符串: {{ reversedMessage }}
*
12、directive
自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令
全局指令 与 局部指令
全局指令示例
Test1
页面载入时，input 元素自动获取焦点：
局部指令
Test1
页面载入时，input 元素自动获取焦点：
* *
13、filters 过滤器
filters过滤器
*
*
*
14、import、export、export default {}
参考第 26 条
*
*
15、Vue 单文件组件 (SFC) 规范
.vue 文件 是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 、
16
*
*
*
17、
*
**
*
*
*