vue组件开发

下载

bower 前端包管理器
bower install vue#1.0.28包名 安装
bower uninstall包名 卸载
bower info 查看包的相关信息

import 组件名 from 组件路径
import 直接文件路径

-------------------------------------------

vue 动画（过渡）

本质走的是css3的transition,animation
<div id="div1" v-show="bSign" transition="fade"

<style>
.fade-transition {
transition:1s all ease;
}
.fade-enter{opacity:0}
.fade-leave{opacity:0}
</style>
----------------------------------------------
animate.css 和 vue结合做动画

--------------------------------------
new Vue({
transitions:{
bounce:{
enterClass:'zoomInLeft',
leaveClass:'zoomOutRight'
}
}

})

-----------------------------------------

vue组件：

组件一个大的对象；
定义组件：
1.全局组件；
组件里面想要放数据：
data必须是函数的形式，函数必须返回一个对象json
var Aaa=Vue.extend({
data() {
return {
msg:'我是标题';
}

},
methods:{
change() {
this.msg='changed'
}
}
template:'<h3 @click="change">{{msg}}</h3>'
});
var a=new Aaa();
Vue.componet('aaa',Aaa);

2.局部组件
放到某个组件内部
var vm= new Vue({
el:'#box',
components:{//局部组件
'my-aaa',{
template:'<h2>good</h2>'
}

}

})
-------------------------------------------
另一种编写组件的方式：
Vue.component('my-aaa',{
template:'<h2>good</h2>'
});
----------------------------------
配合模板：
1.template:
2.d单独放到某个地方
a)
<script type='x-template' id="aaa">
<h2 @click="change">{{msg}}</h2>
</script>
b) <template id='aaa'>
</template>

-------------------------------------------
动态组件:
<component :is="a"></component>
其中a是组件

------------------------------------------
组件的嵌套：
vue-devtools 调试工具
vue默认情况下，子组件无法访问父组件的数据；

------------------------------------

组件间的数据传递：

1.子组件就想获取父组件的data
在调用子组件：
子组件之内：props:['m','myMsg']
props:{
'm':String,
'myMsg':Number
}
<template id='aaa'>
<bbb :msg='msg2' :my-msg='msg2'></bbb> :m自定义属性
</template>

components:{
'bbb':{
propS:['msg','myMsg'],
template:'<h3>我是子组件-->{{msg}}<br/>{{myMsg}}</h3>'
}
}

-----------------------------------------
父组件获取子组件数据，

子组件把自己的数据，发送到父组件，
vm.$emit(数据名称(事件名称)，数据)
this.$emit('child-msg',this.a);
父组件接收子组件数据：
v-on
@child-msg=“get”
---------------------------------------------
vm.$dispatch(事件名，数据) 子级向父级发送数据
vm.$broadcast(事件名，数据） 父级向子级广播数据
配合：events{}
var vm=new Vue({
el:'#box',
events:{

}
})
在vue2.0已淘汰；

-------------------------------------------

slot:

位置，槽口
占位置，当组件里面有一些特定的布局不想被覆盖时，用slot占位置
<ul slot="ul-slot"><li>sdfsd</li></ul>
<slot name='ul-slot'></slot>

--------------------------------------------

vue-router 1.0

单页面应用，路由
根据不同的url地址，出现不同的效果

v-link="{path:'/home'}" v-link指令 跳转链接
坑 <router-view>展示内容</router-view>

//1.准备一个根组件

var App=Vue.extend();

//2.Home News组件
var Home=Vue.extend({
template:‘我是主页’;

});

//3.准备路由：
var router=new VueRouter();

//4.关联
router.map({
'home':{component:Home},
'news':{component:News}
})

//5.启动路由
router.start(App,'#box')

//6.跳转：
router.redirect({
'/aaa':'/home'

})

----------------------------------

嵌套路由（多层路由）：

默认增加：class="v-link-active"
可以增加active时的样式
子组件 subRoutes:{

}
'home':{
component:Home,
subRoutes:{
'login':{
component:{
template:'<strong>我是登录信息</strong>'
}
},
'reg':{
component:{
template:'<strong>我是注册信息</strong>'
}
}
}
},

----------------------------------------

路由的其他信息:

[object Object] 对象 用json过滤

/detail/:id/age/:age :冒号用来标志当前参数
{{$route.parmas |json}} --->parmas得到当前参数的值，有几个得到几个
$route.parmas 当前参数
$route.path 当前路径
{{$route.query |json}} 当前路由的数据

---------------------------------------------
vue-loader:
style-loader
css-loader
url-loader
html-loader

后台： nodejs -->require exports
broserify 模块加载器，只能加载js
webpack 模块加载器,最后打包到一起

vue-loader 基于webpack

.vue文件:
放置vue组件的代码：
<template>
html
</template>
<style>
css
</style>
<script>
js es6
</script>

babel-loader 把es6代码编译成es5代码
-----------------------------------------
webpack.config.js webpack的配置文件
main.js 入口文件
index.html
App.vue vue文件 官方推荐A大写
package.json 工程文件（项目依赖，名称，配置）
npm init --yes

----------------------------

ES6:模块化开发

导出模块：
export default {}
引入模块
import 模块 from 地址

-------------------------------------
npm install webpack --save-dev
不仅下载到本地，而且添加到package.json中的devdependices中
npm install webpack-dev-server --save-dev

webpack-dev-server --inline --hot --port 8082
热加载，不刷新
cnpm install vue-loader@8.5.4 --save-dev

errnoExceprion
EADDRINUSE 端口被占用

cnpm install vue-html-loader --save-dev
clear
css-loader vue-style-loader
vue-hot-reload-api 验证代码中的错误
exclude:/node_modules/

babel:{
presets:['es2015'],
plugins:['transform-runtime']

}
用babel编译所需的loader（es6语法所需）
babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime

-------------------------------------
最核心:
cnpm install vue@1.0.28 --save

------------------------------

运行：

1.cmpm install
2.npm run dev
package.json
"script":{"dev":--------------}

<style scope>局部的style

"build":"webpack -p" 打包并压缩

上线：npm run build

--------------------------------------

脚手架：

vue-cli----vue 脚手架
vue已经提供好了基本项目结构

本身集成了很多项目模板：
simple
webpack
(多) ESlint 检查代码规范，统一代码风格
(多) 单元测试
webpack-simple

browserify
browserify-simple

-------------------------------------

基本使用：

1.npm install vue-cli -g 安装vue命令环境
veu -v
2. vue init <模板名> 文件夹名 生成项目模板
3.进入生成目录
npm install
npm run dev
cls
------------------------------------
vue init webpack-simple#1.0 vue-webpack-simple-demo
在vue中不建议直接改，存一下再改，因为vue要通知视图；

-----------------------------------------

vue 2.0

2.0之后的变化:
1.在每个组件模板中，不支持片段代码：
关于组件模板，必须有根元素包裹组件的代码；

2.关于组件的定义:

1) Vue.extend 可以用，废弃
2) Vue.conponent(组件名称，{ 也可以用不推荐
data(){},
methods:{},
template:
})
3) var Home={ //2.0
template:""
}

3. 生命周期

2.0
beforeCreate 组件实例刚刚被创建，属性都还没有
Created 实例已经创建完成，属性已绑定，Dom没有绑定
beforeMount 模板编译之前，
mounted 模板编译完成 代替之前compiled和ready
beforeUpdate 组件数据更新之前
updata 组件数据更新完毕
beforeDestroy 组件销毁之前、

destroyed

4.循环

2.0里面默认可以添加重复的数据
在2.0去掉了一些隐士的变量
v-for="(val,index) in list"
arr.forEach(function(val,index){})

5.track-by="id"

变成
<li v-for="(val,index) in list" :key="index">
---------------------------------------------

6.自定义键盘指令

Vue.config.keyCodes.ctrl=17;

7.过滤器：

之前系统自带很多过滤器
2.0所有内置的过滤器全部删除
lodash 工具库
在2.0中json是直接转的

8自定义过滤器;

一小点变化，传参用（）
Vue.filter("过滤器名"，function(){})

-------------------------------------------

9.关于组件的通信

vm.$emit();
vm.$on();
子组件已经不允许给 父组件直接更改数据了
a) 父组件每次传一个对象给子组件，对象之间引用
b) 子组件先定义一个空的对象的变量，来接收从父组件传过来的值如b:''，
然后在子组件中在mounted()中转一下，用this.b=this.msg;
然后添加事件改变时只改变this.b的内容，父组件的msg不受影响
------------------------------------------

可以单一事件管理组件通信 vuex

var Event= vew Vue();
Event.$emit(事件名称，数据)

Event.$on(事件名称，function(data){

}.bind(this))

-------------------------------------------
debounce 废弃
---》lodash 用
_.debounce(fn,time)

---------------------------------------------

vue 动画

vue路由
transition 之前属性
到了 2.0之后，transition组件

<transition name="fade" @before-enter="beforeEnter">

函数方法：
@before-enter="beforeEnter" 进入动画enter之前
@enter=“enter” 动画enter进入
@afterEnter="afterEnter" 动画进入之后
@before-leave="beforeLeave" 动画leave之前
@leave="leave" 动画leave
@after-leave="afterLeave" 动画leave离开之前

每个方法都有自己的el，属于自己的！！！
methods:{
beforeEnter(el){
console.log('动画enter之前');
el:这里的el是代表元素本身
}
}
运动的东西（元素，属性，路由）
</transition>
class定义：
.fade-enter {} //初始状态
.fade-enter-active{} //当元素出来变化成什么样
.fade-leave{}
.fade-leave-active {} 当元素消失变成什么样

-------------------------------------------------】

配合animate.css使用；

<transition enter-active-class="bounceInLeft/zoomInleft"
leave-active-class="bounceOutRight zoomOutRight">
<p v-show="show" class="animated"></p>
加了对应的类之后必须调用class="animated"才能生效
或者直接在leave-active-class和enter-active-class中加animated;
</transition>

-----------------------------------------------------
多个元素：transition-group 并且用唯一的标志 :key=""
key里面的值一般是循环出来的
<transition-group>
<p :key="1"></p>

<p :key="2"></p>

</transition-group>

----------------------------------------------

vue2.0 路由：
https://router.vuejs.org/zh-cn/index.html
1.<router-link to="/home">主页</router-link>
2.展示还是<router-view></router-view>
3.配置路由
4.生成路由实例
5.挂到vue上

重定向： {path:'*',redirect:'/home'}

.router-link-active{} 路由激活时的状态
------------------------------------------------

嵌套路由：children:{path:'',component:}

var User ={
template:`<div> //必须有根标签
<ul>
<li><router-link to="/user/blue/age/10"></router-link></li>
<li><router-link to="/user/red/age/60"></router-link></li>
<li><router-link to="/user/eric/age/90"></router-link></li>
</ul>
</div>

`

}
$route.parmas依然存在
children:[
{path:':username/age/:age',component:UserDetail}

]
:age
:username
获取路由的用户名和age

----------------------------------------------
挂载到vue上，这种写法可以替代el,
new Vue({
router

}).$mount("#box")

路由实例添加的方法
router.push({path:'home'}) //直接添加一个路由
本质是往历史记录里添加一条信息
router.replace({path:'news'}) 替换一个路由,不会往历史记录车里面添加

----------------------------------------------
new Vue({
el:'#app'
render:c =>c(App)
})

-------------------------------------------
import routerConfig from './router.config.js';
new Vue({
router,
el:"#app",
render:c =>c(App)

})

<style less></style>
----------------------------------------------
vue-loader和vue-router 配合

----------------------------------------------
webpack中的配置文件顺序不对的话会引发bug
{
test:/\.css$/ ,
loader:'style!css' //顺序不能反
}

-------------------------------------------

mint-ui 使用

GitHub：https://github.com/ElemeFE/mint-ui
https://github.com/itstrive/striveCode/tree/js/vue2.0-Mint-ui-demo http://mint-ui.github.io/docs/#!/zh-cn2

项目主页：http://mint-ui.github.io/#!/zh-cn

Demo：http://elemefe.github.io/mint-ui/#!/

文档：http://mint-ui.github.io/docs/#!/zh-cn

cnpm install mint-ui -D

------------------------------------------------
bootstrap twitter 开源的自适应的组件
基于jquery的，使用前先引

栅格化系统——响应式工具===》移动+pc+pad
-----------------------
饿了么：开源的基于vue的组件库
elementui pc端
MintUi 移动端

bower 前端包管理工具
npm node包管理工具

---------------------

引包可以通过

1.在index.html中引入(任何ui都可以这种方式)
2.也可通过模块引到main.js里面，最终打包到build里面，包会变得大
引入 main.js 入口文件，全局引入，任地方都能用

Vue.js UI框架 - element

文档：http://element.eleme.io/#/zh-CN/component/installation

安装：

npm i element-ui -D
配置：
http://element.eleme.io/#/zh-CN/component/quickstart {
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
},

引入：

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

------------------------------------------

elementui

npm install element-ui -D

-D --save-dev
-S --save
css-loader 引入css
字体图标 file-loader
style-loader
<style scoped lang="less">
less有两个loader
less和less-loader

@color:red;
.height(@h){
height:@h;
}
.my-grid{
.height(30px);
border:1px solid @clor;
}
--------------------------------------------------

也可按需引入：

就需要按钮
1.babel-plugin-component 需要引入这个组件
cnpm install babel-plugin-component -D
需要配置，只要跟babel相关的都需要配置

2.在.babelrc里面配置：

{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]]
}
3.如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：
引入：
import Vue from 'vue'
import { Button, Select } from 'element-ui'
import App from './App.vue'
使用：
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/

-----------------------------------------------