二八、vue2与vue1的区别(三)
26.vue2.0与vue1的区别在每个组件模板,不在支持片段代码 组件中模板:之前:template>我是组件我是加粗标签template>现在:必须有根元素,包裹住所有的代码template id="aaa">div>我是组件
26.vue2.0与vue1的区别
-
- 在每个组件模板,不在支持片段代码 组件中模板:
之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </template> 现在: 必须有根元素,包裹住所有的代码 <template id="aaa"> <div> <h3>我是组件</h3> <strong>我是加粗标签</strong> </div> </template> <script> Vue.component('aaa',{ template:'#aaa' }); </script>
- 在每个组件模板,不在支持片段代码 组件中模板:
-
-
关于组件定义 Vue.extend 这种方式,在2.0里面有,但是有一些改动,这种写法,即使能用,咱也不用——废弃
Vue.component(组件名称,{ 在2.0继续能用
data(){} methods:{} template:
});
2.0推出一个组件,简洁定义方式: 也可以在外面定义
var info={ template:'#my-info' }; Vue.component('my-info',info);
-
-
- 生命周期 之前:
现在:init created beforeCompile compiled ready √ -> mounted beforeDestroy destroyed
beforeCreate 组件实例刚刚被创建,属性都没有 created 实例已经创建完成,属性已经绑定 beforeMount 模板编译之前 mounted 模板编译之后,代替之前ready * beforeUpdate 组件更新之前 updated 组件更新完毕 * beforeDestroy 组件销毁前 destroyed 组件销毁后
- 生命周期 之前:
-
-
循环 2.0里面默认就可以添加重复数据
arr.forEach(function(item,index){
});
去掉了隐式一些变量
$index $key
之前:
v-for="(index,val) in array"
现在:
v-for="(val,index) in array"
-
-
- track-by="id"
变成 //可以重复添加相同的数据
- track-by="id"
-
- 自定义键盘指令 之前:Vue.directive('on').keyCodes.ctrl=17;
现在: Vue.config.keyCodes.ctrl=17 //用config装一些自己定义的内容;
- 自定义键盘指令 之前:Vue.directive('on').keyCodes.ctrl=17;
-
-
过滤器 之前: 系统就自带很多过滤 {{msg | currency}} {{msg | json}} //json已经变成默认输出; .... limitBy filterBy ..... 一些简单功能,自己通过js实现 到了2.0, 内置过滤器,全部删除了 lodash 工具库 _.debounce(fn,200) 自定义过滤器——还有
Vue.filter('toDou',function(n){ //alert(input); return n<10?'0'+n:''+n; });
但是,自定义过滤器传参
之前: {{msg | toDou '12' '5'}} 现在: {{msg | toDou('12','5')}}
-
27.组件通信:
-
vm.$emit()
vm.$on(); 父组件和子组件: 子组件想要拿到父组件数据: 通过 props 之前,子组件可以更改父组件信息,可以是同步 sync 现在,不允许直接给父级的数据,做赋值操作 问题,就想更改: a). 父组件每次传一个对象给子组件, 对象之间引用 √ b). 只是不报错, mounted中转
可以单一事件管理组件通信: vuex var Event=new Vue();
Event.$emit(事件名称, 数据)
Event.$on(事件名称,function(data){
//data
}.bind(this));
debounce 废弃
-> lodash _.debounce(fn,时间)
28.vue2动画
-
2.0以后 transition 组件
运动东西(元素,属性、路由....)class定义: .fade-enter{} //初始状态 .fade-enter-active{} //变化成什么样 -> 当元素出来(显示)
.fade-leave{} .fade-leave-active{} //变成成什么样 -> 当元素离开(消失)
+ beforeEnter(el){ console.log('动画enter之前'); }, enter(el){ console.log('动画enter进入'); }, afterEnter(el){ console.log('动画进入之后'); el.style.background='blue'; }, beforeLeave(el){ console.log('动画leave之前'); }, leave(el){ console.log('动画leave'); }, afterLeave(el){ console.log('动画leave之后'); el.style.background='red'; } + <transition name="fade" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave"> <p v-show="show"></p> </transition>
如何animate.css配合用?
<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight"> // <p v-show="show"></p> // <p v-show="show" class='animated></p> </transition>
多个元素运动:
<transition-group enter-active-class="" leave-active-class=""> <p :key=""></p> <p :key=""></p> </transition-group>
29.vue2 路由
-
http://router.vuejs.org/zh-cn/index.html 基本使用:
-
布局 主页
-
路由具体写法 //组件 var Home={
template:'<h3>我是主页</h3>'
}; var News={
template:'<h3>我是新闻</h3>'
};
//配置路由 const routes=[
{path:'/home', component:Home}, {path:'/news', component:News},
];
//生成路由实例 const router=new VueRouter({
routes
});
//最后挂到vue上 new Vue({
router, el:'#box'
});
- 重定向 之前 router.rediect 废弃了 {path:'*', redirect:'/home'}
-
-
路由嵌套:
/user/username const routes=[ {path:'/home', component:Home}, { path:'/user', component:User, children:[ //核心 {path:'username', component:UserDetail} ] }, {path:'*', redirect:'/home'} //404 ]; + 路由实例方法: router.push({path:'home'}); //直接添加一个路由,表现切换路由,本质往历史记录里面添加一个 router.replace({path:'news'}) //替换路由,不会往历史记录里面添加 ------------------------------------------ vue-cli 1 vue init webpack-simple vueDemo 2 cd vueDemo 3 npm/cnpm install //出现错误重新 4 npm run dev (自动打开) 5 cnpm install vue-router --save (下载路由) ------------------------------------------ npm install ------------------------------------------ 脚手架: vue-loader 1.0 -> new Vue({ el: '#app', components:{App} }) 2.0-> new Vue({ el: '#app', render: h => h(App) }) ------------------------------------------ vue2.0 vue-loader和vue-router配合 ------------------------------------------ style-loader css-loader style!css
30.vue ui组件
- vue问题:论坛http://bbs.zhinengshe.com
-
UI组件
- bootstrap:twitter 开源
简洁、大方 官网文档 基于 jquery 栅格化系统+响应式工具 (移动端、pad、pc)
- bootstrap:twitter 开源
-
bower 前端包管理器 选择版本--jquery#1.11.1
自动解决依赖
- npm node包管理器 选择版本--jquery@1.11.1
-
饿了么团队开源一个基于vue 组件库
elementUI PC MintUI 移动端
-
elementUI:
如何使用
官网:http://element.eleme.io/ 使用:
-
安装 element-ui npm i element-ui -D
npm install element-ui --save-dev
// i -> install // D -> --save-dev // S -> --save
-
引入 main.js 入口文件 import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css'
全部引入
-
使用组件 Vue.use(ElementUI)
css-loader 引入css 字体图标 file-loader
less:
less less-loader
-
-
按需加载相应组件: √
就需要 按钮
- babel-plugin-component cnpm install babel-plugin-component -D
- .babelrc文件里面新增一个配置 "plugins": [["component", [
]]]{ "libraryName": "element-ui", "styleLibraryName": "theme-default" }
- 想用哪个组件就用哪个 引入:
使用:import {Button,Radio} from 'element-ui'
a). Vue.component(Button.name, Button); 个人不太喜欢 b). Vue.use(Button); √
-
发送请求:
vue-resourse 交互 axios
-
element-ui -> pc
mint-ui
移动端 ui库 http://mint-ui.github.io/
-
下载 npm install mint-ui -S
-S --save
-
引入 import Vue from 'vue'; import Mint from 'mint-ui'; import 'mint-ui/lib/style.css' Vue.use(Mint);
按需引入: import { Cell, Checklist } from 'minu-ui'; Vue.component(Cell.name, Cell); Vue.component(Checklist.name, Checklist);
http://mint-ui.github.io/docs/#!/zh-cn2 Mint-ui-demo: 看着手册走了一遍
https://github.com/itstrive/striveCode/tree/js/vue2.0-Mint-ui-demo
-
31.vuex --集中式管理数据
- 1、cnpm install vuex
- 2 提供两个方法:
- mapActions
- mapGetters:
32.其他
vue: 两种:
1. 直接页面级开发,script直接引入vue
2. 工程性开发 , webpack+loader\ vue-cli
webpack 配置多文件入口
webpack 打包完很大? bundle.js build.js a). webpack代码拆分: code-spliting b). 提取公共(css,js) c). 预渲染: prerender-spa-plugin d). 后台——开启压缩,gz e). 异步加载组件
require.ensure
vuex:
Vue 10月1 -> 2.0变的简单
vue
组件之间通信: vue1.0 -> props -> 子组件可以更改父组件数据 .sync 解决问题:
0. props
1. $emit 单一事件管理 Store.js
var Event=new Vue()
export default Event
2. 对象之间引用 √
msg:'welcome' -> 子级
msg:{
title:'welcome'
}
msg.title
3. vuex 管理状态
this.$el
src/ $http('../src/data/api.')
localhost:8080#/home
localhost:8080/home
main.js ->const router=new VueRouter({})
use
new App({
router
})
new Vuex.Store()
-> 构造函数(类) 首字母大写
vue init
webpack2.0-> 端口 8080 8081 8082 8083....
module:{ loaders:[ {test:/.css$/, loader:'style!css'} ] }
module:{ rules:[ {test:/.css$/, loader:'style-loader!css-loader'} ]
}
全家桶
axios——不能use
Vue.prototype.$http=axios;
this.$http.get
loading install
vue init webpack-simple
webpack
this -> new Vue()
this -> 原生jsDOM对象
vue中引入百度地图?
1. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"> -> 需要index.html
2. map.vue
template
<div id="div1" :style="style"></div>
script
export default{
data:(){
style:{
width:'100%',
height:this.height+'ox'
}
},
props:{
height:{
type:Number,
default:300
},
longitude:{},
latitude:{}
},
mounted(){
var map = new BMap.Map("div1");
var point = new BMap.Point(this.longitude,this.latitude);
map.centerAndZoom(point, 12);
var marker = new BMap.Marker(point);// 创建标注
map.addOverlay(marker);
}
}
----------------------------------
App.vue
template:
<MapView :height="300" :latitude=""></MapView>
import MapView
export default{
componets:{
MapView
}
mounted:
}
--------------------------------
vue: 指令 属性 事件 数据: data,props/computed
生命周期
http://bbs.zhinengshe.com
Vue2.0 -> React
json diff
package.json
cnpm install vue-resource -D
node_modules -> rm -rf
-g -> 命令环境用 webpack
更多推荐
所有评论(0)