vue
一片html代码配合上json,在new出来vue实例
Demo:1
数据双向绑定（v-model="message",{{message}}）
<div id="box">
<input type='text' v-model="message">
<p>{{message}}</p>
</div>
var c=new Vue({
el:'#box', //el为挂载点，可以是class,id,元素
data:{
message:'hello world!'
}
})
Demo:2
v-for
循环数组
<div id="box">
<ul>
<li v-for="arr in arrs">
{{arr}} {{$index}}
</li>
</ul>
</div>
var c=new Vue({
el:'#box',//class,id,元素度可以
data:{
arrs:['apple','banana','orange','pear'],
jsons:{a:'apple',b:'banner',c:'car'}
}
})
循环对象
1：
<div id="box">
<ul>
<li v-for="json in jsons">
{{json}} {{$index}} {{$key}}
</li>
</ul>
</div>
2：
<div id="box">
<ul>
<li v-for="(k,v) in jsons">
{{k}} {{v}} {{$index}}
</li>
</ul>
</div>
结果
Demo3：
v-on:(跟事件)click
methods 绑定事件方法
<div id="box">
<input type="button" value="按钮" v-on:click="add()">
<br/>
<ul>
<li v-for="arr in arrs">
{{arr}} {{$index}}
</li>
<li v-for="json in jsons">
{{json}} {{$index}} {{$key}}
</li>
</ul>
</div>
var c=new Vue({
el:'#box',//class,id,元素度可以
data:{
arrs:['apple','banana','orange','pear'],
jsons:{a:'apple',b:'banner',c:'car'}
},
methods:{
add:function(){
this.arrs.push('tomato');
}
}
})
Demo4
v-show true/false
<div id="box">
<input type="button" value="按钮" v-on:click="a=false">
<div style="100px;height:100px ;background:red" v-show="a">
</div>
</div>
var c=new Vue({
el:'#box',//class,id,元素度可以
data:{
a:true
}
})
v-show来控制显示隐藏
Demo5
简易留言板编写
<div class="container" id="box">
<form role="form">
<div class="form-group">
<label>用户名：</label>
<input type="text" id="username" class="form-control" placeholder="输入用户名" v-model="username">
</div>
<div class="form-group">
<label>年龄：</label>
<input type="text" id="username" class="form-control" placeholder="输入年龄" v-model="age">
</div>
<div class="form-group">
<input type="button" value="添加" class="btn btn-primary" v-on:click="add()">
<input type="reset" value="重置" class="btn btn-danger">
</div>
</form>
<hr/>
<table class="table">
<caption class="h2 text-info">用户信息表</caption>
<tr class="text-danger">
<th class="text-center">序号</th>
<th class="text-center">名字</th>
<th class="text-center">年龄</th>
<th class="text-center">操作</th>
</tr>
<tr class="text-center" v-for="item in myData">
<td>{{$index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=$index">删除</button>
</td>
</tr>
<tr v-show="myData.length!=0">
<td colspan="4" class="text-right">
<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=-2">删除全部</button>
</td>
</tr>
<tr v-show="myData.length==0">
<td colspan="4" class="text-center text-muted">
<p>暂无数据....</p>
</td>
</tr>
</table>
<!--弹出框-->
<div role="dialog" class="modal" id="layer" data-index="{{nowIndex}}">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 class="modal-title">确认删除么?</h4>
</div>
<div class="modal-body text-right">
<button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
<button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteMsg(nowIndex)">确认</button>
</div>
</div>
</div>
</div>
</div>
vue
var c=new Vue({
el:'#box',
data:{
myData:[],
username:'',
age:'',
nowIndex:-100
},
methods:{
add:function(){
this.myData.push({
name:this.username,
age:this.age
});
this.username='';
this.age='';
},
deleteMsg:function(n){
if(n==-2){
this.myData=[];
}
this.myData.splice(n,1);
}
}
})
、******************************************************************************
列：颜色切换
<style>.red{color:'red'} .blue:{color:'blue'}</style>
<strong :class="{red:a,blue:b}" @click="changeColor"></strong>
new Vue({
el:'#app",
data:{
a:true,
b:false
},
methods:{
changeColor:function(){
this.a=!this.a,
this.b=!this.b
}
}
})
列jsonp传递
<div id="box">
<input type="text" v-model="t1" @keyup="get()">
<ul>
<li v-for="value in myData">
{{value}}
</li>
</ul>
<p v-show="myData.length==0">暂无数据...</p>
</div>
new Vue({
el:'body',
data:{
myData:[],
t1:''
},
methods:{
get:function(){
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
{
wd:this.t1
},{
jsonp:'cb'
}).then(function(res){
this.myData=res.data.s;
},function(){
});
}
}
});
、***************************************************************************
二事件深入
v-on:click 简写 @click
事件对象：
@click="show($event)"
阻止冒泡
ev.cancleBubble=true
@click.stop
阻止默认事件
.prevent
常用回车键
@keyup.enter
上下左右
@keyup/keydown.left
三属性
v-bind:src=""
v-bind:src 简写:src
<div id="box">
<img v-bind:src="url" alt="">
</div>
var c=new Vue({
el:'#box',
data:{
url:'https://www.baidu.com/img/bd_logo1.png',
}
});
1、:class="[red]"
2、:class="{red:true}"
3、:class="json"
data:{
json:{red:a,blue:false}
}
style
:style="[c]"
模板
{{msg}} 数据更新模板化
{{msg}} 数据更新模板变化
{{*msg}} 数据只绑定一次
{{{msg}}} html任意输出
过滤器
{{msg|filterA}}
{{msg|filterA|filterB}}
uppercase
lowercase
capitalize
{{12 | curreny}} $12
{{12 | curreny '￥'}} $12
第二个参数是修改
四交互 v-resource
get
请求文本
new Vue({
el:'#box',
data:{},
methods:{
get:function(){
this.$http.get('a.txt').then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
}
}
})
给服务器发送请求
new Vue({
el:'#box',
data:{},
methods:{
get:function(){
this.$http.get('get.php',{
a:1,
b:20
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
}
}
})
post
var c=new Vue({
el:'#box',
data:{
},
methods:{
get:function(){
this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true //这个相当于post的头文件
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status)
});
}
}
});
jsonp
先获取接口
https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a
https://sug.so.360.cn/suggest?callback=suggest_so&word=a
var c=new Vue({
el:'#box',
data:{
},
methods:{
get:function(){
this.$http.jsonp('https://sug.so.360.cn/suggest',{
wd:'a'
},{
jsonp:'cb'
//这个相当于post的头文件
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status)
});
}
}
});
微博搭建
vue生存周期
v-cloak防止闪烁
<style>
[v-cloak]{
display:none;
}
</style>
<span>{{msg}}</span>
<span v-text="msg"></span>
<span>{{{}msg}}}</span>
<span v-html="msg"></span>
上面两种结果一样的，就是效果上后面这种自带闪烁
钩子函数
created -> 实例已经创建
beforeCompile ->编译之前
compiled ->编译之后
ready -> 加载完成 插入到文档中
beforeDestroy ->销毁之前
destroyed ->销毁之后
var vm=new Vue({
el:'#box',
data:{
a:1
},
computed:{
b:{
get:function(){//默认写法
return this.a+2;
},
set:function(val){//当赋值是
this.a=val;
}
}
}
});
vm.$el ->就是元素el
vm.$data ->就是data
vm.$mount('#box') //手动挂载
vm.$options ->获取自定义属性
vm.$detroy ->销毁对象
遇到循环的数据，你想要展示，最好在html中加入
track-by="$index"
var vm=new Vue({
aa:11, //自定义属性
data:{
a:1
}
}).$mount('#box');
vm.$options.aa //就可以访问了
过滤器
| debounce 2000 延迟
数据配合使用过滤器
limitBy 参数（取几个） 从哪开始
filterBy 过滤
orderBy 排序
自定义过滤器
Vue.filter(name,function(){
alert();
})
<div id="box">
{{a|toDou}}
</div>
Vue.filter('toDou',function(input){
return input<10?'0'+input:''+input;
})
var vm=new Vue({
el:'#box',
data:{
a:9
}
});
过滤html标记
自定义指令
Vue.directive(指令名称，function(){
})
指令名称 v-red 只能写red
指令必须以v-开头
自定义元素指令
Vue.elementDirective('zns-red',{
bind:function(){
this.el.style.background='red';
}
});
<zns-red></zn-sred>
监听数据变化
vm.$watch()
vm.$watch('a',function(){
alert('发生变化');
});
五、bower包管理器
在指定文件打开cmd
npm install bower -g
bower install vue
他会给你安装最新的，如果不想要可以删除bower uninstall vue
bower install vue#版本号（1.0.28）
bower info vue 可以查看版本信息
vue 过渡（动画）
本质走的css3:transition,animation
<div id="div1" v-show="bSign" transition="fade"></div>
动画:
.fade-transition{
}
进入：
.fade-enter{
opacity: 0;
}
离开：
.fade-leave{
opacity: 0;
transform: translateX(200px);
}
列：
<div id="box">
<input type="button" value="按钮" @click="toggle">
<div id="div1" class="animated" v-show="bSign" transition="bounce"></div>
</div>
var c=new Vue({
el:'#box',
data:{
bSign:true
},
methods:{
toggle:function(){
this.bSign=!this.bSign;
}
},
transitions:{//定义动画
bounce:{
enterClass:'zoomInLeft',
leaveClass:'zoomOutRight'
}
}
})
组件
组件: 一个大对象
定义一个组件:
1. 全局组件
var Aaa=Vue.extend({
template:'<h3>我是标题3</h3>'
});
Vue.component('aaa',Aaa);
*组件里面放数据:
data必须是函数的形式，函数必须返回一个对象(json)
2,局部组件
2. 局部组件
放到某个组件内部
var Aaa=Vue.extend({
template:'<h3>{{msg}}</h3>'
data:function(){
return {
msg:'我是标题'
}
},
});
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //局部组件
aaa:Aaa
}
});
另一种编写方式:
Vue.component('my-aaa',{
template:'<strong>好</strong>'
});
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
data:function(){
return{
msg:'2222'
}
},
methods:{
},
template:'<h2>{{msg}}</h2>'
}
}
});
配合模板:
1. template:'<h2 @click="change">标题2->{{msg}}</h2>'
2. 单独放到某个地方
a). <script type="x-template" id="aaa">
<h2 @click="change">标题2->{{msg}}</h2>
</script>
b). <template id="aaa">
<h1>标题1</h1>
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</template>
多个组件切换 动态组件
<div id="box">
<input type="button" @click="a='aaa'" value="aaa组件">
<input type="button" @click="a='bbb'" value="bbb组件">
<component :is="a"></component>
</div>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'<h2>我是aaa组件</h2>'
},
'bbb':{
template:'<h2>我是bbb组件</h2>'
}
}
});
vue-devtools ->调试工具
组件数据传递: √
1. 子组件就想获取父组件data
在调用子组件：
<bbb :m="数据"></bbb>
子组件之内:
props:['m','myMsg']
props:{
'm':String,
'myMsg':Number
}
2. 父级获取子级数据
*子组件把自己的数据，发送到父级
vm.$emit(事件名,数据);
v-on: @
slot位置、槽口
重点
vue->SPA应用，单页面应用
v-resource 交互
v-router 路由 0.7.13
主页 home
新闻页 news
html:
<a v-link="{path:'/home'}">主页</a> 跳转链接
展示内容:
<router-view></router-view>
<div id="box">
<ul>
<li>
<a v-link="{path:'/home'}">主页</a>
</li>
<li>
<a v-link="{path:'/news'}">新闻</a>
</li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
<script>
//1,准备根组件
var App=Vue.extend();
//2准备Home和Neews组件
var Home=Vue.extend({
template:'<h3>我是Home</h3>'
})
var News=Vue.extend({
template:'<h3>我是News</h3>'
})
//3.准备路由
var router=new VueRouter();
//4.关联
router.map({
'home':{
component:Home
},
'news':{
component:News
}
})
//5启动路由
router.start(App,'#box');
//6跳转
router.redirect({
'/':'/home'
})
</script>
路由嵌套
<template id="home">
<h3>我是主页</h3>
<div>
<a v-link="{path:'/home/login'}">登录</a>
<a v-link="{path:'/home/reg'}">注册</a>
</div>
<div>
<router-view></router-view>
</div>
</template>
router.map({
'home':{
component:Home,
subRoutes:{
'login':{
component:{
template:'<strong>我是登录</strong>'
}
},
'reg':{
component:{
template:'<strong>我是注册</strong>'
}
}
}
},
'news':{
component:News
}
})
路由的其他信息
/detail/:id/age/:age
{{$route.params | json}} -> 当前参数
{{$route.path}} -> 当前路径
{{$route.query | json}} -> 数据
六 vue-loader
其他loader -> css-loader、url-loader、html-loader.....
nodejs ->require exports
broserify 模块加载，只能加载js
webpack 模块加载器，一切东西都是模块
require('style.css'); -> css-loader、style-loader
vue-loader基于webpack
.vue文件放置
放置的是vue组件代码
<template>
html
</template>
<style>
</style>
<script>
js
</script>
简单目录
index.html
main.js 入口文件
App.vue vue文件
package.json 工程文件（项目依赖、名称、配置）
npm init --yes 生成
webpack.config.js webpack的配置文件
ES6: 模块化开发
导出模块：
export default {}
引入模块:
import 模块名 from 地址
webpak准备工作:
cnpm install webpack --save-dev
cnpm install webpack-dev-server --save-dev
App.vue -> 变成正常代码 vue-loader@8.5.4
cnpm install vue-loader@8.5.4 --save-dev
cnpm install vue-html-loader --save-dev
vue-html-loader、css-loader、vue-style-loader、
vue-hot-reload-api@1.3.2
babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime
路由:
vue-router
-> 如何查看版本:
bower info vue-router
路由使用版本: 0.7.13
配合vue-loader使用:
1. 下载vue-router模块
cnpm install vue-router@0.7.13
2. import VueRouter from 'vue-router'
3. Vue.use(VueRouter); //
4. 配置路由
var router=new VueRouter();
router.map({
路由规则
})
5. 开启
router.start(App,'#app');
注意:
之前: index.html -> <app></app>
现在: index.html -> <div id="app"></div>
App.vue -> 需要一个 <div id="app"></div> 根元素
home news
---------------------------------------------
路由嵌套:
和之前一模一样
--------------------------------------------
上线:
npm run build
-> webpack -p
--------------------------------------------
脚手架:
vue-cli——vue脚手架
帮你提供好基本项目结构
本身集成很多项目模板:
simple 个人觉得一点用都没有
webpack 可以使用(大型项目)
Eslint 检查代码规范，
单元测试
webpack-simple 个人推荐使用, 没有代码检查 √
browserify -> 自己看
browserify-simple
--------------------------------------------
基本使用流程:
1. npm install vue-cli -g 安装 vue命令环境
验证安装ok?
vue --version
2. 生成项目模板
vue init <模板名> 本地文件夹名称
3. 进入到生成目录里面
cd xxx
npm install
4. npm run dev