1.vue 简介, vue 是一个构建用户界面的框架. 是一个轻量级 mvv 框架, 和 angular 一样是所谓的双向数据绑定, 数据驱动和组件化的前端开发, 通过简单的 api
实现响应式的数据绑定和组合试图组件, 容易上手, 小巧.
2. 安装 vue-devtools 插件, 便于在 chrome 中调试 vue, 配置是否允许 vue-devtools 检查代码, 方便调试, 生产环境设置为 false,vue.config.devtools = false;
vue.config.productionTip=false; 阻止启动生产消息.
3. 常用指令.
v-model 双向数据绑定, 一般用于表单元素.
v-for 对数组或对象进行循环操作, 使用是 v-for 不是 v-repeat
v-on 用来绑定时间, 用法: v-on : 时间 = '函数'
v-show/v-if 用来显示或隐藏元素, v-show 是通过 display 实现, v-if 是每次删除后在创建
4. 事件和属性
v-on:click = "简写 @click=""
$event 事件对象, 里面包括事件相关信息, 如事件源, 时间类型, 偏移量等
事件冒泡, 原生 js 方式, 依赖于事件对象, vue 方式, 不依赖于事件对象,@click.stop 来阻止事件冒泡;
键盘事件:@keydown.13 或 keydown.enter
事件修饰符 .stop 调用 event.stopPropagation();
v-bind 用于属性绑定, 用法 v-bind: 属性 =""举例 v-bind:src="" 简写 :src=""
5. 模板
vue.js 使用基于 html 的模板语法, 将 dom 绑定到 vue 实例中的数据模板就是 {{}} 用来进行绑定数据显示在页面中
双向绑定 v-model
单项绑定 {{}} 可能会出现闪烁问题, 也可以使用 v-text v-html
其他指令 v-once 数据绑定一次 v-pre 不变异, 直接原样显示
6. 过滤器
用来过滤模型数据, 在显示之前进行数据对的处理和筛选
语法: {{data | filter(参数) |filter(参数)}}
内置过滤器, 2.0 之后都删掉, 如果使用可以借助第三方库 如 lodash data-fns 日期格式化 accounting.js 货币格式化以及自定义
7. 发送 ajax 请求
vue 本身不支持发送 ajax 请求, 需要使用 vue-resourc axios 等插件实现, 建议使用 axios
axios 是一个基于 promise 的 http 请求客户端, 用来发送请求
基本用法:
axios.get(url[,options]); 传参方式, url 或者 params 传参
axios.post(url,data,[options]);
注意: axios 默认发送数据时, 数据格式是 request payload, 并非我们床用的 form data 格式, 所以参数必须要以键值对像是传递
, 不能以 json 形式传参
传参的方式: 自己拼接键值对, 使用 transformrequst 在请求发送前将请求数据进行转换, 或者使用 qs 模块进行转换
axios 不支持跨域请求, 可以使用 vue-resource 发送跨域请求.
跨域发送请求: this.$http.get(url,[options]); this.$http.post(url,[options]);
8.vue 生命周期
vue 实例从创建到销毁过程成为生命周期
9. 计算属性
计算属性也是用来存储数据, 具有这俩个特点: 数据可以进行逻辑处理操作, 对计算属性中的数据进行监视.
10.vue 实例属性和方法
属性 vm.$el vm.$data vm.$options vm.$refs
方法 vm.$mount() vm.$destroy vm.$nextTick(callback) vm.$set(object,key,vlaue) vm.$delete(object,key) vm.$watch(data,callback)
11, 自定义指令
自定义全局指令 vue.directive (指令 id, 定义对象)
12. 过度 (动画)
vue 在插入更新或一处 dom 时, 提供多种不同方式应用过程, 本质还是使用 CSS 动画,
基本用法: 使用 transition 组件, 将要执行动画的元素保函在改组件内
结合第三方动画库 animater.css 一起使用
显示内容
13. 组件
组件是 vue 最强大的功能之一, 组件可狂战 html 元素, 封装重用代码, 组件是自定义元素对象.
定义组件方式, a > 先创建组件构造器, 然后由组件构造器创建组件. b > 直接创建
引用模板讲组件内容放在模板中引用, 组件中数据 data;function 和 vue 实例存储数据不同
componect :is="" 组件, 多个组件使用同一个挂的点, 动态切换,
keep-alive 缓存组件, 避免从新创建, 效率比较高
使用方法
数据传递: 父子组件, 在一个组件内部又定义了另一个组件, 称为父子组件.
子组件只能在付组件中使用, 默认情况下, 子组件不能访问付组件数据. 每个组件的作用域是独立的.
组件间数据的通信: 在调用组件时, 绑定想要获取的付组件的数据, 在子组件内部, 使用 props 选项来生命获取
的数据, 接收来自付组件的数据. 例子: props:['msg'] props 可以是数组, 也可以是对象 props:{} 允许配置高级设计比如类型判断
数据的校验, 设置默认值 props:{messge:String,age:Number,name:{type:String,rquired:true,default:19,validator:function(){}}}, 对象做数组的默认值,
加下 web 前端干货分享 qqqun:437813258 免费领取全套教学视频资料!
对象必须使用函数返回.
组件中的数据有三种形式: data props computed
付组件访问子组件数据方式:
a. 在子组件中使用 vm.$emit(事件名, 数据) 出发一个自定义事件, 事件名自定义
b. 付组件在使用子组件的地方监听子组件出发事件, 并在付组件中定义方法, 用来获取数据
单项数据流:
props 是单项绑定的, 当付组件的属性变化时, 将传导给子组件, 但是不会反过来, 而且不允许子组件直接
修改付组件中的数据
解决方案: a. 如果子组件享把他作为局部数据来使用, 可以将数据存入另一个变量在操作
b. 如果子组件想修改数据并同步付组件, 使用. sync 2.3 开始支持, 或者将付组件数据包装成 udixiang,
然后在子组件中修改对象的属性.
非父子组件间通信:
可以通过一个空的 vue 实例来作为中央事件总线, 用他来出发事件或监控事件
var Event = new Vue(); 空对象
Event.$emit(事件名, 数据); 发送数据
Event.$on(事件名, data=>{}) 监听接收数据
slot 内容分发:
用来获取组件中的元内容, 就是组件标签中的内容;
获得指定标签内容可以给标签定义 slot="s1" 获取
14.vue-router 路由
使用 vue.js 开发 spa 单页面应用, 根绝不同 url 地址, 显示不同内容, 但实现在统一页面红, 称单页面应用.
bower info vue-router cnpm install vue-router -S
主页
新闻
- //1. 定义组件
- var Home={
- template:'我是主页'
- }
- var News={
- template:'我是新闻'
- }
- //2. 配置路由
- const routes=[
- {path:'/home',component:Home},
- {path:'/news/:username/:password'',component:News},
- {path:'*',redirect:'/home'} // 重定向
- ]
- //3. 创建路由实例
- const router=new VueRouter({
- routes, // 简写, 相当于 routes:routes
- // mode:'history', // 更改模式
- linkActiveClass:'active' // 更新活动链接的 class 类名
- });
- //4. 创建根实例并将路由挂载到 Vue 实例上
- new Vue({
- el:'#itany',
- router // 注入路由
- });
知识点: /* scoped 表示该样式只在当前组件中有效 */
路由嵌套和参数传递:
a. 查询字符串 login?name=tome&pwd=123 显示 {{$route.query}}
b.rest 风格 url regist/alice/324 显示获取 {{$router.params}}
路由实例的方法:
router.push(); 添加路由, 功能和 相同, 都是跳转页面
router.replace() 替换路由, 和上功能一样, 不产生历史记录
单文件组件:
.vue 文件称单文件组件, 是 vue.js 自定义的文件格式, 一个. vue 文件就是一个单独的毒箭, 在文件内封装了
单独的 js css html
.vue 文件由三部分组成 template style script
vue-loader 浏览器本身不认识你. vue 文件, 所以必须对. vue 文件加载解析, 此时需要 vue-loaderleisi 的 loaderhaiyou
很多, html-loader css-loader style-loader babel-loader 需要注意 vue-loader 是计划于 webpack 的
webpack 是一个前端资源模块化加载器和打包工具,
安装相关模板:
cnpm install vue-template-compiler -D // 预编译模板
合并: cnpm install -D webpack webpack-dev-server vue-loader
vue-html-loader css-loader vue-style-loader file-loader babel-loader
babel-core babel-preset-env vue-template-compiler
运行测试: npm run dev
15. 脚手架 vue-cli
vue-cli 是一个 vue 脚手架, 可以快速构建项目结构,
常用项目模板: webpack 保函 EsLint 代码么规范检查和 unit 单元测试,
webpack-simple 没有代码检查和单元测试
browserify 使用的也比较多
browserigy-simple
安装 vue-cli, 配置 vue 命令环境
cnpm install vue-cli -g
- vue --version
- vue list
初始化项目, 生成项目模板
语法: vue init 模板名 项目名
进入生成的项目目录, 安装模块包
- cd vue-cli-demo
- cnpm install
运行
- npm run dev // 启动测试服务
- npm run build // 将项目打包输出 dist 目录, 项目上线的话要将 dist 目录拷贝到服务器上
使用 webpack 模板
vue init webpack vue-cli-demo2
ESLint 是用来统一代码规范和风格的工具, 如缩进, 空格, 符号等, 要求比较严格
16. 模块化开发
首先在一个目录下 vue init webpack-simple vue-cli-demo 创建项目
进入目录 cd vue-cli-demo cmpn install 然后 npm run dev 运行测试
cmpn install vue-router -S -S 是生产依赖的意思;
编辑 main.js import VueRouter form ''vue-router' vue.use(Vue/router); 使用之后全局都可以用
编辑 app.vue 编辑 router.config,js
cnpm install axios -S
使用 axios 俩种方式:
a. 在使用 axios 的组件中, 都要引入 axios import axios from 'axios' axios.get('url').then(resp ->{resp.data});.catch(eorr->){}
b. 在 main.js 中全局引入 import axios from 'axios' 并添加到 vue 原型中 vue.prototype.$http=axios; 然后其他组件可以
vue.$http.get(); 或 this.$http.get();
为自定义组件添加事件:
比如自定一个 button vue 注册 默认不能绑定 @click=send 这样写 @click.ntaive=send 就可以
17ui 库 element ui
是一个 ui 的组件库, 是饿了么提供的一套基于 vue 2.0 的组件库 可以快速开发网址, 提高效率
element ui pc 端 mintui 移动端 官网 element.eleme.io
- cnpm install element-ui -S
- npm run dev
在 main.js 引入并使用这个组件 import ElementUI from 'elemtn-ui' import element-ui/lib/eheme=default/index.css
vue.use(ElementUI); 这种引入方式是引入全部的组件内容
在 webpack.confgi.js 中添加 loader test:/.css$/,loader:'style-loader!css-loader'
cnpm instal style-loader -D 字体字库 loader 配置
webpack 配置更改要重启
动态样式 是使用 less
使用 less 安装 loader less less-loader 配置 test:/.less$/,loader:less-loader 指定 style l ang=less 必须指定样式
自定义全局组件:
全局组件: 可以在 main.js 中使用 vue.use 进入全局引入, 然后在其他组件中都可以使用
创建 .vue 组件, 创建 index.js 文件 import Login from './Login.vue'
- export default {
- install:function(Vue){
- Vue.component('Login',Login);
- }
- }
普通组件: 每次使用都要引入, 如 axios
18.vuex 状态管理模式, 采用集中式存储, 管理应用所有组件的状态, 简单说集中管理数据, 类似于 react 中的 redux, 基于 flux
前段状态管理框架.
基本使用: nmp install vuex -S
创建 store.js 文件, vuex 相关配置. 在 main.js 中导入, import store fomr './store.js main.js 配置 store 选项, 子组 this.$store
import vue fomr vue import vuex from vuex vue.use(vuex);
vuex 核心 store 相当于一个容器, 一个 store 实例中包含一下属性和方法:
getters 获取属性
actions 定义方法 动作, 如流程判断 异步请求 const action={ 方法名 (context){})} context 对象有 comit dispatch state
commit 提交的意思, 修改数据唯一方式, conmit('add) 提交一个叫 add 的变化
mutations 定义变化
- var
- state= { count:6} // 创建 store 对象 const store=new Vuex.Strore{{state}};
- vargetters ={count)(){return state.count}} export default store;
编辑 app.js 编辑 store, 作为计算属性: computed:(){return this.$store.state.count};
方式一 this.#store 访问 方式二 mapGetters mapActios 访问
mapGetter 获取属性
mapActions 获取方法
导入辅助函数 import {mapGetter} from vuex
computed:mapGetters{('count')}
来源: http://www.jianshu.com/p/0eb9c1a73128