一、Vue.js简介
1、Vue.js是什么？
Vue.js也称为Vue,
版本 v1.0 v2.0
是一个用来构建用户界面的框架
是一个轻量级的MVVM框架(Model-View-ViewModel)框架，其实就是数据的双向绑定
数据驱动+组件化的前端开发(核心思想)
通过简单的API可以实现响应式的数据绑定和组合的视图组件
更容易上手、小巧
参考官网：vuejs.org
2.vue
由个人维护，尤雨溪，华人，目前就职于阿里巴巴
2014 2月开源了vue.js的源代码
都不兼容低版本的IE
v-for: 对数组或对象进行循环操作
1.v-for:循环数组对象
{{val.num}}
{{val.name}}
{{val.price}}
new Vue({
el:'#itany',
data:{
arrs:[
{num:1,name:'苹果',price:3},
{num:2,name:'香蕉',price:2},
{num:3,name:'鸭梨',price:1}
]
}
})
v-model:双向数据绑定，常用于表单元素
2.v-model
{{msg}}
new Vue({
el:'#itany',
data:{
msg:''
}
})
v-on:时间绑定,用法：v-on:事件
3.v-on:时间绑定
按钮
var vm=new Vue({
el:'#itany',
data:{
msg:'hello vue'
},
methods:{
alt:function(){
alert(vm.msg)
alert(this.msg)
}
}
})
v-show/v-if：控制元素的显示隐藏
<p>此内容可见</p>
<p v-show=!see>v-if此内容不可见</p>
<p>此内容可见</p>
<p v-show=!see>v-if此内容不可见</p>
new Vue({
el:'#itany',
data:{
see:true
}
})
v-bind 绑定属性 v-bind:属性='值'
<div id=q>
<img v-bing:src="url" alt=" " @click='c'>
</div>
<script>
new Vue({
el:"#q",
data:{
u:某个东西
h:某个东西
},
methods:{
c:function(){
this.u=this.h
}
}
})
网友评论