现在每个公司在招聘时都说要精通Angular.js、React.js、Vue.js,那如果不会的同学今天咱们先从Vue.js学起,我给大家带来的是常用的一些功能,如果大家觉得还不错请给我一些(喜欢)、或评价,如果真的可以帮助到大家我还会继续给大家整理Angular.js和React.js.
好了废话少说进入今天的主题:Vue.js;
Vue:
官网：http://vuejs.org.cn/
教程：http://vuejs.org.cn/guide/
使用vue
1、引文件
2、
new Vue({
el:'id或class选择器', //为模板作用域,Vue可操作的区域;
data:{
数据;
}，
methods:{
函数调用;
}
});
注意： el data不能变 数据中的名字可以随便
class选择器也可以使用,但是只取第一个模板，所以一般用id
3、放数据的盒子
{{msg}}
如果不想更新页面数据
{{*msg}}
转译输出
{{{msg}}} 当数据中出现标签时;
---------------------
绑定v-model后msg:
radio 选中是on
checkbox true false
select v-model="msg" 是value值
Vue指令: v-
v-model 表单绑定数据的;
v-for="value in arr" 循环数组
v-for="(key,value) in json" 循环json
v-show="true/false" 显示隐藏
v-hide="true/false"
v-if="true/false" 显示隐藏(会从DOM中删除元素)
v-else="true/false"
v-bind:class="" 绑定className 可以改变样式
:class="{class名称:true/false,red:a}" 同上 （只是简写)
事件指令:
v-on:click 点击事件
@click 点击事件(简写)
DOM中有的事件Vue中都有,加在@后即可;
v-on:keyup: 操作键盘按键的keyCode;
@keyup.13 (简写)
@keyup.enter="add()"
@keyup.left
@keyup.right
@keyup.up
@keydown.down
@keydown.delete backspace
$event 需要在函数实参中上传$event 操作事件对象
ev.clientX 鼠标坐标
ev.keycode 键盘按键
stopPropagation() 阻止冒泡
ev.preventDefault(); 阻止默认行为
自定义指令
Vue.directive('指令名字',function(){
this.el.style.background='red';
});
this还是Vue，谁调用this.el就是谁
过滤器:filter
{{msg | currency '￥' 参数1 参数2}}
currency msg首字母大写货币默认$ 小数点后两位 后面跟参数：currency 参数1 参数2;
capitalize msg首字母大写
uppercase msg全部大写
lowercase msg全部小写
过滤器连写
过滤器名称 | 过滤器名称 | 过滤器名称
自定义过滤器
Vue.filter('过滤器名字',function(input,a,b){ input为系统自带函数;
alert(a+b);
return input.split(' ').reverse().join(' ');
});
input 展示的数据 input 需要过滤的内容
使用{{msg | 过滤器名字}}
Vue:动画（简单运动）
动画的定义
//跟写class名是一样的 写在style中;
.go-transition{
transition:1s all ease; 全部改变用all 一个时写一个属性 如:(width)即可;
width:100px;height:100px; background: red;
//最终元素在DOM结构中展示的样子
}
.go-enter{ 进入时
width: 0;
height: 0;
opacity: 0;
}
.go-leave{ 离开时
width: 0;
height: 0;
opacity: 0;
}
动画是使用
<p transition="go"></p> go 动画的名称
监控Vue中的数据的改变
var v=new Vue();
v.$watch('msg',function(){
//数据变化后执行的函数
})
Vue:组件
定义组件
坑：组件定义需要放到new Vue({})上面
不能使用系统自带的标签,汉字
1-----------------------
创造一个组件
Vue.component('aaa',{
template:'<div>我是备胎</div>'
});
使用一个组件
<aaa></aaa>
2--------------------
Vue.component('aaa',{
template:'<div>{{msg}}</div>',
props:['msg'] 保留原有标签上的属性;
});
<aaa msg=""></aaa>
3----------------------
<script type="x-template" id="t1"></script>
Vue.component('aaa',{
template:'#t1' //template:模板id
});
<aaa></aaa>
4---------------------
通过扩展实现模板
var t=Vue.extend({ //扩展模板
template:'<div>123</div>'
});
Vue.component('aaa',t); //创造组件，让自定义标签和模板关联
单页面开发 SPA
点不同按钮展示不同的内容
路由
1、引文件 vue-router.js 在vue.js的基础上
2、页面布局 <router-view></router-view> 路由的展示区
<li><a v-link="{path:'/home'}">首页</a></li>
3、扩展模板 var home=Vue.extend({
template:'<h3>我是首页</h3>'
});
4、扩展、初始化 var App=Vue.extend({}) //扩展整个页面
5、var Router=new VueRouter() //定义个路由
6、Router.map({ }) //遍历所有的模板路径
7、开启路由 Router.start(App,'#box');
实现Vue路由代码 (复制即可)
<html>
<head>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
window.onload=function(){
var Home=Vue.extend({
template:'<h3>我是首页</h3>'
})
var List=Vue.extend({
template:'<h3>我是列表页</h3>'
})
var App=Vue.extend({})
var Router=new VueRouter()
Router.map({
'/Home':{
component:Home
},
'/List':{
component:List
}
})
Router.start(App,'#box')
}
</script>
</head>
<body>
<div id="box">
<h1>路由展示页面</h1>
<ul>
<li><a v-link="{path:'/Home'}">首页</a></li>
<li><a v-link="{path:'/List'}">列表页</a></li>
</ul>
<router-view></router-view>
</div>
</body>
</html>
Vue交互
get
post
jsonp
1、引文件
2、this.$http.get('路径',{数据}).then(fnSucc,fnErr);
fnSucc function(res){
//res是对象
res.data //数据
}
-----------------------------------------
this.$http.post('路径',{数据},{emulateJSON:true})).then(fnSucc,fnErr);
fnSucc function(res){
//res是对象
res.data //数据
}
------------------------------------------
this.$http.jsonp('路径',{wd:'a'},{jsonp:'cb'}).then(function(res){
//需要jsonp修改下cb或callback
alert(res.data.s);
},function(){})
}
喜欢的希望帮click下哦;
网友评论