这是我参与更文挑战的第24天，活动详情查看： 更文挑战
一、vue的概述
- Vue.js是一个构建数据驱动的 web 界面的渐进式框架
- Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
- 核心是一个响应的数据绑定系统
二、vue的使用和下载
vue.js地址下载： cn.vuejs.org/v2/guide/in…
三、常见的html标签
成对出现的标签
<h1>h1标签</h1>
<div>div标签可以内部容纳其他标签</div>
<p>p标签是容器标签，可以内部容纳其他标签，段落标签</p>
单标签
四、渲染
条件渲染
• v-if ：条件性的渲染，指令表达式为true时，_x0008_被渲染,可结合使用div标签或 templates元素
• v-else ：必须紧跟在带 v-if 或者 v-else-if 的元素的后面
• v-else-if ：必须紧跟在带 v-if
列表渲染
• v-for ：基于一个数组来渲染一个列表。item in items 形式的特殊语法，其中items 是源数据数组，而 item 则是被迭代的数组元素的别名。item 可为属性，对象，索引.
五、事件处理
v-on v-bind：绑定事件，在触发时运行一些 JavaScript 代码可结合修饰符一起使用
v-on简写成@， v-bind简写成 ：
事件修饰符：
.stop常用事件
.prevent
.capture
.self
.once
.passive
常见事件
• click() 鼠标单击
• blur() 元素失去焦点
• focus() 元素获得焦点
• mouseover() 鼠标进入（进入子元素也触发）
• mouseout() 鼠标离开（离开子元素也触发）
• ready() DOM加载完成
六、传参
• v-model (输入值，String，双向绑定)
• size (尺寸，String， medium / small / mini)
• opt (选项列表，Array，kv数组形如[{key:1, value:xxx}])
• seperator (分隔符，String，如’,’、’|’、’-’)
• multiple (是否支持多选，Boolean)
• placeholder (提示，String)
七、表单输入绑定
• v-model：指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素
- <label>标签 表示表单元素的文字标注标签，定义文字标注
- <input>标签 表示表单元素的用户输入标签，定义不同类型的用户输入数据方式
type属性
- type="text" 定义单行文本输入框
- type="password" 定义密码输入框
- type="radio" 定义单选框
- type="checkbox" 定义复选框
- type="file" 定义上传文件
- type="submit" 定义提交按钮
- type="reset" 定义重置按钮
- type="button" 定义一个普通按钮
- <textarea>标签 表示表单元素的多行文本输入框标签 定义多行文本输入框
- <select>标签 表示表单元素的下拉列表标签 定义下拉列表
- <option>标签 与<select>标签配合，定义下拉列表中的选项
八、项目搭建
开发环境：idea 或 vscode
环境搭建：
-
安装node环境
-
vue项目环境
基础知识准备：
-
html
-
js，jquery，javascript，axios
-
vue框架
4.ui组件：element-ui
Vue组件
* 组件(Component)是Vue.js最强大的功能之一
* 组件可以封装重用代码
* 组件都是 Vue 的实例，可接受相同的选项对象 ，并提供相同的生命周期钩子
- 官方网站element.eleme.cn/#/zh-CN/com…
- Element-ui将样式封装成单文件组件，可以直接在项目中调用- 主要目录
页面调用结构
- 文件夹1(src)，开发目录
- 文件夹components：所有.vue单文件组件都在这个目录下
- 文件夹router：单文件组件的路由都在这个目录下
- 文件夹2(static)，静态资源目录，所有的css，js文件放在这个文件夹
- 文件夹3(dist)，项目打包发布文件夹，编译后的项目文件都在这个文件夹中
相关目录
- node_modules目录是node的包目录
- config是配置目录
- build是项目打包时依赖的目录
单文件组件
• 单文件组件：将一个组件相关的html、css、js写在一个单独的文件中
• 一个组件具有了结构、表现和行为的完整功能
• 方便组件之间随意组合以及组件的重用
• 文件扩展名为.vue
• 注意：文件中的js代码要有空格，并且不能以分号结尾
在组件中data 是一个函数，非字典，且必须返回字典，
组件template 中只能包括一个跟元素标签，需要多个标签，可使用div嵌套
主文件index.html
- index.html中引入src文件夹中的main.js
- main.js中导入顶级单文件组件App.vue
- App.vue中通过组件嵌套或者路由来引用components文
件夹中的其他单文件组件
所有的组件文件都被创建在src/components/目录下
所有的路由规则都配置在src/router/index.js文件中
九、vue实践
.post方法的参数说明:
$.get(url,data,success(data, status, xhr),dataType).error(func)
$.post(url,data,success(data, status, xhr),dataType).error(func)
- url 请求地址
- data 设置发送给服务器的数据，没有参数不需要设置
- success 设置请求成功后的回调函数
- data 请求的结果数据
- status 请求的状态信息, 比如: "success"
- xhr 底层发送http请求XMLHttpRequest对象
- dataType 设置返回的数据格式： "xml"、 "html"、 "text"、 "json"
- error 表示错误异常处理
- func 错误异常回调函数
axios原生请求
axios 数据格式为Payload 或 Form Data
Payload和Form Data的主要设置是根据请求头的 Content-Type 的值来的：
Payload Content-Type: 'application/json; charset=utf-8'
Form Data Content-Type: 'application/x-www-form-urlencoded'
axios拦截器
通过request拦截器在每个请求头里面塞入token，好让后端对请求进行权限验证。
创建一个respone拦截器，当服务端返回特殊的状态码，我们统一做处理，如没权限或者token失效等操作。
单文件组件
• 新建一个xx.vue 文件
• 新增并暴露api对象（src/api）
• 首先导入用到的组件和axios
• 在data中将要用到的数据给一个初始值，为空
• 在methods中写方法，发送axios获取数据或者调用api
• 根据需要选择配置域名
• 配置菜单访问路径地址
（src/components/layout/data/menu.js）
• 映射路由地址（src/router/index.js）
