一、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:循环数组对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<ul>
<li v-for="val in arrs">
{{val.num}}
{{val.name}}
{{val.price}}
</li>
</ul>
</div>
<script src='node_modules/vue/dist/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
arr:[1,2,3,4,5],
arrs:[
{num:1,name:'冬瓜',price:4},
{num:2,name:'西瓜',price:3},
{num:3,name:'南瓜',price:2},
{num:4,name:'北瓜',price:1}
]
}
})
</script>
</body>
</html>
v-model:双向数据绑定，常用于表单元素
2.v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<input type="text" v-model='msg'>
<p>{{msg}}</p>
</div>
<script src='node_modules/vue/dist/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
msg:''
}
})
</script>
</body>
</html>
v-on:时间绑定,用法：v-on:事件
3.v-on:时间绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<input type="text" name="" v-model='fruit'>
<button v-on:click='add'>按钮</button>
<ul>
<li v-for='val in q'>{{val}}</li>
</ul>
</div>
<script src='node_modules/vue/dist/vue.js'></script>
<script type="text/javascript">
new Vue({
el:"#itany",
data:{
q:['q','w','e'],
fruit:''
},
methods:{
add:function(){
this.q.push(this.fruit);
this.fruit='';
}
}
})
</script>
</body>
</html>
4v-show/v-if：控制元素的显示隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<p>此内容可见</p>
<p v-show=!see>v-if此内容不可见</p>
<p>此内容可见</p>
<p v-if=!see>v-if此内容不可见</p>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
see:true
}
})
</script>
</body>
</html>
5v-bind 绑定属性 v-bind:属性='值'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<input type="text" v-model='msg'>
<p>{{msg}}</p>
</div>
<script src='node_modules/vue/dist/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
msg:''
}
})
</script>
</body>
</html>
网友评论