1.正文
vue前端框架
1.1什么是Vue
1.2如何使用vue
<%--
Created by IntelliJ IDEA.
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<%--导入vue得脚本--%>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<%--创建一个双标签--%>
<div id="app">
<%--使用vue这种定义得数据 这是vue得语法--%>
{{name}}<br>
{{age}}
</div>
</body>
<script>
/*创建一个Vue对象*/
var app = new Vue({
//把该对象挂载到div标签上 el属性是必有
el: "#app",
//data:数据区 定义一些数据 这些数据得类型可以是任意类型。
data: {
name:"张三",
age: 15,
hobby:["游泳","看书","玩游戏"],
}
})
</script>
</html>
总结: (1)导入vue.js文件 (2)创建一个双标签: (3) 创建一个vue对象并使用el挂载到双标签上。
1.3el挂载点
Vue实例的作用范围是什么呢?
Vue会管理el选项命中的元素及其内部的后代元素
是否可以使用其他的选择器?
可以,一般我们使用id,因为id是唯一得。
是否可以设置其他的dom元素呢?
可以,必须该dom是一个双标签。不能是body html标签
1.4data属性
定义vue得数据。 可以定义为任意类型得数据。
1.5本地应用
Vue指定: 以v-开始,并且可以在标签内容使用得。vue可以解析这个指令。
1.5.1v-text和v-html
设置标签的文本值(textContent)
v-text:不能解析html标签
v-html: 可以解析html标签。
<%--
Created by IntelliJ IDEA.
Date: 2022/5/23
Time: 14:16
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<%--导入vue得脚本--%>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<%--创建一个双标签--%>
<div id="app">
<%--使用{{}}显示标签内容--%>
<span>{{name}}你好</span><br>
<%--设置span得内容 会把span中得原来得内容覆盖--%>
<span v-text="name">你好</span>
</div>
</body>
<script>
/*创建一个Vue对象*/
var app = new Vue({
//挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效
el:"#app",
data:{
name:"刘德华",
age:18,
hobby:["你好","大家好"]
}
})
</script>
</html>
1.5.2v-on指令
为元素绑定事件
回顾:
在元素上使用οnclick="方法名"。或 $("#元素").click(function(){})
<%--
Created by IntelliJ IDEA.
Date: 2022/5/23
Time: 14:16
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<%--导入vue得脚本--%>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<%--创建一个双标签--%>
<div class="app">
{{age}}<br>
<%--绑定点击事件--触发add方法。在vue中定义方法。如果方法是无参可以省略()--%>
<input type="button" value="点击" v-on:click="add"/><br>
<%--vue提供了一种简洁模式@等价于v-on:--%>
<input type="button" value="点击2" @click="sub"/><br>
</div>
</body>
<script>
/*创建一个Vue对象*/
var app = new Vue({
//挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效
el:".app",
data:{
name:"刘德华",
age:18,
hobby:["你好","大家好"]
},
//表示vue中定义得方法。
methods:{
//无需添加function关键字
add(){
//使用上面得data数据. this当前类对象 Vue对象
this.age++;
},
sub(){
this.age--;
}
}
})
</script>
</html>
1.5.3 v-show和v-if
根据表达值的真假,切换元素的显示和隐藏
<%--
Created by IntelliJ IDEA.
Date: 2022/5/23
Time: 14:16
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<%--导入vue得脚本--%>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<%--创建一个双标签--%>
<div class="app">
{{age}}<br>
<%--v-show:判断表达式是否为真如果为真则显示指令所在得标签。通过css得display来控制标识得显示和隐藏--%>
<img src="imgs/1.jpg" width="100" height="200" v-show="age>18&&age<25"/>
<%--v-if:根据表达式得真假控制标签得显示。通过创建和移除标签来控制显示和隐藏。如果显示和隐藏得频率非常高,那么该标签得效率会低--%>
<img src="imgs/1.jpg" width="100" height="200" v-if="age>18&&age<25"/>
<br>
<input type="button" value="点检" @click="fun"/>
</div>
</body>
<script>
/*创建一个Vue对象*/
var app = new Vue({
//挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效
el:".app",
data:{
flag:true,
age:17,
},
methods:{
fun(){
this.age++;
}
}
})
</script>
</html>
1.5.4 v-bind
设置元素的属性 绑定元素得属性值。
<%--
Created by IntelliJ IDEA.
Date: 2022/5/23
Time: 14:16
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<%--导入vue得脚本--%>
<script type="text/javascript" src="js/vue.js"></script>
<style>
.myimg {
border: 2px solid red;
}
</style>
</head>
<body>
<%--创建一个双标签--%>
<div class="app">
<%--v-bind:设置标签得属性--%>
<img v-bind:src="imgSrc" width="100px" height="100px" v-bind:class="flag?'myimg':''"/>
<%--vue提供了一种简洁模式: 省略v-bind --%>
<img :src="imgSrc" width="100px" height="100px" :class="flag?'myimg':''"/><br>
<input type="button" value="点击" @click="fun"/>
</div>
</body>
<script>
/*创建一个Vue对象*/
var app = new Vue({
//挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效
el: ".app",
data: {
imgSrc: "imgs/1.jpg",
flag: true
},
methods: {
fun() {
this.imgSrc = "imgs/dl.jpg";
this.flag = !this.flag
}
}
})
</script>
</html>
1.5.5 v-for
循环遍历指令
v-for="(变量名,下标) in 数组|集合"
<%--
Created by IntelliJ IDEA.
Date: 2022/5/23
Time: 14:16
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<%--导入vue得脚本--%>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<%--创建一个双标签--%>
<div class="app">
<ul>
<li v-for="(a,index) in hobby">{{index}}---->{{a}}</li>
</ul>
<table border="1" width="200" cellpadding="0" cellspacing="0">
<tr v-for="(item,index) in peoples">
<td>{{index}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.address}}</td>
</tr>
</table>
</div>
</body>
<script>
/*创建一个Vue对象*/
var app = new Vue({
//挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效
el:".app",
data:{
hobby:["游泳","爬山","看书"],
peoples:[
{"name":"张三1","age":15,"address":"郑州1"},
{"name":"张三2","age":15,"address":"郑州2"},
{"name":"张三3","age":15,"address":"郑州3"}
]
}
})
</script>
</html>
1.5.6 v-on补充
传递自定义参数,事件修饰符
<%--
Created by IntelliJ IDEA.
Date: 2022/5/23
Time: 14:16
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<%--导入vue得脚本--%>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<%--创建一个双标签--%>
<div class="app">
<table border="1" width="200" cellpadding="0" cellspacing="0">
<tr v-for="(item,index) in peoples" >
<td>{{index}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.address}}</td>
<td>
<a @click="del(item)">删除</a>
</td>
</tr>
</table>
<%--keyup:键盘弹起事件 enter:回车键--%>
<input type="text" name="name" @keyup.enter="show('hello')"/>
</div>
</body>
<script>
/*创建一个Vue对象*/
var app = new Vue({
//挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效
el:".app",
methods:{
del(n){
console.log(n);//浏览器控制台输出
},
show(c){
alert("触发了回车键"+c);
}
},
data:{
peoples:[
{"name":"张三1","age":15,"address":"郑州1"},
{"name":"张三2","age":15,"address":"郑州2"},
{"name":"张三3","age":15,"address":"郑州3"}
]
}
})
</script>
</html>
1.5.7 v-model
获取和设置==表单元素==的值
哪些是表单元素?
<input type="text|password|hidden|radio|checkbox"/>
<select>
<textarea>
<%--
Created by IntelliJ IDEA.
Date: 2022/5/23
Time: 14:16
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<%--导入vue得脚本--%>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<%--创建一个双标签
v-model它属于双向绑定:如果输入框发送改变,属性name也会跟着变。
如果name属性改变,则输入得内容也会改变。
--%>
<div class="app">
{{name}}<br>
<input type="text" v-model="name"/><button @click="fun">点击</button>
</div>
</body>
<script>
/*创建一个Vue对象*/
var app = new Vue({
//挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效
el:".app",
data:{
name:"张三",
},
methods:{
fun(){
this.name="刘德华"
}
}
})
</script>
</html>