官网:http://cn.vuejs.org/
与angular类似的一个MVVM框架。
与DOM的行为驱动不同、vue以及angular是以数据作为驱动操作页面变化。
-
基本格式
以json的形式、将数据(支持所有格式)挂载在vue的data上、方法挂载在vue的methods上。
new Vue({
el:'#box',
//数据
data:{
key:'welcome vue',
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
}
//方法
methods:{
add:function(){
//push 添加元素
this.arr.push('tomato');
}
}
//计算属性
computed:{
//默认为get方法
b:function(){
//业务逻辑代码
return 2;
}
//内部可以实现set、get两个方法
c:{
get:function(){
return this.a+2;
},
set:function(val){
this.a=val-2;
}
}
},
components:{ //局部组件---详见组件
'my-aaa':Aaa
}
});
//钩子函数(生命周期)
created:function(){
alert('实例已经创建');
}
//自定义过滤器
Vue.filter('toDou',function(val,a,b){
return val<10?'0'+val:''+val;
});
//自定义指令
Vue.directive('red',function(){
this.el.style.background='red';
});
-
常用指令
双向数据绑定v-model:"key"
<input type="text" v-model="key">
将{key:value}于input双向绑定。
改动时其余部分的{{key}}也会随之替换。
循环v-for
<li v-for="value in arr">
{{value}}
</li>
value为内容、$index为索引、$key为字典(json)独有。
//针对json格式的数据还有以下写法
<li v-for="(k,v) in json">
{{k}} {{v}}
</li>
k为key、v为value
重复数据有事不予展示:track-by="$index/uid"添加索引
<li v-for="(k,v) in json" track-by="$index">
{{k}} {{v}}
</li>
显示隐藏v-show
data:{ //数据
a:true
}
<input type="button" value="按钮" v-on:click="a=false">
<div style="width:100px; height:100px; background: red" v-show="a">
v-show:true/false
false显示
条件渲染v-if
<div id="app" >
<p v-if='ture'>{{message}}</p>
</div>
v-if:true/false
true显示
区别
v-if是真实的条件渲染、当进行条件切换时、它会销毁和重建条件块的内容,并且它支持<template>语法
v-show的条件切换时基于css的display属、所以不会销毁和重建条件块的内容当你频繁需要切换条件时,推荐使用v-show;否则使用v-if;
v-else
v-else必须与v-show/v-if连用
当其处在非渲染状态下执行v-else中的代码块
事件绑定v-on:
<input type="button" value="按钮" v-on:click="show()">
click可以换成任意事件
v-on:click与@click等价
-
自定义指令:directive
声明为red、调用时调用v-red
- 无参数
v-red
Vue.directive('red',function(){
//此处的this.el与vm.$el为同一个DOM元素。但是写法不同需要区分
this.el.style.background='red';
});- 有参数
v-changeColor="'blue'"/"myColor"
Vue.directive('changeColor',function(color){
this.el.style.background=color;
});- 元素指令
Vue.elementDirective('zns-red',{
bind:function(){
this.el.style.background='red';
}
});
<div id="box">
<zns-red></zns-red>
</div>
-
事件对象
<input type="button" value="按钮" @click="show($event)">
$event结构体内部与原生相同
-
阻止事件冒泡
a).方法内部: ev.cancelBubble=true; (原生js)
b).@click.stop (vue功能)
-
阻止默认行为
a). ev.preventDefault(); (原生js)
b). @contextmenu.prevent (vue功能)//contextmenu为右键点击
-
键盘事件
- 默认
@keydown ------ $event ev.keyCode
@keyup
回车 (a). @keyup.13(b). @keyup.enter- 自定义键盘事件
Vue.directive('on').keyCodes.ctrl=17;
Vue.directive('on').keyCodes.myenter=13;
<input type="text" @keydown.myenter="show">
-
属性
普通属性
<im src="{{url}}" alt=""> 数据双向绑定,但是会报一个404错误
<im v-bind:src="url" alt="">属性绑定,不会发404请求
v-bind:src="url"可以简写成:src="url"class
1、
:class="[red]" red是数据 :class="[red,b,c,d]"
2、
:class="{red:a, blue:false}" a=true
3、
:class="json"
data:{
json:{red:true, blue:false}
}style
:style="json" backgroundColor:'gray' //复合样式,采用驼峰命名法
-
模板
{{msg}}----数据更新模板变化
{{*msg}}----数据只绑定一次
{{{msg}}}----HTML转意输出(< h3>aaa</ h3>)
-
过滤器
过去模板中的内容并加以改变
{{msg| filterA}}
{{msg| filterA | filterB}}
uppercase --- 大写
lowercase --- 小写
capitalize --- 首字母大写
currency --- 美元符号
currency "人民币:" --- 自定义参数
debounce 2000--- 配合事件,延迟执行
- 数组配合使用过滤器:
limitBy 取几个/取几个 从哪开始
filterBy'关键词' 过滤数据
orderBy 排序
json 展示json全部数据
1 -> 正序
-1 -> 倒序- 自定义过滤器
Vue.filter('toDou',function(val,a,b){
return val<10?'0'+val:''+val;
});
{{a | toDou 1 2}}
-
禁止{{花括号}}显示
- v-cloak
<style>
[v-cloak]{
display:none;
}
</style>
<div v-cloak> </div>- v-text:直接输出
<span v-text="msg"></span>- v-html:转译输出
<span v-html="msg"></span>
-
交互
get
- 获取普通文本数据
this.$http.get('a.txt').then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
- 给服务发送数据
this.$http.get('url',paramsDic).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
post
this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
jsonp
jsonp采用的get方式
this.$http.jsonp(''https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su'',{
word:'a'
},{
//callback名字,默认名字就是"callback"
jsonp:'cb'
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
简写
this.$http({
url:地址
data:给后台提交数据,
//method默认为get
method:'get'/'post'/'jsonp'
//如果method改为jsonp、需要声明cbName
jsonp:'cb' //cbName
}).then(function(res){
//成功
},function(res){
// 失败
});
-
生命周期(钩子函数)
1.0
created -> 实例已经创建
beforeCompile -> 编译之前
compiled -> 编译之后
ready -> 插入到文档中 √
beforeDestroy -> 销毁之前
destroyed -> 销毁之后2.0
beforeCreate ->实例初始化之后。
created -> 实例已经创建。
beforeMount -> 编译之前
mounted -> 编译之后 √
activated -> keep-alive 组件激活时调用。
deactivated -> keep-alive 组件销毁时调用。
beforeUpdate -> 数据更新之前
update -> 数据更新之后
beforeDestroy -> 销毁之前
destroyed -> 销毁之后通常在√时、vue.js已可以使用
created:function(){
alert('实例已经创建');
}
-
计算属性:computed
computed:{
//默认为get方法
b:function(){
//业务逻辑代码
return 2;
}
//内部可以实现set、get两个方法
c:{
get:function(){
return this.a+2;
},
set:function(val){
this.a=val-2;
}
}
}
{{b}}
计算属性必须有返回值
-
vue实例简单方法
vm.$el -> 获取元素
vm.$el.style.background='red';>vm.$data -> 获取data数据对象
console.log(vm.$data.a);vm.$mount -> 手动挂载vue程序
vm.$mount('#box');
vm.$options -> 获取自定义属性
vm.$options.customMethods.show();vm.$destroy -> 销毁对象
vm.$destroyvm.$log(); -> 查看现在数据的状态
vm.$watch ->监听数据变化
浅度监听
vm.$watch('a',function(){
this.b=this.a+100;
});深度监听
vm.$watch('json',function(){
alert('发生变化了');
},{deep:true});
-
过渡(动画)
<div id="div1" class="animated" v-show="bSign" transition="fade"></div>
自定义动画
<style>
//动画总体设置
.fade-transition{
transition: 1s all ease;
}
//动画进入
.fade-enter{
opacity: 0;
}
//动画移出
.fade-leave{
opacity: 0;
transform: translateX(200px);
}
</style>
利用animate.css实现动画
下载https://daneden.github.io/animate.css/
<div id="div1" class="animated" v-show="bSign" transition="bounce"></div>
//需要做动画的控件需要一个专属className:animated
vue中
transitions:{ //定义所有动画名称(具体样式可以去animate.css官网查看)
bounce:{
//进入
enterClass:'zoomInLeft',
//离开
leaveClass:'zoomOutRight'
}
}
-
组件
注册组件
var Aaa=Vue.extend({
//直接显示
template:"<h3 @click='change'>我是标题3</h3>",
//显示数据
//****data必须是函数的形式,函数必须返回一个对象(json)
data(){
return {
msg:'数据MSG'
}
},
//添加方法
methods:{
change(){
this.msg="changed";
}
}
});
全局组件
//参数1组件名、参数2组件对象
Vue.component('aaa',Aaa);
局部组件
//在vue中 components:{ //局部组件
'aaa':Aaa
}
html中均使用<aaa></aaa>即可
模板使用
template:'#aaa'
配合js
<script type="x-template" id="aaa">
<h2 @click="change">标题2->{{msg}}</h2>
</script>
配合template-------推荐
<template id="aaa">
<h1>标题1</h1>
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</template>
动态组件
data:{//html中 :is="组件名称" <component :is="a"></component> //vue中
a:'aaa'
},
components:{
'aaa':{
template:'<h2>我是aaa组件</h2>'
},
'bbb':{
template:'<h2>我是bbb组件</h2>'
}
}组件查看工具
vue-devtools
父子组件
在父级控件中继续声明components即可
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'<h2>我是aaa组件</h2><bbb></bbb>',
components:{
'bbb':{
template:'<h3>我是bbb组件</h3>'
}
}
}
}
});数据传递:
默认情况下,vue子组件没法访问父组件数据
- 子级获取父级数据:
//父组件中---绑定子组件属性
//.sync可以让组件属性跟随子组件而同步
<bbb :m="msg2" :my-msg.sync="msg"></bbb>
//子组件中---在props中声明属性
props:['m','myMsg']
props:{
'm':String,
'myMsg':Number
}
- 父级获取子级数据:3步
//子级方法中发数据记给父级
this.$emit('child-msg',数据);
//子控件标签中绑定数据名与方法
<bbb @child-msg="get"></bbb>
//父组件中声明方法
get(msg){
this.msg=msg;
}slot:组件占位标签(槽口)
<aaa>
<ul slot="ul-slot">
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
<ol slot="ol-slot">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
</aaa>
<hr>
<aaa>
</aaa>
<template id="aaa">
<h1>xxxx</h1>
//上面的“ol-slot”会出现在此处
<slot name="ol-slot">这是默认的情况</slot>
<p>welcome vue</p>
//上面的“ul-slot”会出现在此处
<slot name="ul-slot">这是默认的情况2</slot>
</template>
-
node.js
https://nodejs.org/en/#download
安装后可以使用npm命令
版本号用@----例:
npm install vue-router@0.7.13
-
bower
Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。其他一些建立在Bower基础之上的开发工具,如YeoMan和Grunt,这个会在以后的文章中介绍。
npm install -g bower
bower info vue //查看vue版本
-
vue-router:路由
SPA单网页应用
https://unpkg.com/vue-router@2.0.0/dist/vue-router.js
<a v-link="{path:'/home'}">主页</a>
<a v-link="{path:'/news'}">新闻</a>
//路由组件展示位置
<router-view></router-view>
//1. 准备一个根组件
var App=Vue.extend();
//2. Home News组件都准备
var Home=Vue.extend({
template:'<h3>我是主页</h3>'
});
var News=Vue.extend({
template:'<h3>我是新闻</h3>'
});
//3. 准备路由
var router=new VueRouter();
//4. 关联
router.map({
'home':{
component:Home
},
'news':{
component:News
}
});
//5. 启动路由
router.start(App,'#box');
//6. 跳转
router.redirect({
'/':'/home'
});
点击的v-line按钮会添加class="v-link-active"
多级路由(路由的嵌套)
<a v-link="{path:'/home/login'}">登录</a>
<a v-link="{path:'/home/reg'}">注册</a>
//在'home'中
subRoutes:{
'login':{
component:{
template:'<strong>我是登录信息</strong>'
}
},
'reg':{
component:{
template:'<strong>我是注册信息</strong>'
}
}
}
路由的其他信息
<a v-link="{path:'/news/detail/001?a=1&b=2'}">新闻001</a>
<a v-link="{path:'/news/detail/002'}">新闻002</a>
subRoutes:{ //'/:id'为可变参数:::detail/002
'/detail/:id':{
component:Detail
}
}
<template id="detail"> //参数信息
{{$route.params | json}}
<br>
//路由地址:::/news/detail/001?a=1&b=2
{{$route.path}}
<br>
//数据:::a=1&b=2
{{$route.query | json}}
</template>
-
vue.loader:模块开发
类似css-loader、style-loader、url-loader、html-loader...
简单的目录结构:
|-index.html
main.js ||-入口文件
import Vue from 'vue'
import App from './App.vue'
new Vue({
el:'body',
components:{
app:App
}
});
|-App.vue vue文件,官方推荐命名法
package.json ||-工程文件(项目依赖、名称、配置)
npm init --yes 生成 "scripts": {
//工程
"dev": "webpack-dev-server --inline --hot --port 8082"
},
webpack.config.js ||-webpack配置文件(关键)
module.exports={
//入口文件
entry:'./main.js',
//出口文件
output:{
//当前路径
path:__dirname,
//打包结束的名字叫build.js
filename:'build.js'
},
module:{
loaders:[
//以.vue结尾的文件用vue.loader
{test:/\.vue$/, loader:'vue'},
//除node_modules的.js之外全部检查转换
{test:/\.js$/, loader:'babel', exclude:/node_modules/}
]
},
babel:{
presets:['es2015'],
//实时刷新插件
plugins:['transform-runtime']
}
};
webpack准备工作
下载webpack以及webpack-dev-server(带服务器版本)
npm install webpack webpack-dev-server --save-dev
下载vue.loader
App.vue -> 变成正常代码
npm install vue-loader@8.5.4 --save-dev
下载vue-html-loader
编译.vue中<template>
cnpm install vue-html-loader --save-dev
下载css-loader以及vue-style-loader --save-dev
npm install css-loader vue-style-loader
下载vue-hot-reload-api@1.3.2
npm install vue-hot-reload-api@1.3.2 --save-dev
下载babel以及准备工作
- babel必要插件(用来转译ES6语法)
//依旧是npm install xxxxx(可以连写)
babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime
如何运行
1. npm install
2. npm run dev --- ('dev'为在package.json中配置的名称)
-
vue-cli:vue脚手架
简要:
帮你提供好基本项目结构
本身集成很多项目模板:
simple -> 不太常用
webpack :可以使用(大型项目)、Eslint 检查代码规范、单元测试
webpack-simple 推荐使用, 没有代码检查 √
browserify -> 不太常用
browserify-simple -> 不太常用
基本使用流程:
1.安装vue命令环境
npm install vue-cli -g 安装 vue命令环境
验证安装ok?
vue --version
2.生成项目模板
vue init <模板名> 本地文件夹名称
3. 进入到生成目录里面
cd xxx
npm install
4.运行:
npm run dev