1.Vue简介
vue官网说:Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。
它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。
渐进式我个人理解就是阶梯式向前。vue是轻量级的,它有很多独立的功能或库,我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染,我就只用vue的声明渲染,而我们要用他的组件系统,我们可以引用它的组件系统。
vue的渐进式表现为:
声明式渲染——组件系统——客户端路由——-大数据状态管理——-构建工具
2.Vue的使用
2.1引入vue.js文件
<script src="../js/vue.js"></script>
2.2在body中创建一个div标签
<div id="test">
{
{msg}}
</div>
2.3创建一个<script>标签
<script type="text/javascript">
var test=new Vue({
//把当前vue对象挂载到指定的标签元素上,使其vue生效。
el: "#test",
data:{
msg:"林深见鹿",
}
})
</script>
2.4运行结果
3.Vue的常用指令
3.1 v-text 和v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<span>{
{msg}}</span><hr>
<span v-text="msg">你喜欢什么?</span><hr>
<!--v-text:无法解析html标签 v-html可以解析html标签-->
<span v-html="msg">你喜欢什么?</span>
</div>
</body>
<script>
let app=new Vue({
el:"#app",
data:{
msg:"<font color='red'>我喜欢打篮球</font>",
}
})
</script>
</html>
3.2 v-on基础
为元素绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<span>{
{msg}}</span><hr>
<button v-on:click="fun">点击</button>
<!--上面的v-on:缩写为@-->
<button @dblclick="fun">点击2</button>
</div>
</body>
<script>
let app=new Vue({
el:"#app",
data:{
msg:"<font color='red'>我喜欢打麻将</font>",
},
//定义方法
methods:{
fun(){
//this表示vue对象
this.msg="我喜欢打篮球";
},
fun2(){
}
}
})
</script>
</html>
3.2 v-show 和 v-if
在 vue
中 v-show
与 v-if
的作用效果是相同的(不含v-else),都控制元素在页面是否显示。
在用法上也是相同的
- 当表达式为
true
的时候,都会占据页面的位置 - 当表达式都为
false
时,都不会占据页面位置
v-show是采用样式的方式控制元素的显示和隐藏,也就是我们常用的display: none,此时虽然元素是隐藏状态,但在html代码中还是存在的。
v-if则是通过直接控制元素代码的方式在控制显示和隐藏。也就是说当元素隐藏的时候,该元素本身在html是不存在的。所以v-if的显示和隐藏。
3.3v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
<style>
.a{
border: red solid 5px;
}
</style>
</head>
<body>
<div id="app">
<!--如何让img标签中src属性引用vue对象中的数据-->
<img v-bind:src="imgUrl" width="200" v-bind:title="title" v-bind:class="flag?'a':''"/><br>
<!--v-bind: 缩写为: -->
<img :src="imgUrl" width="200" :title="title" :class="flag?'a':''"/><br>
<button @click="fun">点击</button>
</div>
</body>
<script>
let app=new Vue({
el:"#app",
data:{
age:18,
imgUrl:"imgs/sg.jpg",
title:"帅哥",
flag:true
},
methods:{
fun(){
this.imgUrl="imgs/1.jpg";
this.title="美女好看"
}
}
})
</script>
</html>
3.4v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<!--for(数据类型 b:数组){}-->
<li v-for="(item,index) in hobby">
{
{item}}--->{
{index}}
</li>
</ul>
<table width="500px" border="1" cellspacing="0" class="0">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr v-for="item in users">
<td>{
{item.name}}</td>
<td>{
{item.age}}</td>
<td>{
{item.sex}}</td>
<td>
<button @click="deleteUser(item.name)">删除</button>
<button >编辑</button>
</td>
</tr>
</table>
<input type="text" @keyup.enter="fun()"/>
</div>
</body>
<script>
let app=new Vue({
el:"#app",
data:{
hobby:["好吃","好喝","好色","好赌"],
users:[
{"name":"安志远","age":16,"sex":"女"},
{"name":"李云宵","age":19,"sex":"男"},
{"name":"闫锦超","age":15,"sex":"男"}
]
},
methods:{
deleteUser(name){
alert(name);
},
fun(){
alert("触发了回车键");
}
}
})
</script>
</html>
3.5 v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--v-model会实现双向绑定:表达元素内容改变时,vue中对于的数据也会改变,vue中的数据改变对于的表单元素也会改变-->
<input type="text" v-model="name" />
{
{name}}
<button @click="dj">点击</button>
</div>
</body>
<script>
let app=new Vue({
el:"#app",
data:{
name:"刘德华"
},
methods:{
dj(){
this.name="张学友";
}
}
})
</script>
</html>