什么是vue?
vue是前端框架,免除元素JavaScript中的DOM操作,简化书写。
基于MVVM思想,实现数据的双向绑定,将编程的关注点放在数据上。
官网:https://v2.cn.vuejs.org/
vue快速入门
- 新建html页面,引入vue.js文件
<script src="js/vue.js"></script>
- 在js代码区域,创建vue核心对象,定义数据模型
<script>
new Vue({
el:"#app",
data:{
message:"hello Vue!"
}
})
</script>
- 编写视图
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
vue常用指令
指令 | 作用 |
v-bind | 为html标签绑定属性值,如设置href,css样式等 |
v-model | 在表单元格上创建双向数据绑定 |
v-on | 为HTML标签绑定事件 |
v-if | |
v-else-if | 条件性的渲染某元素,判定为true时渲染,否则不渲染 |
v-else | |
v-show | 根据条件展示某元素,区别在于切换的是display属性的值 |
v-for | 列表渲染,遍历容器的元素或者对象的属性。 |
列子:
<body>
<div id="app">
<a v-bind:href="url">链接1</a>
<a :href="url">链接2</a>
<input type="text" v-model="url">
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
url:"https://www.baidu.com"
}
})
</script>