入门程序
1、在表单控件中使用v-model=“” 可实现双向绑定
2、vue指令都是 v-xxx格式的
<!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>Document</title>
</head>
<body>
<div id="app">
<p>{{num}}名女神为之着迷</p>
<!-- v-model只能绑定表单控件,实现双向绑定 -->
<!-- vue指令 v-xxxx -->
<input type="text" v-model="num">
</div>
<!-- 1.引入vue.js -->
<script src="./js/vue.js"></script>
<!-- 2.使用vue -->
<script>
// 2.1 创建vue实例 -- MVVM 中的 VM viewmodel
var vm = new Vue({
el : '#app', // 挂载元素，当前vue实例控制的区域
data : { // 当前vue实例的数据，-- MVVM 中的 M
num : 0
}
})
</script>
</body>
</html>
image.png
image.png
v-cloak
当网速过慢时，加载页面可能会出现，下图情况
image.png
但是将其设置成v-cloak后，要么显示应有的值，要么不显示
<!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>Document</title>
<style>
/* 处理数据渲染时，因网速过慢，到最后用户可以看见类似{{msg}}的数据 */
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<p v-cloak>{{msg}}</p>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el : "#app",
data : {
msg : '测试信息'
},
})
</script>
</body>
</html>
v-text和v-html
v-text：将当前数据按文本形式解析，若数据是标签格式，显示标签。
v-html：将当前数据当成html代码去解析，显示的是html代码中的内容
<!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>Document</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<!-- v-text 是将数据当做 text 文本去解析，与{{}}效果一样 -->
<p v-text="msg"></p>
<!-- v-html是将数据当做 html 代码去解析 -->
<p v-html="msg"></p>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el : "#app",
data : {
msg : '<span style="color:red;">hello Vue!!!</span>'
},
})
</script>
</body>
</html>
image.png
给属性或给自定义属性绑定参数v-bind：v-bind:title="title"可以简写成:title="title"
<div id="app">
<p v-html="msg" v-bind:title="title"></p>
<!-- v-bind 缩写 : -->
<p v-html="msg" :title="title"></p>
<p v-html="msg" :title="'title'"></p>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el : "#app",
data : {
msg : '测试信息',
title : '绑定参数信息'
},
})
</script>
image.png
绑定事件 v-on:event可以简写成@event
<div id="app">
<!-- v-on:event 绑定事件 -->
<button v-on:click="showNum">按钮1</button>
<button v-on:click="showNum2">按钮2</button>
<!-- 用 @event 缩写 -->
<button @click="showNum">按钮3</button>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el : "#app",
data : {},
methods: {
showNum(){
console.log(1);
},
showNum2(){
console.log(2);
},
},
})
</script>
image.png
跑马灯练习:注意要使用Lambda 表达式：()=>
<div id="app">
<h4 v-html="msg"></h4>
<button @click="lang">浪起来</button>
<button @click="stop">别浪</button>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el : "#app",
data : {
msg : '猥琐发育，别浪~~~~',
intervalId : null
},
methods: {
lang(){
// 防止定时器冲突
if(this.intervalId != null){
return;
}
// 操作msg
this.intervalId = setInterval(()=> {
var first = this.msg.substring(0,1);
var rest = this.msg.substring(1);
this.msg = rest + first;
},500)
},
stop(){
// 清除定时器
clearInterval(this.intervalId);
this.intervalId = null;
}
},
})
</script>
事件修饰符：事件具有穿透性
capture 以捕获模式处理事件由外向内,若不设置capture，默认由内向外
self 直接点击当前元素才触发
once只生效一次
下面两个是重点
- stop 阻止事件冒泡
- prevent 阻止默认事件
<!-- <div id="app" @click.capture="showBoxInfo"> -->
<!-- self 直接点击当前元素才触发-->
<div id="app" @click.self="showBoxInfo">
<!-- prevent 阻止默认事件 -->
<a href="https://www.baidu.com" @click.prevent="showInfo">GO Baidu</a>
<!-- stop 阻止事件冒泡 -->
<button @click.stop="showBtnInfo">阻止冒泡</button>
<!-- once只生效一次 -->
<button @click.once="showBtnInfo">self</button>
</div>
<!--
capture 以捕获模式处理事件由外向内,若不设置capture，默认由内向外
self 直接点击当前元素才触发
once只生效一次
stop 阻止事件冒泡
prevent 阻止默认事件
-->
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el : "#app",
data : {},
methods: {
showInfo(){
console.log('测试信息');
},
showBtnInfo(){
console.log('按钮信息');
},
showBoxInfo(){
console.log('div信息');
}
},
})
</script>
事件的双向绑定
<div id="app">
<input type="text" v-model="num">
<h3>java2班同学 -- {{num}} 人</h3>
<input type="checkbox" :checked="flag">
<button @click="toggle">切换</button>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el : "#app",
data : {
num : 0,
flag : true,
},
methods: {
toggle(){
this.flag = !this.flag;
},
},
})
</script>
简易计算器
<div id="app">
<input type="text" v-model="firNum">
<select name="" id="" v-model="yunsuan">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">x</option>
<option value="/">÷</option>
</select>
<input type="text" v-model="secNum">
<button @click="result">=</button>
<input type="text" v-model="lastNum">
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
firNum: 0,
secNum: 0,
lastNum: 0,
yunsuan: '+'
},
methods: {
result() {
switch (this.yunsuan) {
case '+':
this.lastNum = parseFloat(this.firNum) + parseFloat(this.secNum);
break;
case '-':
this.lastNum = parseFloat(this.firNum) - parseFloat(this.secNum);
break;
case '*':
this.lastNum = parseFloat(this.firNum) * parseFloat(this.secNum);
break;
case '/':
this.lastNum =parseFloat(this.firNum) / parseFloat(this.secNum);
break;
}
}
},
})
</script>
可绑定style中的class赋予样式，也可以通过js设置样式
<!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>Document</title>
<style>
.fontred{
color:red;
}
.fsize{
font-size: 16px;
}
.fontgreen{
color:green;
}
</style>
</head>
<body>
<div id="app">
<h2 class="fontred fsize">class赋予样式1</h2>
<!-- 绑定数据 -->
<h2 :class="fred">class赋予样式2</h2>
<!-- 绑定一个数组 -->
<h2 :class="['fontred','fsize']">class赋予样式3</h2>
<!-- 绑定一个对象 -->
<h3 :class="{'fontgreen' : true,'fsize' : true}">class赋予样式4</h3>
<h3 :class="styleObj">class赋予样式5</h3>
<!-- 绑定行间样式 -->
<h3 :style="styleObj2">class赋予样式6</h3>
<h3 :style="{'color':'#d45'}">class赋予样式7</h3>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el : "#app",
data : {
fred : 'fontred',
styleObj : {'fontgreen' : true,'fsize' : true},
styleObj2 : {'color' : '#fc9'},
},
})
</script>
</body>
</html>
v-for循环
<div id="app">
<ul>
<!-- 遍历单个对象属性 item是对属性值，index是对象属性名 -->
<!-- <li v-for="(item,index) in user" :key="index" v-html="index+','+item"></li> -->
<!-- 遍历数组 -->
<!-- <li v-for="(item, index) in arr" :key="index">{{item}},{{index}}</li> -->
<!-- 遍历对象数组 -->
<li v-for="(item, index) in list" :key="item.id">{{item.id}},{{item.name}},{{item.age}},{{item.birthday}}</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el : "#app",
data : {
user : {
id : '1001',
name : '张三',
age : 33,
birthday : new Date(),
},
arr : [6,7,8,9,0],
list : [
{id:1001,name:'张三',age:331,birthday : new Date()},
{id:1002,name:'李四',age:332,birthday : new Date()},
{id:1003,name:'王五',age:333,birthday : new Date()},
{id:1004,name:'赵六',age:334,birthday : new Date()},
]
},
})
</script>
添加成员练习
<!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>Document</title>
</head>
<body>
<div id="app">
<input type="text" placeholder="用户ID" v-model="id">
<input type="text" placeholder="用户昵称" v-model="nickname">
<button @click="insert">添加</button>
<br> <br>
<table border="2" cellspacing="0" cellpadding="10">
<thead>
<tr>
<th>用户ID</th>
<th>用户昵称</th>
<th>日期</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list" :key="index">
<td>{{item.id}}</td>
<td>{{item.nickname}}</td>
<td>{{item.birthday}}</td>
</tr>
</tbody>
</table>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el : "#app",
data : {
id:'',
nickname:'',
list:[]
},
methods:{
insert(){
var obj={'id':this.id,'nickname':this.nickname,'birthday' : new Date()}
this.list.push(obj);
}
}
})
</script>
</body>
</html>
v-show和v-if
v-show：经常切换显示或消失用v-show （频繁的渲染消耗）
v-if：不经常改变，切换的内容（频繁的创建消耗）
当设置不显示的时候，v-show设置的标签显示display：none，而v-if干脆在控制台就找不到。
<div id="app">
<!-- 不经常改变，切换的内容（频繁的创建消耗） -->
<h1 v-if="flag">这是v-if内容</h1>
<!-- 经常切换显示或消失用v-show （频繁的渲染消耗）-->
<h1 v-show="flag">这事v-show的内容</h1>
<h1 v-if="flag">管理员</h1>
<h1 v-else>普通用户</h1>
<h3 v-if="score>80">优秀</h3>
<h3 v-else-if="score<60">不及格</h3>
<h3 v-else>及格</h3>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el : "#app",
data : {
flag:true,
score:88
},
})
</script>
image.png
网友评论