监听事件 v-on
v-on:click 单机事件,可缩写为 @click
@click.stop 阻止事件冒泡到父元素
@click.capture 优先触发
@click.self 只有自己可以触发
@click.once 只触发一次
@click.prevent 阻止页面刷新但是不影响函数
条件语句 v-if
v-if 必须给出判断条件。如:v-if="number>80"
v-else 不用条件
v-else-if 必须给出判断条件。如:v-else-if="number>50"
循环语句 v-for
遍历数据及index
<tr v-for="her,index in hero">
<td>{{index+1}}</td>
<td>{{her.name}}</td>
<td>{{her.hp}}</td>
</tr>
遍历数字
<tr v-for="i in 10">
<td>{{i}}</td>
</tr>
属性绑定 v-bind
v-bind 绑定视图与Vue对象,将Vue的数据放到视图上
如下:v-bind:href 可简写为:href
<a :href="page">百度一下</a>
new Vue({
el:'#div1',
data:{
page:'http://www.baidu.com'
}
})
例如:v-bind:href 链接,可简写为:href
双向绑定 v-model
将Vue的数据放到视图上,然后还可以把视图上我i们输入的数据传到Vue对象
<div id="div1">
输入英雄名称 <input v-model="name">
<button @click="doClick">选择你的英雄</button>
</div>
<script>
new Vue({
el:'#div1',
data:{
name:"阿伦"
},
methods:{
doClick:function () {
alert(this.name)
}
}
})
</script>
扩展
v-model.lazy 加上.lazy之后,相当于监听change操作,只有在失去焦点的时候,才会进行数据绑定了
v-model.number v-model默认是string类型,所以就可以通过.number方式确保获取到的是数字类型了。
v-model.trim 去掉前后的空白
计算属性 computed
new Vue({
el:'#div1',
data:{
exchange:6.1,
rmb:100
},
computed:{
doller:function () {
return this.rmb/ this.exchange
}
}
})
//methods 方法
methods:{
doller:function () {
return this.rmb/ this.exchange
}
}
注意:
computed 和 methods 的区别,computed
是有缓存的,只要输入框没发生变化就会直接返回以前计算出来的值,而不会再次计算。
这样如果是复杂计算,就会节约不少时间。而methods每次都会调用
计算属性 watch
watch vue可以通过watch来监听属性值的变化
watch:{
rmb:function (val) {
this.rmb=val;
this.doller=this.rmb / this.exchange
},
doller:function (val) {
this.doller=val;
this.rmb=this.doller * this.exchange
}
}
过滤器 filter
如下,data为输入框绑定传递到Vue的数据,下面的td中用竖杠将数据和过滤方法分割
<tr>
<td align="center">
<input v-model="data">
</td>
<td align="center">
{{data|capitalize|capitalizelast}}
</td>
</tr>
直接定义全局过滤方法
Vue.filter('capitalize',function (value) {
if(!value) return ''
value = value.toString()
return value.charAt(1).toUpperCase()+value.substring(1)
})
组件 components
定义组件,获取tempalateDiv的内容,props:[‘product’]获取参数,然后全部注到div中
var tempalateDiv = document.getElementById("tempalate").innerHTML;
var tempalateObject = {
props:['product'],
template:tempalateDiv,
methods: {
increaseSale:function () {
this.product.sale = parseInt(this.product.sale);
this.product.sale++
this.$emit('increment')
}
}
}
Vue.component('product',tempalateObject);
new Vue({
el:'#div1',
data:{
products:[
{"name":"男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮1","sale":"1","price":"17","review":"3"},
{"name":"男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮2","sale":"2","price":"19","review":"13"},
{"name":"男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮3","sale":"3","price":"15","review":"23"}
]
}
})
自动赋值
<div id="tempalate" style="display:none">
<div class="product" v-on:click="increaseSale">
<div class="price">
¥{{product.price}}
</div>
<div class="productName">
{{product.name}}
</div>
<div class="sale">月成交{{product.sale}}笔</div>
<div class="review">评价{{product.review}}</div>
</div>
</div>
<div id="div1">
<product v-for="item in products" v-bind:product="item"></product>
</div>
自定义指令 Vue.directive
第一个参数xart就是指令名称,el就是html dom对象,binding是指令参数。
Vue.directive('xart',function (el,binding) {
el.innerHTML = el.innerHTML+'('+binding.value.text+')'
el.style.color=binding.value.color
})
<div id="div1">
<div v-xart="{color:'red',text:'我是最棒的'}"> good good study dayday up</div>
</div>
路由(局部刷新) VueRouter
模板( html 片段 )
var user = { template: '<p>用户管理页面的内容</p>' };
var second = { template: '<p>产品管理页面的内容</p>' };
var order = { template: '<p>订单管理页面的内容</p>' };
定义路由
var routes=[
{path:'/',redirect:'/user'},
{path:'/user',component : user},
{path:'/product',component : product},
{path:'/order',component : order}
];
创建VueRouter实例
var router = new VueRouter({
routes:routes
})
给vue对象绑定路由
new Vue({
el:"#app",
router
})
展示数据
<div id="app">
<div class="menu">
<router-link to="/user">用户管理</router-link>
<router-link to="/product">产品管理</router-link>
<router-link to="/order">订单管理</router-link>
</div>
<div class="workingRoom">
<router-view></router-view>
</div>
</div>
Ajax(Fetch,axios)
和JQuary不同的是vue主流使用Fetch和Axios这两个ajax框架,使用方法差球不多
var url="https://static.how2j.cn/study/json.txt";
fetch(url).then(function (response) {
response.json().then(function (jsonObject) {
var jsonString = JSON.stringify(jsonObject)
alert(jsonString)
document.getElementById('div1').innerHTML="通过ajax获取到的数据为--"+jsonString;
})
}).catch(function (err) {
console.log("Fetch错误:"+err)
})
var url = "http://how2j.cn/study/json.txt"
axios.get(url).then(function(response) {
var jsonObject = response.data;
var jsonString = JSON.stringify(jsonObject)
document.getElementById("hero").innerHTML = "通过 axios 获取到的json数据:"+ jsonString;
})
git源码地址
https://github.com/MikeChengege/vue/tree/master/src/com/study