Vue
Vue介绍
概述
一个前端框架,用于将数据渲染到页面展示
Vue快速入门
-
开发步骤
- ①引入vue的脚本库文件
- ②声明一个div容器(Vue容器),id=app
- ③创建Vue对象,并和div容器绑定
-
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门案例</title>
</head>
<body>
<!--②声明一个div容器,id=app-->
<div id="app">
<!--插值表达式-->
{{msg}}
</div>
</body>
<!--①引入vue的脚本库文件-->
<script src="js/vue.js"></script>
<!--③创建Vue对象,并和div容器绑定-->
<script>
var vue = new Vue({
el: "#app",
data: {
msg: "helloworld"
}
});
</script>
</html>
Vue入门案例
语法
<script>
//创建vue对象
var vue = new Vue({
el: "id选择器",//绑定vue容器
data: {//声明变量
变量名: 值,
变量名2:值2,
...
},
methods:{//声明函数
函数名(形参列表){
功能代码;
return 结果;
},
函数名2(形参列表){
功能代码;
return 结果;
}
},
watch:{
},
//钩子函数...
});
</script>
Vue指令介绍
-
概述
- 是带有 v- 前缀的特殊属性,不同指令具有不同含义。例如 v-html,v-if,v-for。
-
常用指令
- v-html、v-bind、v-if、v-show、v-for、v-on、v-model
Vue文本操作
-
概述
- 使用v-html和v-text指令,和innerHTML/innerText类似
-
v-html
- 添加文本,会解析html标签
-
v-text
- 添加文本,不会解析html标签
-
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue文本操作</title>
</head>
<body>
<!--②声明Vue容器-->
<div id="app">
<span v-html="msg"></span><br>
<span v-text="msg"></span><br>
<span>{{msg}}</span><br>
</div>
</body>
<!--①引入vue.js-->
<script src="js/vue.js"></script>
<!--③创建Vue对象-->
<script>
var vue = new Vue({
el: "#app",
data: {
msg: "<font color='red'>hello world</font>"
}
})
</script>
</html>
Vue事件处理
-
概述
- 使用"v-on:事件名"来对事件进行处理,也可以简写成"@事件名"
-
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue事件处理</title>
</head>
<body>
<div id="app">
<button v-on:click="fn1()">按钮1</button>
<button @click="fn2()">按钮2</button>
<input type="text" @change="fn3()">
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vue = new Vue({
el: "#app",
data: {},
methods: {
fn1(){
console.log("fn1...");
},
fn2(){
console.log("fn2...");
},
fn3(){
console.log("fn3...");
}
}
})
</script>
</html>
Vue事件修饰符
-
概述
- .stop : 禁止事件冒泡
-
.prevent :禁止组件原有的事件触发
-
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue事件修饰符</title>
</head>
<body>
<div id="app">
<div @click="fn1()">
<button @click.stop="fn2()">按钮</button>
</div>
<!--当点击a标签,只触发函数fn3,不跳转index.html-->
<a href="index.html" @click.prevent="fn3()">超链接</a>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vue = new Vue({
el: "#app",
data: {},
methods: {
fn1(){
console.log("div点击了~~~~");
},
fn2(){
console.log("button点击了~~~~");
},
fn3(){
console.log("a点击了~~~~");
}
}
})
</script>
</html>
Vue双向绑定
-
概述
-
使用v-model指令来达到双向绑定效果
-
单向绑定
-
-
数据,只可以从vue对象到vue容器中
-
双向绑定
- 数据,既可以从vue对象到vue容器中, 也可以从vue容器到vue对象中。
-
需求
- 将输入框中的值动态显示到span标签中
-
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue双向绑定</title>
</head>
<body>
<div id="app">
<input type="text" v-model="content"><br>
<span v-text="content"></span>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vue = new Vue({
el: "#app",
data: {
content: "aaa"
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue双向绑定</title>
</head>
<body>
<div id="app">
爱好:
<input type="checkbox" value="lol" v-model="hobbys">lol
<input type="checkbox" value="king" v-model="hobbys">王者荣耀
<input type="checkbox" value="java" v-model="hobbys">java
<input type="checkbox" value="basketball" v-model="hobbys">篮球
<br>
<span v-text="hobbys"></span>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vue = new Vue({
el: "#app",
data: {
hobbys:[
"java"
]
}
})
</script>
</html>
Vue列表渲染
-
概述
- 使用v-for指令来进行列表渲染
-
语法
<li v-for="item in 集合/数组"> </li>
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue列表渲染</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(user,index) in userList">
{{index}}
<span v-text="user.id"></span>
<span v-text="user.name"></span>
<span v-text="user.age"></span>
</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script >
var vue = new Vue({
el:"#app",
data:{
userList : [
{
id : 1,
name : "张三",
age : 18
},
{
id : 2,
name : "李四",
age : 19
}
]
}
})
</script>
</html>