vue
一片html代码配合上json,在new出来vue实例
Demo:1
数据双向绑定(v-model="message",{{message}})
{{message}}
var c=new Vue({
el:'#box', //el为挂载点，可以是class,id,元素
data:{
message:'hello world!'
}
})
Demo:2
v-for
循环数组
{{arr}} {{$index}}
var c=new Vue({
el:'#box',//class,id,元素度可以
data:{
arrs:['apple','banana','orange','pear'],
jsons:{a:'apple',b:'banner',c:'car'}
}
})
循环对象
1：
{{json}} {{$index}} {{$key}}
2：
{{k}} {{v}} {{$index}}
结果
Demo3：
v-on:(跟事件)click
methods 绑定事件方法
{{arr}} {{$index}}
{{json}} {{$index}} {{$key}}
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
var c=new Vue({
el:'#box',//class,id,元素度可以
data:{
a:true
}
})
v-show来控制显示隐藏
Demo5
简易留言板编写
用户名：
年龄：
| 序号 | 名字 | 年龄 | 操作 |
|---|---|---|---|
| {{$index+1}} | {{item.name}} | {{item.age}} | 删除 |
删除全部 | |||
暂无数据.... | |||
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);
}
}
})
、******************************************************************************
列：颜色切换
new Vue({
el:'#app",
data:{
a:true,
b:false
},
methods:{
changeColor:function(){
this.a=!this.a,
this.b=!this.b
}
}
})
列jsonp传递
{{value}}
暂无数据...
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
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防止闪烁
[v-cloak]{
display:none;
}
{{msg}}
{{{}msg}}}
上面两种结果一样的，就是效果上后面这种自带闪烁
钩子函数
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();
})
{{a|toDou}}
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';
}
});
监听数据变化
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
动画:
.fade-transition{
}
进入：
.fade-enter{
opacity: 0;
}
离开：
.fade-leave{
opacity: 0;
transform: translateX(200px);
}
列：
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:'
我是标题3
'});
Vue.component('aaa',Aaa);
*组件里面放数据:
data必须是函数的形式，函数必须返回一个对象(json)
2,局部组件
2. 局部组件
放到某个组件内部
var Aaa=Vue.extend({
template:'
{{msg}}
'data:function(){
return {
msg:'我是标题'
}
},
});
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //局部组件
aaa:Aaa
}
});
另一种编写方式:
Vue.component('my-aaa',{
template:'好'
});
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
data:function(){
return{
msg:'2222'
}
},
methods:{
},
template:'
{{msg}}
'}
}
});
配合模板:
1. template:'
标题2->{{msg}}
'2. 单独放到某个地方
a).
标题2->{{msg}}
b).
标题1
{{val}}
多个组件切换 动态组件
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'
我是aaa组件
'},
'bbb':{
template:'
我是bbb组件
'}
}
});
vue-devtools ->调试工具
组件数据传递: √
1. 子组件就想获取父组件data
在调用子组件：
子组件之内:
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:
主页跳转链接
展示内容:
主页
新闻
//1,准备根组件
var App=Vue.extend();
//2准备Home和Neews组件
var Home=Vue.extend({
template:'
我是Home
'})
var News=Vue.extend({
template:'
我是News
'})
//3.准备路由
var router=new VueRouter();
//4.关联
router.map({
'home':{
component:Home
},
'news':{
component:News
}
})
//5启动路由
router.start(App,'#box');
//6跳转
router.redirect({
'/':'/home'
})
路由嵌套
我是主页
登录
注册
router.map({
'home':{
component:Home,
subRoutes:{
'login':{
component:{
template:'我是登录'
}
},
'reg':{
component:{
template:'我是注册'
}
}
}
},
'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组件代码
html
js
简单目录
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->
现在: index.html->
App.vue-> 需要一个
homenews
---------------------------------------------
路由嵌套:
和之前一模一样
--------------------------------------------
上线:
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
7749
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
