1.什么是Vue
2.如何使用Vue
<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>
导入vue.js文件 (2)创建一个双标签: (3) 创建一个vue对象并使用el挂载到双标签上。
2.1 关于el挂载点
Vue实例的作用范围是什么呢?
Vue会管理el选项命中的元素及其内部的后代元素
是否可以使用其他的选择器?
可以,一般我们使用id,因为id是唯一得。
是否可以设置其他的dom元素呢?
可以,必须该dom是一个双标签。不能是body html标签
2.2 关于data属性
定义vue得数据。 可以定义为任意类型得数据
3.Vue 的本地应用
Vue指定: 以v-开始,并且可以在标签内容使用得。vue可以解析这个指令。
3.1 v-text 和v-html
区别: v-text:不能解析html标签
v-html: 可以解析html标签。
<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>
3.2 v-on
为元素绑定事件
在元素上使用οnclick=“方法名”。或 $(“#元素”).click(function(){})
<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>
3.3 v-show和v-if
<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>
3.4v-bin
设置元素的属性 绑定元素得属性值。
<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>
3.5v-for
循环遍历指令: v-for=“(变量名,下标) in 数组|集合”
<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>
3.6v-on补充
传递自定义参数,事件修饰符
<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>
3.7v-model
获取和设置表单元素的值 双向绑定
哪些是表单元素?
<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>
4.网络应用
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){})
<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>