Vue简单使用
1.什么是Vue1.1.如何使用vue<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head><title>$Title$</title><%--导入vue得脚本--%><script type="text/javascri
·
1. 什么是Vue
1.1. 如何使用vue
<%@ 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.2. el挂载点
Vue实例的作用范围是什么呢？
Vue会管理el选项命中的元素及其内部的后代元素
是否可以使用其他的选择器？
可以，一般使用id，因为id是唯一的。
是否可以设置其他的dom元素呢？
可以，必须该dom是一个双标签。不能是body html标签
1.3. data属性
定义vue得数据。 可以定义为任意类型得数据。
1.4. 本地应用
Vue指定: 以v-开始，并且可以在标签内容使用得。vue可以解析这个指令。
1.4.1 v-text和v-html
设置标签的文本值(textContent)
v-text:不能解析html标签
v-html: 可以解析html标签。
<%@ 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.4.2 v-on指令
为元素绑定事件
在元素上使用οnclick="方法名"。或 $("#元素").click(function(){})
<%@ 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.4.3 v-show和v-if
根据表达值的真假,切换元素的显示和隐藏
<%@ 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.4.4 v-bind
设置元素的属性 绑定元素得属性值。
<%@ 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.4.5 v-for
循环遍历指令
v-for="(变量名,下标) in 数组|集合"
<%@ 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.4.6 v-on补充
传递自定义参数,事件修饰符
<%@ 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.4.7 v-model
获取和设置表单元素的值
哪些是表单元素?
<input type="text|password|hidden|radio|checkbox"/>
<select>
<textarea>
<%@ 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>2.练习
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>小黑记事本</title>
<meta name="robots" content="noindex, nofollow" />
<meta name="googlebot" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="./css/Bookindex.css" />
</head>
<body>
<!-- 主体区域 -->
<section id="todoapp">
<!-- 输入框 -->
<header class="header">
<h1>小黑记事本</h1>
<input
autofocus="autofocus"
autocomplete="off"
placeholder="请输入任务"
class="new-todo"
v-model="content"
@keyup.enter="add"
/>
</header>
<!-- 列表区域 -->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in hobby">
<div class="view">
<span class="index">{{index+1}}.</span> <label>{{item}}</label>
<button class="destroy" @click="remove(index)"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer">
<span class="todo-count"> <strong>1</strong> items left </span>
<button class="clear-completed">
Clear
</button>
</footer>
</section>
<!-- 底部 -->
<footer class="info">
<p>
<a href="http://www.baidu.com"
><img src="./img/logo.png" alt=""
/></a>
</p>
</footer>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../js/vue.js"></script>
<script>
var app=new Vue({
el:"#todoapp",
data:{
//列表内容
hobby:["吃饭","睡觉","打豆豆"],
//输入框内容
content:"",
},
methods:{
add(){
//往数组中添加输入得值
this.hobby.push(this.content);
},
remove(index){
//移除数组中指定下标得元素 从哪开始移除 移除得个数
this.hobby.splice(index,1);
}
}
})
</script>
</body>
</html>3.网络应用
Vue结合网络数据开发应用。调用服务器获取网络数据。vue结合axios完成网络请求。
axios是功能强大的网络请求库，
axios发送网络请求得语法:
axios.get(url?key=value&key2=value2).then(function(result){},function(error){})
axios.post(url,{key:value,key:value}).then(function(result){},function(error){})可以访问第三方得服务器。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
</head>
<body>
<div id="app">
<button @click="getPlay">获取笑话</button>
<ul>
<li v-for="p in plays">{{p}}</li>
</ul>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
plays:[],
},
methods:{
getPlay(){
var _this=this; //
//不能使用this 因为这里得this标识axios对象。
axios.get("https://autumnfish.cn/api/joke/list?num=5").then(function(result){
_this.plays=result.data.jokes
})
}
}
})
</script>
</body>
</html>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)