1.在webstorm中创建工程
<!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">
{{msg}}
</div>
</body>
<script type="text/javascript">
let app=new Vue({
el:"#app",
data:{
msg:"~~~~~~~~~~~~~~~~~~"
}
})
</script>
</html>2. vue指令
2.1 v-text 和v-html
设置标签的文本值(textContent)
<!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">
{{msg}}
<p v-text="msg"></p>
<p v-html="msg"></p>
</div>
</body>
<script type="text/javascript">
let app=new Vue({
el:"#app",
data:{
msg:"<font color='#7fffd4'>vue~~~~~~~~~~~~~~~~~~</font>"
}
})
</script>
</html>2.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">
{{msg}}
<hr>
<button v-on:click="fun">点击</button>
<!--上面的v-on:缩写为@-->
<button @dblclick="fun">点击2</button>
<p v-html="msg"></p>
</div>
</body>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
msg: "<font color='#7fffd4'>vue~~~~~~~~~~~~~~~~~~</font>",
},
//定义方法
methods: {
fun() {
//this表示vue对象
this.msg = "我喜欢打排球"
}
}
})
</script>
</html>2.3 v-show 和v-if
根据表达值的真假,切换元素的显示和隐藏
<!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">
<img src="imag/mm1.jpg" v-show="age>18"/>
<!--v-show通过style中disable来控制标签的显示和隐藏 v-if:通过删除和创建标签来控制-->
<img src="imag/mm2.jpg" v-if="age>18"/>
<button v-on:click="fun">点击</button>
</div>
</body>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
msg: "<font color='#7fffd4'>vue~~~~~~~~~~~~~~~~~~</font>",
age: 18
},
methods: {
fun() {
this.msg = "我喜欢打排球";
this.age++
}
}
})
</script>
</html>2.4 v-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" v-bind:title="title" v-bind:class="flag?'a':''"/>
<!--v-bind: 缩写为: -->
<img :src="imgUrl" :title="title" :class="flag?'a':''"/>
<button v-on:click="fun">点击</button>
</div>
</body>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
age: 18,
imgUrl: "imag/mm1.jpg",
title: "mm1",
// flag: ture
},
methods: {
fun() {
this.imgUrl = "imag/mm2.jpg";
this.title = "mm2";
}
}
})
</script>
</html>2.5 v-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="500" 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 type="text/javascript">
let app = new Vue({
el: "#app",
data: {
hobby: ["好吃", "好喝", "好玩", "好色"],
users:[
{"name":"z","age":22,"sex":"男"},
{"name":"y","age":20,"sex":"女"},
{"name":"m","age":23,"sex":"女"}
]
},
methods: {
deleteUser(name){
alert(name);
},
fun() {
alert("触发了回车键")
}
}
})
</script>
</html>2.6 v-model
获取和设置表单元素的值. input select textarea
<!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">
<input type="text" v-model="name"/>
{{name}}
<button @click="fun">点击</button>
</div>
</body>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
name:"l"
},
methods: {
fun() {
this.name="z"
}
}
})
</script>
</html>3. vue结合axios以及后台代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>天知道</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/tianindex.css" />
</head>
<body>
<div class="wrap" id="app">
<div class="search_form">
<div class="logo"><img src="imag/mm1.jpg" alt="logo" width="100"/></div>
<div class="form_group">
<input
type="text"
class="input_txt"
placeholder="请输入查询的天气"
v-model="city"
/>
<button class="input_sub" @click="searchWeather">
搜 索
</button>
</div>
</div>
<table width="1000" border="1">
<tr>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>班级ID</td>
</tr>
<tr v-for="item in students">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.cid}}</td>
</tr>
</table>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="js/vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="js/axios.min.js"></script>
<!-- 自己的js -->
<script>
let app=new Vue({
el:"#app",
data:{
city:{},
studentVo:{},
students:[],
},
methods:{
searchWeather(){
axios.post("http://localhost:8080/student/list/1/5",this.studentVo).then(result=>{
this.students=result.data.data.records;
})
}
}
})
</script>
</body>
</html>
488
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
