一 V u e 基 础 一 Vue基础 一Vue基础
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
视频教程：B站、网易云课堂、腾讯课堂
代码地址：Gitee、Github
存储地址：
百度云-提取码：
Google云
- 1.VSCode介绍
- 2.Vue体验
- 3.v-bind属性绑定
- 4.VSCode添加自定义代码片段
- 5.Class和Style属性绑定
- 6.执行JavaScipt表达式
- 7.v-if条件判断
- 8.v-show和v-if
- 9.v-for循环数组和对象
- 10.v-for状态保持
- 11.触发视图更新
- 12.触发视图更新补充
- 13.事件绑定
- 14.计算属性
- 15.监听属性
- 16.表单输入绑定
- 17.自定义组件基本使用
- 18.组件中添加属性
- 19.组件中自定义事件
- 20.组件中自定义v-model行为
- 21.自定义组件-插槽
- 22.自定义组件-命名插槽
- 23.自定义组件-插槽作用域
- 24.Vue生命周期函数-创建阶段
- 25.Vue生命周期函数-运行阶段
- 26.Vue生命周期函数-销毁阶段
- 27.Vue过滤器
- 28.图书管理系统（1）
- 29.图书管理系统（2）
VSCode介绍
Vue体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./js/vue.js"></script>
<title>01Vue</title>
</head>
<body>
<div id = "app">
<p>{{username}}</p>
<p>{{greet()}}</p>
<button @click="username='课堂'">change</button>
</div>
<script>
new Vue({
el:"#app",
data:{
username:"hello major"
},
methods:{
greet(){
return "你好"
}
}
})
</script>
</body>
</html>
v-bind属性绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02-bind</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id ='app'>
<p v-once>{{username}}</p> <!--v-once 只读取一次，以后不发生改变-->
<button @click="username='ke'">change</button>
<div v-html="code"></div> <!-- 渲染成html-->
<img v-bind:src="logo" alt=""><!--读取data的属性-->
<!-- 另一种：<img :src="logo" alt="">-->
</div>
<script>
new Vue({
el:"#app", // 作用范围
data:{
username:"hello major",
code:"<a href='https://baidu.com'>baidu.com</a>",
logo:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
},
methods:{
}
})
</script>
</body>
</html>
VSCode添加自定义代码片段
在这里插入代码片
Class和Style属性绑定
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='./js/vue.js'></script>
<title></title>
<style>
.title{
font-size: 30px;
color: red;
}
.main-title{
font-weight: 800;
}
</style>
</head>
<body>
<div id='app'>
<!-- 1.通过数组 <p v-bind：class="[pclass1,pclass2]">l love you</p>-->
<!--2.通过对象-->
<p :class="{title:true,'main-title':strong}">I love you! </p>
<button @click="strong=true">文字加粗</button>
<!--1.通过对象-->
<p :style="{'background-color':backgroudColor}">我爱你！</p>
<p :style="{backgroundColor:backgroudColor}">我爱你！</p>
<p :style="pStyle">我爱你！</p>
<!--1.通过数组-->
<p :style="[pStyle,pStyle2]">我爱你！</p>
</div>
<script>
new Vue({
el:'#app',
data:{
pclass1:"title",
pclass2:"main-title",
strong:false,
backgroudColor:"red",
pStyle:{
'background-color':'blue',
'font-size':"30px"
},
pStyle2:{
"border-bootom":"2px solid #000"
},
}
})
</script>
</body>
</html>
执行JavaScipt表达式
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='./js/vue.js'></script>
<title>test</title>
</head>
<body>
<div id='app'>
<div :style="{color:danger?'red':'black'}"> <!--三目运算符-->
hello Major!{{message.split(" ").reverse().join(" ") }}
</div>
<div>
{{greet()}} <!--函数调用-->
</div>
<div>
{{!isAdult}} <!--变量运算-->
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
// 条件？成立值：不成立值
danger:true,
message:"hello China",
isAdult:true
},
methods:{
greet(){
return "早上好！Major_s"
}
}
})
</script>
</body>
</html>
v-if条件判断
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='./js/vue.js'></script>
<title>if</title>
</head>
<body>
<div id='app'>
<!-- 注释快捷键 alt + shift + a -->
<!-- <p v-if="weather=='sun'">去公园</p>
<p v-else-if="weather =='rain'">去看电影</p>
<p v-else>待在家里</p>
<template v-if="age<18">
<p>数学多少分</p>
<p>英语多少分</p>
<p>语文多少分</p>
</template>
<template v-else-if="age>=18&&age<25">
<p>女朋友有了吗？</p></p>
<p>奖学金拿了吗？</p>
</template> -->
<template v-if="loginType=='username'">
<label >用户名：</label>
<input type="text" name="username" placeholder="用户名" key="username" >
</template>
<template v-else-if="loginType=='email'">
<label >邮箱：</label>
<input type="text" name="username" placeholder="邮箱" key ="email"> <!-- key可以阻止重用 -->
</template>
<button @click="changeLoginType">change</button>
</div>
<script>
new Vue({
el:'#app',
data:{
weather:"rain",
age:20,
loginType:"username",
},
methods:{
changeLoginType(){
this.loginType = this.loginType=='username'?"email":"username"
}
}
})
</script>
</body>
</html>
v-show和v-if
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='./js/vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<div v-show="loginType=='username'">
<label >用户名：</label>
<input type="text" name="username" placeholder="用户名" key="username" >
</div>
<div v-show="loginType=='email'">
<label >邮箱：</label>
<input type="text" name="username" placeholder="邮箱" key ="email"> <!-- key可以阻止重用 -->
</div>
<button @click="changeLoginType">change</button>
<!-- 频繁切换可考虑v-show :一次性把所有的渲染出来，v-show不可用于template标签-->
<!-- v-if 是真正的条件渲染，只渲染符合条件的 -->
</div>
<script>
new Vue({
el:'#app',
data:{
loginType:"username",
},
methods:{
changeLoginType(){
this.loginType = this.loginType=='username'?"email":"username"
}
}
})
</script>
</body>
</html>
v-for循环数组和对象
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='./js/vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<table>
<thead>
<tr>
<th>索引</th>
<th>标题</th>
<th>作者</th>
</tr>
</thead>
<tbody>
<tr v-for="(book,index) in books"><!-- book index 不能互换，前面永远是对象 后面永远是index --> <!-- 数组循环 -->
<td>{{index+1}}</td>
<td>{{book.title}}</td>
<td>{{book.author}}</td>
</tr>
</tbody>
</table>
<div v-for="(value,key) in person">{{key}}:{{value}}</div> <!-- 对象循环 -->
</div>
<script>
new Vue({
el:'#app',
data:{
books:[{
'title':'三国演义',
'author':'罗贯中'
},{
'title':'红楼梦',
'author':'施耐庵'
},
],
person:{
"username":"Major",
"age":22,
"homepage":"https://www.baidu.com/"
},
}
})
</script>
</body>
</html>
v-for状态保持
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='./js/vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<div v-for="(book,index) in books" :key="book.title"><!-- key 不要用index -->
<label>标题：</label>
<input type="text" :placeholder="book.title" >
</div>
<button @click="changeBookSort">change</button>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
books:[{
'title':'三国演义',
'author':'罗贯中'
},{
'title':'红楼梦',
'author':'施耐庵'
},{
'title':'水浒传',
'author':'untitled'
},{
'title':'西游记',
'author':'吴承恩'
},
],
},
methods:{
changeBookSort(){
this.books.sort(function (a,b){
return Math.random(0,1)-0.5
})
}
}
})
</script>
</body>
</html>
触发视图更新
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='./js/vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<ul>
<li v-for="hero in heros" :key="hero">
{{hero}}
</li>
</ul>
<button @click="update">change</button>
</div>
<script>
new Vue({
el:'#app',
data:{
heros:['钢铁侠',"蜘蛛侠","美国队长"],
user:{"username":"Major"}
},
methods:{
update() {
// this.heros =[]
// this.heros.push('xx')
// this.user = XPathExpression
// this.user.username='xx'
//this.heros =['major']
// this.heros.push('major')
// pop 删除最后一个元素
// shift删除数组第一个元素
// unshift 在第一个位置添加元素
// splice(index,howmany,item1,item2,...itemhowmany):向数组中添加或者删除或者替换元素
// 向books第0个位置添加元素
// this.books.splice(0,0,"major")
// 下标从0开始，删除2个元素
// this.books.splice(0,2)
// 从下标0开始，替换2个元素
// this.books.splice(0,2,'major1','major2')
// concat filter等需要重新赋值
// this.heros = this.heros.concat(['major1','major2'])
}
}
})
</script>
</body>
</html>
触发视图更新补充
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='./js/vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<ul>
<li v-for="hero in heros" :key="hero">
{{hero}}
</li>
</ul>
<div v-for="(value,key) in user">
{{key}}:{{value}}
</div>
<button @click="update">change</button>
<button @click="updateArray">change1</button>
<button @click="updateObject">change2</button>
</div>
<script>
new Vue({
el:'#app',
data:{
heros:['钢铁侠',"蜘蛛侠","美国队长"],
user:{"username":"Major"}
},
methods:{
update() {
// this.heros =[]
// this.heros.push('xx')
// this.user = XPathExpression
// this.user.username='xx'
//this.heros =['major']
// this.heros.push('major')
// pop 删除最后一个元素
// shift删除数组第一个元素
// unshift 在第一个位置添加元素
// splice(index,howmany,item1,item2,...itemhowmany):向数组中添加或者删除或者替换元素
// 向books第0个位置添加元素
// this.books.splice(0,0,"major")
// 下标从0开始，删除2个元素
// this.books.splice(0,2)
// 从下标0开始，替换2个元素
// this.books.splice(0,2,'major1','major2')
// concat filter等需要重新赋值
// this.heros = this.heros.concat(['major1','major2'])
},
updateArray(){
Vue.set(this.heros,0,'major')
},
updateObject(){
this.user.username="hi major"
Vue.set(this.user,'age',18)
}
}
})
</script>
</body>
</html>
事件绑定
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='./js/vue.js'></script>
<style>
.outer{
width: 300px;
height: 300px;
background: pink;
}
.mid{
width: 200px;
height: 200px;
background: gray;
}
.inner{
width: 100px;
height: 100px;
background: blue;
}
</style>
<title></title>
</head>
<body>
<div id='app'>
<ul>
<li v-for="book in books":key="book" v-on:click="liClick(book)">
{{book}}
</li>
</ul>
<a href="https://www.baidu.com/" @click="gotoWebsite">baidu不要</a>
<a href="https://www.baidu.com/" @click.prevent="gotoWebsite2">baidu不要2</a>
<div class="outer" @click.capture="outerClick"> <!-- 捕获 -->
<div class="mid" @click="midClick">
<div class="inner" @click.stop="innerClick"></div> <!-- stop 停止冒泡 冒泡只在子孙元素 -->
</div>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
books:['三国演义','水浒传']
},
methods:{
liClick(value){
console.log(value);
},
gotoWebsite(event){
event.preventDefault()
window.location = "https://www.360.cn/"
},
gotoWebsite2(){
//event.preventDefault()
window.location = "https://www.360.cn/"
},
outerClick(){
console.log("外部元素==");
},
midClick(){
console.log("中间元素==");
},
innerClick(){
console.log("内部元素==");
},
}
})
</script>
</body>
</html>
计算属性
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='./js/vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<!-- ctrl + Enter 跳下一行 -->
<!-- ctrl + shift + Enter 跳下一行 -->
<div>
<label >宽：</label>
<input type="text" v-model:value="width">
</div>
<div>
<label >高：</label>
<input type="text" v-model:value="height">
</div>
<div>面积：{{area}}</div>
<div>
<label>省：</label>
<input type="text" v-model:value="province">
</div>
<div>
<label>市：</label>
<input type="text" v-model:value="city">
</div>
<div>
<label>区：</label>
<input type="text" v-model:value="district">
</div>
<div>
<label>详细地址：</label>
<input type="text" v-model:value="address">
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
width:0,
height:0,
province:"",
city:"",
district:"",
},
computed:{
area(){
return this.width * this.height
},
address:{
get(){
let result =""
if(this.province){
result += this.province + "省"
}
if(this.city){
result += this.city + "市"
}
if(this.district){
result += this.district + "区"
}
return result
},
set(value){
let result = value.split(/省|市|区/)
if(result && result.length >0){
this.province = result[0]
}
if(result && result.length >1){
this.city = result[1]
}
if(result && result.length >2){
this.district = result[2]
}
}
}
}
})
</script>
</body>
</html>
监听属性
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='./js/vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<div>
<input type="text" v-model:value="keyword">
</div>
<div>
<span>推荐：
{{result}}
</span>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
keyword:"",
result:"",
},
watch:{
keyword(newValue,oldValue){
this.result ="加载中。。。。"
setTimeout(()=>{
this.result="推荐结果："+newValue
},1000);
}
}
})
</script>
</body>
</html>
表单输入绑定
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='./js/vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<input type="checkbox" value="Jack----1" v-model="checkedNames">
<label >Jack</label>
<input type="checkbox" value="Major" v-model="checkedNames">
<label >Major</label>
<input type="checkbox" value="Major_s" v-model="checkedNames">
<label >Major_s</label>
<br>
<span>{{checkedNames}}</span>
<br>
<div>
<input type="radio" value="1" v-model="gender">
<label >男</label>
<br>
<input type="radio" value="2" v-model="gender">
<label >女</label>
<br>
<span>性别：{{gender}}</span>
</div>
<br>
<div>
<select v-model="selected">
<option disabled value="">请选择</option>
<option value="A1">A</option>
<option value="B2">B</option>
<option value="C3">C</option>
</select>
<span>Selected:{{selected}}</span>
</div>
<div>
<input type="text" v-model.lazy="message">
<div> 您输入的值为：{{message}}</div>
</div>
<div>
<input type="text" v-model.number="message">
<div> 您输入的值为：{{message}}</div>
</div>
<div>
<input type="text" v-model.trim="message">
<div> 您输入的值为：{{message}}</div>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
message:"",
checkedNames:[],
gender:"",
selected:"",
},
})
</script>
</body>
</html>
自定义组件基本使用
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='./js/vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<button-count>test</button-count>
</div>
<script>
Vue.component("button-count",{
template:"<button @click='count+=1'>点击了{{count}}次</button>",
data:function(){ /* data 必须是函数 */
return {
count:0
}
}
})
new Vue({
el:'#app',
data:{
},
})
</script>
</body>
</html>
组件中添加属性
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='./js/vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<blog-list :blogs="blogs"></blog-list>
</div>
<script>
Vue.component("blog-list",{
//props:['blogs'],
props:{
blogs:{
type:Array,
required:true
}
},
template:` // 只能有一个根标签
<table>
<thead>
<tr>
<th>序号</th>
<th>标题</th>
</tr>
</thead>
<tbody>
<tr v-for="(blog,index) in blogs">
<td>{{index}}</td>
<td>{{blog.title}}</td>
</tr>
</tbody>
</table>
`
})
new Vue({
el:'#app',
data:{
blogs:[{
title:"Major",
content:"good"
},{
title:"Vue",
content:"yyy"
}]
},
})
</script>
</body>
</html>
组件中自定义事件
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='./js/vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<blog-item v-for="blog in blogs" :blog="blog" @check-changed="checkChanged"></blog-item>
<h1>选中的博客：</h1>
<div v-for="blog in selected_blogs">
{{blog.title}}
</div>
</div>
<script>
Vue.component("blog-item",{
props:['blog'],
template:`
<div>
<span>{{blog.title}}</span>
<input type="checkbox" @click="onCheck">
</div>
`,
methods:{
onCheck(){
this.$emit("check-changed",this.blog)
}
}
})
new Vue({
el:'#app',
data:{
blogs:[
{
title:"Vue",
id:1,
},
{
title:"python",
id:2,
},
],
selected_blogs:[]
},
methods:{
checkChanged(blog){
// console.log(blog);
let index= this.selected_blogs.indexOf(blog)
if(index>=0){
this.selected_blogs.splice(index,1)
}else{
this.selected_blogs.push(blog)
}
}
}
})
</script>
</body>
</html>
组件中自定义v-model行为
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='./js/vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<Stepper v-model="goods_count"></Stepper>
</div>
<script>
Vue.component("Stepper",{
props:['count'],
model:{
event:"count-changed",
prop: "count"
},
template:`
<div>
<button @click="substract">-</button>
<span>{{count}}</span>
<button @click="add">+</button>
</div>
`,
methods:{
substract(){
this.$emit("count-changed",this.count-1)
},
add(){
this.$emit("count-changed",this.count+1)
}
}
})
new Vue({
el:'#app',
data:{
goods_count:0
},
watch:{
goods_count:function(newValue,oldValue){
console.log("--------------") ;
console.log(newValue);
console.log("--------------") ;
}
}
})
</script>
</body>
</html>
自定义组件-插槽
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='./js/vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<navigation-link url="https://ww.baidu.com/">百度</navigation-link>
</div>
<script>
Vue.component(
"navigation-link",{
props:['url'],
template:`
<a :href="url">
<slot>默认值</slot>
</a>
`
}
)
new Vue({
el:'#app',
data:{
},
})
</script>
</body>
</html>
自定义组件-命名插槽
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='./js/vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<container>
<template v-slot:header>这是header</template>
<template v-slot:body>这是body</template>
<template v-slot:footer>这是footer</template>
</container>
</div>
<script>
Vue.component("container",{
template:`
<div class="container">
<div>
<slot name="header"></slot>
</div>
<div>
<slot name="body"></slot>
</div>
<div>
<slot name="footer"></slot>
</div>
</div>
`
})
new Vue({
el:'#app',
data:{
},
})
</script>
</body>
</html>
自定义组件-插槽作用域
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='./js/vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<container>
<template v-slot:header="headerProps">这是头部区域{{headerProps.navs}}</template>
<template v-slot:footer="footerProps">这是底部区域{{footerProps.address}}</template>
</container>
</div>
<script>
Vue.component("container",{
template:`
<div>
<div class="header">
<slot name = "header" :navs="navs"></slot>
</div>
<div class="footer">
<slot name = "footer" :address="address" :aboutus="aboutus"></slot>
</div>
</div>
`,
data:function(){
return {
"address":"公司地址",
"aboutus":"关于我们",
navs:['网络设置','路由设置','设备管理']
}
}
})
new Vue({
el:'#app',
data:{
},
})
</script>
</body>
</html>
Vue生命周期函数-创建阶段
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='./js/vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<p id="username">{{username}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
username:"major_s"
},
methods:{
greet(){
alert("hello major!")
}
},
/* beforeCreate(){
console.log("==============");
console.log("beforeCreate");
console.log(this.username);
console.log(this.greet);
}, */
/* created(){
console.log("==============");
console.log("created");
console.log(this.username);
console.log(this.greet);
}, */
beforeMount(){
console.log("==============");
console.log("beforeMount");
console.log(document.getElementById("username").innerText);
},
mounted(){
console.log("==============");
console.log("mounted");
console.log(document.getElementById("username").innerText);
},
})
</script>
</body>
</html>
Vue生命周期函数-运行阶段
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='./js/vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<p id="username">{{username}}</p>
<input type="text" v-model="username">
</div>
<script>
new Vue({
el:'#app',
data:{
username:"major_s"
},
methods:{
beforeUpdate(){
console.log("==============");
console.log("beforeUpdate");
console.log(this.username);
console.log(document.getElementById("username").innerText);
},
updated(){
console.log("==============");
console.log("updated");
console.log(this.username);
console.log(document.getElementById("username").innerText);
}
}
})
</script>
</body>
</html>
Vue生命周期函数-销毁阶段
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='./js/vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<error-view :message="message" v-if="message"></error-view>
<button @click="message=''">clear_message</button>
</div>
<script>
Vue.component("error-view",{
prop:['message'],
data(){
return {
hello:"你好！"
}
},
template:`
<p style="color:red">{{message}}</p>
`,
beforeDestory(){
console.log("==============");
console.log("beforeDestory");
console.log(this.hello);
},
destoryed(){
console.log("==============");
console.log("destoryed");
console.log(this.hello)
}
})
new Vue({
el:'#app',
data:{
message:"我是错误信息！"
},
})
</script>
</body>
</html>
Vue过滤器
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='./js/vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<p>{{username | strip}}</p>
</div>
<script>
Vue.filter("strip",function(value){
return value.replace(" ","-")
}
)
new Vue({
el:'#app',
data:{
username:"hi Major"
},
})
</script>
</body>
</html>
图书管理系统（1）
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='./js/vue.js'></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>图书管理系统</title>
</head>
<body>
<div id='app'>
<div class="container">
<h1>图书管理系统</h1>
<form class="form-inline">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入图书名称" v-model="adding_book.name">
</div>
<div class="form-group">
<label for="author">作者：</label>
<input type="text" class="form-control" id="author" placeholder="请输入作者" v-model="adding_book.author">
</div>
<div class="form-group">
<label for="price">价格</label>
<input type="number" class="form-control" id="price" placeholder="请输入价格" v-model="adding_book.price">
</div>
<button type="submit" class="btn btn-primary" @click.prevent="add">add</button>
</form>
<form class="form-inline">
<div class="form-group">
<label for="keywords">搜索关键字</label>
<input type="text" class="form-control" id="keywords" placeholder="请输入关键字" v-model="keywords">
</div>
</form>
<table class="table">
<thead>
<tr>
<th>序号</th>
<th>名称</th>
<th>作者</th>
<th>价格</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(book,index) in book_result" :key="book.name">
<td>{{index+1}}</td>
<td>{{book.name}}</td>
<td>{{book.author}}</td>
<td>{{book.price}}</td>
<td>{{book.atime | timeFormat}}</td>
<td>
<button class="btn btn-xs btn-danger" @click="del(index)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
books:[{
"name":"三国演义","author":"罗贯中","price":98,"atime":new Date()},
{"name":"水浒传","author":"施耐庵","price":98,"atime":new Date()},
{ "name":"西游记","author":"吴承恩","price":98,"atime":new Date()},
{"name":"红楼梦","author":"曹雪芹","price":98,"atime":new Date()},
],
adding_book:{
name:"",
author:"",
price:0,
},
keywords:""
},
computed:{
book_result(){
const that = this;
if(this.keywords){
return this.books.filter(function(item){
if(item.name.indexOf(that.keywords)>=0){
return true
}else{
return false
}
})}else{
return this.books
}
}
},
methods:{
add(){
let book = JSON.parse(JSON.stringify(this.adding_book))
this.books.push(book)
this.adding_book={
name:"",
author:"",
price:0,
}
},
del(index){
this.books.splice(index,1)
}
},
filters:{
timeFormat: function(value){
value = new Date(value)
let year = value.getFullYear()
let month = value.getMonth() + 1
let day = value.getDate()
let hour = value.getHours()
let minute = value.getMinutes()
return `${year}-${month}-${day} ${hour}:${minute}`
}
}
})
</script>
</body>
</html>
图书管理系统（2）
在这里插入代码片
