一.什么是Vue?
- Vue 类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
官网地址:https://cn.vuejs.org/
二.vue的简单使用
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="mini">
<p></p>
<input type="text" v-model="val">
<h3>{{val}}</h3>
</div>
</body>
</html>
<script src="vue.min.js"></script>
<script >
new Vue({
el:'#mini',
data:{
val:'你好'
}
}) //实例化
</script>
- 结果:
- 1.vue数组循环
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="box">
<ul>
<li v-for="(item, index) in arr" :key="index">{{item}}</li>
</ul>
</div>
</body>
</html>
<script src="vue.min.js"></script>
<script>
// 数组循环
new Vue({
el: '.box',
data: {
arr: ['小三', '小四', '小五']
}
})
</script>
- 2.动态修改:v-bind
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="box">
<a href="http://baidu.com">百度</a><br>
<a v-bind:href="taobao">淘宝</a><br>
<a :href="csdn">csdn</a><br>
</div>
</body>
</html>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '.box',
data: {
taobao: 'http://taobao.com',
csdn: 'https://www.csdn.net/'
}
})
</script>
- 3.v-on用来绑定事件
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="box">
<button v-on:click="clickFn1">按钮1</button>
<button @click="clickFn2">按钮2</button>
</div>
</body>
</html>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '.box',
data: {
},
methods: {
clickFn1(){
console.log(123)
},
clickFn2(){
console.log(456)
}
}
})
</script>
点击按钮1 、按钮二,可以看到控制台分别输出123、456!我们可以看到需要绑定的方法必须放在methods里面,可以看到按钮绑定方法有两种方式,v-on:click=“clickFn1”,@click=“clickFn2”
- 4.v-if、v-else、v-else-if的使用举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的v-if、v-else、v-else-if的使用</title>
<!--引入vue 依赖项-->
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="true">true的时候显示</p>
<p v-if="false">false的时候隐藏</p><br/>
<!-- 语法: v-if="表达式" v-else-if="表达式" v-else -->
<p v-if="age<18">未成年</p>
<p v-else-if="age==18">刚好成年</p>
<p v-else>成年人</p>
</div>
<script>
/*定义Vue全局变量*/
var app = new Vue({
el:"#app",
data:{
"name":"helloWord",
age:17
}
});
</script>
</body>
</html>
- 5.v-showf的使用举例:
用来在页面中控制一个元素显示与否,我们可以用v-show来实现,效果类似于
display: block/none;
。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的v-if、v-else、v-else-if的使用</title>
<!--引入vue 依赖项-->
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div class="box">
<section v-show="ifShow">显示这些文字</section>
</div>
<script>
var vm = new Vue({
el: '.box',
data: {
ifShow: true
}
})
</script>
</body>
</html>
- 6.v-show与v-if的区别:
相同点 | 不同点 |
---|---|
控制元素显示 | v-if :对元素进行销毁和重建。 |
控制元素隐藏 | v-show :只是简单地 CSS 对元素进行切换。 |