Javaweb学习笔记day03---Vue
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">
{{msg}}
div>
body>
<script src="js/vue.js">script>
<script>
var vue = new Vue({
el: "#app",
data: {
msg: "helloworld"
}
});
script>
html>
Vue入门案例
语法
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>
<div id="app">
<span v-html="msg">span><br>
<span v-text="msg">span><br>
<span>{{msg}}span><br>
div>
body>
<script src="js/vue.js">script>
<script>
var vue = new Vue({
el: "#app",
data: {
msg: "hello world"
}
})
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()">按钮1button>
<button @click="fn2()">按钮2button>
<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 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指令来进行列表渲染
-
语法
代码实现
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>