常用Vue指令总结

v

指令	说明
v-model	双向数据绑定，一般用于表单元素
v-for	对数组或对象进行循环操作
v-on	绑定事件，用法v-on:事件=“函数”
v-show/v-if	用来显示或隐藏元素，v-show是通过display实现，v-if是每次删除后再重新创建
v-on:	简写：@
$event	包含target，type，offset…

事件对象$event
阻止事件冒泡：
1,原生js，依赖于事件对象，需要调用stopPropagation()方法
2,vue方式：@click.stop,不依赖于事件对象
阻止事件默认：
1，原生js：依赖于事件对象，调用preventDefault()方法
2，vue方式：不依赖于事件对象，@click.prevent
键盘事件：
回车：@keydown.13或@keydown.enter
事件修饰符：

名称	描述
.stop	调用event.stopPropagation()
.prevent	调用event.preventDafault()
.{keyCode|keyAlias}	只当事件是从特定键触发时才触发回调
native	监听组件根元素的原生事件
.once	只触发一次回调

---

属性绑定和简写

v-bind用于属性绑定  语法v-bind：属性=" 	"，简写为	:src|

class和style属性：
绑定class

---

模板：

​ Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据
​ 模板就时{{}}，用来进行数据绑定，显示在页面中，也成为Mustache语法
​ 数据绑定的方式：
​ 1，双向绑定：v-model
​ 2，单项绑定：a):{{}} 可能会出现闪烁的问题，使用v-cloak 需要结合css [cloak]{display:none}使用
​ b):使用 v-text，v-html

其他指令

​ v-once：数据值绑定一次
​ v-pre：不编译，直接显示

过滤器：

​ 简介：用来过滤模型数据，在显示之前进行数据处理和筛选
​ 语法：{{data | filter1 | filter2(参数)}}
​ vue1.0中许多内置过滤器，如：currency、uppercase、lowercase、limitby、orderby、filterBy
​ vue2.0中已经废弃了所有内置过滤器，
​ 如何解决：
​ a,使用第三方工具库，如loadash，data-fn（日期格式化），accounting.js（对货币进行格式化）
​ b,自定义过滤器，

自定义过滤器：：

​ 分类：全局过滤器，局部过滤器
​ 自定义全局过滤器：
​ 使用全局方法：Vue.filter(过滤器ID，过滤器函数)
​ 自定义局部过滤器：

发送AJAX请求

​ 简介：
​ vue本身不支持发送AJAX请求，需要使用vue-resource、axios【官方推荐，vue2.0】
​ axios是一个基于promise的HTTP请求客户端，用来发送请求。
​ 基本用法：
​ axios([options])
​ axios.get(url,[options])
​ 传参：1，通过url传参
​ 2，通过params传参
​ axios.post(url,data,[options])；
​ axios默认发送数据时，数据格式时Request Payload，并非我们常用的form data格式
​ 所以参数必须要以键值对形式传递，不能以json形式传参
​ 传参方式：
​ 1，自己拼接键值对
​ 2，使用transformRequest，在请求发送前将请求数据进行转换
​ 3，如果使用模块化开发，可以使用qs 模块进行转换
​ axios本身不支持跨域请求，
​ 使用vue-resource发送跨域请求

vue生命周期

​ vue实例从创建到销毁的过程，称之为生命周期，共有八个阶段

阶段	说明
beforeCreate	组件刚被创建，还没尽兴数据观测和事件配置
created	实例已经创建完成，并且已经进行数据观测和事件配置
beforeMount	模板编译之前，还没挂载
mounted	模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示
beforeUpdate	组件更新之前
updated	组件更新之后
beforeDestroy	组件销毁之前
destroyed	组件销毁之后

计算属性：

​ 1，基本用法
​ 计算属性也是用来存储数据，但是有以下几个特点
​ 1，数据可以用来进行逻辑处理操作
​ 2，对计算属性中的数据进行监视。
​ 2，计算属性vs方法
​ 将计算属性的get函数定义为一个方法也可以实现类似的功能
​ 区别：
​ a.计算属性是基于他的以来进行更新的，只有在相关依赖发生时才能更新变化
​ b.计算属性是缓存的，只要相关依赖没有改变，多次访问计算属性的到的值是之前缓存存的计算记过，不会多次执行。
​ 3，get和set
​ 计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性
​ 默认只有get，如果需要set，要自己添加

vue实例的属性和方法

​ 属性：vm. e l v m . el vm. elvm.data vm. o p t i o n s v m . options vm. optionsvm.refs
​ 方法：
​ vm.KaTeX parse error: Expected 'EOF', got '#' at position 8: mount("#̲id") ​ vm.destroy()
​ vm. n e x t T i c k ( c a l l b a c k ) ​ v m . nextTick(callback) ​ vm. nextTick(callback)​vm.set(object,key,value)
​ vm. d e l e t e ( o b j e c t , k e y ) ​ v m . delete(object,key) ​ vm. delete(object,key)​vm.watch(data,callback[options])

自定义指令：

​ 分类：全局指令、局部指令
​ 自定义全局指令：Vue.directive(指令id,[definition定义对象])
​ 自定义局部指令：directives：{}

过度：

​ Vue提供了transition的封装组件，在插入，更新或移除dom时提供不同效果的应用过度效果
​ 基本用法：transition将要执行动画的元素包含在该组件内。
​
​ 运动的元素
​

​ 过滤的css类名 6个
​ 钩子函数：8个
​ 结合第三方动画库animate.css一起使用
​

 <transition 
        enter-active-class="animate__animated animate__fadeInLeft"
        leave-active-class="animate__animated animate__fadeOutRight">
            <p v-show="flag">青羊区</p>

        </transition>

​ 多元素动画
​

组件component

​ 简介：可以扩展HTML元素，封装可重用的代码，组件是自定义元素（对象）
​ 定义组件的方式：
​ 方式1：先创建组件构造器，然后由组件组件构造器来创建组件
​ 方式2：直接创建组件
​ 组件的分类：
​ 全局组件
​ 局部组件

​ 引用模板
​ 将组件内容放到模板中并引用

动态组件

​ 组件
​ 多个组件使用同一个挂载点，然后动态的在他们之间切换
​

组件间数据传递

​ 1，父子组件
​ 在一个组件内部定义另一个组件，称之为父子组件，子组件只能在父组件里面用，
​ 默认情况下子组件不能访问父组件中的数据，每个组件实例的作用域都是独立的
​ 2，组件间数据传递（通信）
​ 子组件访问父组件的数据：
​ a)：在调用子组件时，绑定想要获取的父组件中的数据
​ b)：在子组件内部，使用props选项来声明获取的数据，即接收 来自父组件的数据。
​ 注：组件中的数据总共有三种形式：data，props，computed
​ 总结：父组件通过props向下传递数据给子组件
​ 父组件访问子组件的数据：
​ a)：在子组件中使用vm.$emit(事件名，数据)触发一个自定义事 件，事件名自定义
​ b)：父组件在使用子组件的地方监听子组件触发的事件，并在父 组件中定义方法，用来获取数据
​ 总结：子组件通过events给父组件发送消息，实际上就子组件把 自己的数据发送到父组件

单向数据流

​ props时单向绑定的，当父组件的属性变化时，将传导给子组件，但是不会反过来。而且不允许子组件直接修改父组件中的数据。会报错。
​ 解决方式：
​ 方式1：如果子组件想把他作为局部数据来使用，可以把数据存入另外一个变量再进行操作，不会影响父组件
​ 方式2：如果子组件想修改数据并且同步更新到父组件有两种方法
​ 1，使用.sync() this.$emit(‘update:value’,‘newValue’) 需要显式的触发一个更新事件
​ 2，可以把父组件中的数据包装成对象，然后在子组件中修改对象的属性（因为对象是引用类型，指向同一个内存空间），更推荐这个方式

非父子组件间的通信

​ 非父子组件间的通信，可以通过一个空的vue实例作为*事件总线（事件中心）。用它来触发事件和监听事件

slot内容分发：

​ slot本意：位置，槽
​ 作用：用来获取组件中的原内容。类似于angular中的translude指令

vue-router路由：

​ 简介：使用Vue.js开发SPa（single Page Application）单页面应用
​ 单页面应用：根据不同url地址，显示不同的内容，但显示在同一个页面中。
​ 基本用法
​ 1，进行页面布局 见demo

路由的嵌套和参数的传递

​ 嵌套：就是在子路由下再写一个路由，需要children[ ]
​ 传参的两种形式：a:查询字符串：login?name=tom&pwd=123
​ {{KaTeX parse error: Expected 'EOF', got '}' at position 12: route.query}̲} ​ b…route.params}}

路由实例的方法：

​ router.push()：添加路由，功能上与router-link功能相同
​ router.replace()：替换路由，不产生历史记录

单文件组件

​ 1，.vue文件
​ .vue文件称之为单文件组件，是vue.js自定义的一种文件格式，一个.vue文件就是一个单独的文件，在文件内封装了相关的代码：html、css、js、
​ .vue文件由三部分组成：、

<template>
html
</template>
<style>
css
</style>
<script>
	js
</script>
	

​ 2，vue-loader 加载器
​ 浏览器本身不认识.vue文件，所以必须对.vue文件进行加载解析，此时需要vue-loader
​ 类似的loader还有很多，如：html-loader、css-loader、style-loader、babel-loader等
​ 需要注意的是vue-loader是基于webpack的
​ 3，webpack
​ webpack是一个前端资源模块化加载器和打包工具，他能够把各种资源都作为模块来使用和处理，实际上webpack是通过不同的loader将这些资源加载后打包，然后输出打包后的文件。简单来说webpack就是一个模块加载器。所有资源都可以作为模块来加载，最后打包输出。
​ webpack有一个核心配置文件：webpack.config.js，必须放在项目根目录下
​ 示例、步骤：
​ 1，创建项目，目录结构如下：
​ |-index.html
​ |-main.js 入口文件
​ |-App.vue vue文件
​ |-package.json 工程文件{描述文件，依赖呀描述信息等等}
​ |-.babelrc Babel配置文件
​ |-webpack.config.js webpack配置文件
​ 2，编写App.vue
​ 3，安装相关模块
​ cnpm install vue -S
​ cnpm install webpack -D
​ cnpm install webpack-dev-server -D
​ cnpm install vue-loader -D
​ cnpm install vue-html-loader -D
​ cnpm install vue-style-loader -D
​ cnpm install file-loader -D
​ cnpm install babel-loader -D
​ cnpm install babel-core -D
​ cnpm install babel-preset-env -D //根据配置的运行环境自动启用需要babel插件
​ 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
​ 4，编写main.js
​ 5，编写webpack.config.js
​ 6，编写.babelrc
​ 7，编写package.json
​ 8，运行测试
​ npm run dev

vue-cli脚手架：

​ vue-cli快速构造项目结构
​ vue-cli本身集成了多种项目模板：
​ simple：用的很少 简单
​ webpack：包含esLint代码规范检查，unit单元测试等
​ webpack-simple：没有代码规范和单元测试
​ browserify：更webpack差不多
​ browserify-simple：browserify的简化版
​ 示例：
​ 1，npm install -g vue-cli，配置vue的命令环境，验证版本命令 (不带尖括号)<vue --version> (查看可用模板)
​ 2，初始化项目 vue init
​ 3，进入生成的项目目录，安装模块包 cnpm install
​ 4，运行 npm run dev 启动测试服务，这是测试，如果在生产环境下要使用npm run bulid命令将项目进行打包dist目录，项目上线的话要将dist目录拷贝到服务器上。
​ 示例：使用webpack模板 vue init webpack demo3
​ Eslint使用来统一代码规范和风格的工具，如缩进，空格，符号等

模块化开发：

​ 1，vue-router模块化
​ cnpm install vue-router -S
​ 2，编辑main.js
​ 3，编辑App.vue
​ 4，编辑router.config.js
​
​ axios模块化
​ 安装命令：cnpm install axios -S
​ 使用axios的两种方式：
​ 1，在每一个组件中引入axios
​ 2，在main.js中全局引用axios并添加到vue的原型中。
​ 为自定义组件添加事件需要添加修饰符

Element UI

​ 简介：Element UI是饿了吗提供的一套基于Vue2.0的组件库，可以快速的搭建你的网站，提高开发效率。
​ Element UI PC端
​ MintUI 移动端
​ 快速上手：
​ 1，cnpm install element-ui -S
​ 2，在main.js中引入并使用组件

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI);

​ 3，在webpack.config.js中添加loader，更改webpack.config.js之后要重启服务器，css样式和字体图标都需要相应的loader来加载

默认 没有这个匹配规则
{
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
     }

​ 4，使用组件
​ 5，使用less
​ 安装loader ，需要两个：less、less-loader

cnpm install less less-loader -D

​ 按需引入组
​ 1，cnpm install babel-plugin-component -D
​ 2，配置.babelrc文件

"plugins":[
["components",[{
"librarName":"element-ui",
"styleLibraryName":"theme-default"}]
	]
]

​ 3，只引入需要的插件

自定义全局组件（插件）：

​ 全局组件（插件）：指可以在main.js中使用Vue.use()进行全局引入，然后在其他组件中就可以直接使用，如vue-router
​ 普通组件（插件）：每次使用都要引入，如axios

Vuex

​ vuex是一个专门为Vue.js 应用程序开发的状态管理模式，他采用集中式存储管理应用的所有的组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，简单来说，就是用来集中管理数据，类似于React中的Redux，都是基于Flux的前端状态管理框架
​ 基本用法：
​ 1，安装vuex cnpm install vues -S
​ 2，创建store.js文件， 在main.js文件中导入（import store from ‘./store.js’)并配置store选项
​ 3，编辑store.js文件

---

项目
1，初始化项目：

vue init webpack itany
cd itany
cnpm install 
cnpm install less less-loader -D
cnpm install vuex -S
cnpm install axios -S
npm run dev

​ 2，项目资源
​ |-reset.css
​ |-data.json
​ 3，创建目录结构
​ 清除项目中的部分内容
​ 创建如下目录结构

|-data.json
|-static
	|-css
		|-reset.css

​ 4，配置api接口，模拟后台数据
​ 使用express框架启动一个node服务器，配置Api接口，模拟后台数据
​ 参考http://www.duanlonglong.com/qdjy/940.html

​ 测试api http://localhost:8081/api/goods#/
​ 5，项目整体结构开发