文章目錄
PS：本文福利首發於公衆號「讓我遇見相似的靈魂」，獲取最新Vue教程資源 回覆關鍵字：Vue
左手代碼，右手吉他，這就是天下:如果有一天我遇見相似的靈魂 那它肯定是步履艱難 不被理解 喜黑怕光的。如果可以的話 讓我觸摸一下吧
它也一樣孤獨得太久。 不一樣的文藝青年，不一樣的程序猿。
Vue.js 快速上手精華梳理
初體驗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- app.message='hi bennyrhys' 可以到頁面的console檢驗-->
<div id="app" v-bind:title="title">
{{message}}
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'hello vue!',
title:'bennyrhys00'
}
})
</script>
</body>
</html>
條件指令
if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- app.message='hi bennyrhys' 可以到頁面的console檢驗-->
<div id="app">
<div v-if="flag">v-if 是移除元素</div>
<div v-show="flag">v-show 是display隱藏元素</div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
flag:'true'
}
})
</script>
</body>
</html>
循環指令
99乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- app.message='hi bennyrhys' 可以到頁面的console檢驗-->
<div id="app">
<table>
<tr v-for="i in num">
<td v-for="j in i">{{i}}*{{j}}={{i * j}}</td>
</tr>
</table>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
num:9
}
})
</script>
</body>
</html>
處理用戶輸入
消息翻轉v-on:click=""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- app.message='hi bennyrhys' 可以到頁面的console檢驗-->
<div id="app">
<div>{{message}}</div>
<button v-on:click="reseverMessage"></button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message: "bennyrhys"
},
methods:{
reseverMessage() {
// alert("hello")
this.message=this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
同步數據Input v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- app.message='hi bennyrhys' 可以到頁面的console檢驗-->
<div id="app">
<div>{{message}}</div>
<input type="text" v-model="message">
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:"bennyrhys"
}
})
</script>
</body>
</html>
組件初體驗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- app.message='hi bennyrhys' 可以到頁面的console檢驗-->
<div id="app">
直接付給變量<bennyrhys name="vue"></bennyrhys>
<!-- 如果是引用的hello變量，v-bind下邊data要定義-->
間接綁定變量<bennyrhys v-bind:name="hello"></bennyrhys>
</div>
<script>
Vue.component('bennyrhys',{
<!-- 聲明一個變量-->
props:['name'],
template:'<h1>hello {{name}}</h1>'
})
var app = new Vue({
el:'#app',
data:{
message:"bennyrhys",
hello:'vue1'
}
})
</script>
</body>
</html>
實例
其實就是對象
生命週期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- app.message='hi bennyrhys' 可以到頁面的console檢驗-->
<div id="app">
<div>{{a}}</div>
</div>
<script>
var data = {a : 1, b : null}
// 情況2：凍結data數據，導致後期更改無法影響視圖【只讀】
// Object.freeze(data)
var app = new Vue({
el:'#app',
data:data,
// 生命週期方法-創建vue時 Vue1.x用created多，現在Mounted初始化數據用的多
created() {
console.log("create init")
}
})
console.log(data.a == app.a) //true
data.a = 99
console.log(app.a) // 99
app.a = 100
console.log(data.a) //100 【雙向綁定】
// 情況1：後引入的屬性【但是後來加進的數據不會影響視圖的更新。可以先在外面初始化b:null】
data.b = 18
console.log(app.b)
// 使用$獲取
console.log(app.$el == document.getElementById("app")) //true
console.log(app.$data == data) //true
</script>
</body>
</html>
模板語法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- app.message='hi bennyrhys' 可以到頁面的console檢驗-->
<div id="app">
<!-- 變量直接插值可以使用{{}}-->
<div>{{a}}</div>
<!-- 如果給特性賦值,不用{{}}，要用v-bind:【簡寫:】 v-on:click【簡寫@】-->
<!-- 頁面測試app.enableBtn=false-->
<button v-bind:disabled="!enableBtn" @click="num++">按鈕</button>
<!-- 直接顯示html格式-->
<div v-html="a"></div>
<!-- 注意：表達式只能一個-->
<div>{{num>101 ? 'good' : num}}</div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
// 直接顯示的字符串
a : '<h1>hello 字符串</h1>',
b : null,
enableBtn: true,
num: 99
}
})
</script>
</body>
</html>
計算屬性
computed比methed方法多出緩存功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- computed和方法的區別，computed可以緩存，methed不行-->
<div>{{reseverMessage}}</div>
<!-- methed調用顯示和computed一樣-->
<!-- <div>{{reseverMessage()}}</div>-->
<!-- 通過computed的set進行賦值-->
<div>{{copyMessage}}</div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
// 頁面測試app.message='lalassss ss'
message : 'hello bennyrhys',
copyMessage: null
},
methods:{
/*reseverMessage() {
return this.message.split('').reverse().join('')
}*/
},
computed:{
//執行的是簡化的get
/* reseverMessage() {
return this.message.split('').reverse().join('')
}*/
// 完整的屬性
reseverMessage:{
get() {
// 注意會因methed方法同名報錯
return this.message.split('').reverse().join('');
},
// 網頁測試app.reseverMessage="343"
set(newVal) {
this.copyMessage=newVal
console.log("set:"+ newVal);
}
}
}
})
</script>
</body>
</html>
監聽器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- app.message='hi bennyrhys' 可以到頁面的console檢驗-->
<div id="app" v-bind:title="title">
<!-- 網頁測試app.firstName='li' app.lastName="si"-->
{{fullName}}
</div>
<script>
var app = new Vue({
el:'#app',
data:{
firstName:'zhang',
lastName:'san',
fullName:'zhang san'
},
/*computed: {
fullName() {
return this.firstName+" "+this.lastName;
}
}*/
// 用於網絡請求耗時長的異步、開銷很大操作，一般用computed本地變化就行
watch:{
firstName(val) {
this.fullName = val + ' ' + this.lastName;
},
lastName(val) {
this.fullName = this.firstName + ' ' + val;
}
}
})
</script>
</body>
</html>
Class綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- app.message='hi bennyrhys' 可以到頁面的console檢驗-->
<div id="app" v-bind:title="title">
<!-- 普通版-->
<div class="m1">{{msg}}</div>
<!-- 想控制樣式顯示或是隱藏，就用到class綁定【注意{},是單括號}】-->
<!-- 頁面測試app.flag=false，樣式消失
可以同時綁定多個class樣式 測試app.hasBorder=false
-->
<div v-bind:class="{m1:flag, m3:hasBorder }" class="m2">{{msg}}</div>
<!--樣式比較多，直接填寫定義好的對象-->
<div v-bind:class="classObj" class="m2">{{msg}}</div>
<!--定義樣式數組 -->
<div v-bind:class="[flag ? dm1 : '',dm3]">{{msg}}</div>
<!--化簡三目運算 -->
<div v-bind:class="[{m1:flag},dm3]">{{msg}}</div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
msg:'hello bennyrhys!',
flag:true,
hasBorder:true,
// 樣式定義比較多，給他封裝成對象
classObj: {
m1:true,
m3:true
},
// 定義數組
dm1:'m1',
dm3:'m3'
}
})
</script>
<style>
.m1{
font-weight: bold;
color: red;
}
.m2{
font-size: 20px;
}
.m3{
border: 1px solid #cccccc;
}
</style>
</body>
</html>
compted this.flag控制true false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主要測試computed常用</title>
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- app.message='hi bennyrhys' 可以到頁面的console檢驗-->
<div id="app" v-bind:title="title">
<!-- 普通版-->
<div class="m1">{{msg}}</div>
<!-- 想控制樣式顯示或是隱藏，就用到class綁定【注意{},是單括號}】-->
<!-- 頁面測試app.flag=false，樣式消失
可以同時綁定多個class樣式 測試app.hasBorder=false
-->
<div v-bind:class="{m1:flag, m3:hasBorder }" class="m2">{{msg}}</div>
<!--樣式比較多，直接填寫定義好的對象-->
<div v-bind:class="classObj" class="m2">{{msg}}</div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
msg:'hello bennyrhys!',
flag:true,
hasBorder:true,
},
computed: {
classObj() {
//測試撤銷樣式app.flag=false app.hasBorder=false
return{
m1:this.flag,
m3:this.hasBorder
}
}
}
})
</script>
<style>
.m1{
font-weight: bold;
color: red;
}
.m2{
font-size: 20px;
}
.m3{
border: 1px solid #cccccc;
}
</style>
</body>
</html>
Style綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主要測試computed常用</title>
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-bind:title="title">
<!-- 單{}， -->
<div v-bind:style="{color:fontColor, fontSize:fontSize+'px'}">{{msg}}</div>
<!--綁定對象 -->
<div v-bind:style="styleObj">{{msg}}</div>
<!--綁定數組 -->
<div v-bind:style="[styleObj,styleObj2]">{{msg}}</div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
msg:'hello bennyrhys!',
fontColor: 'red',
fontSize: 30,
// 定義成對象
styleObj: {
color: 'red',
fontSize: '30px'
},
// 數組
styleObj2: {
border: '1px solid #ccc'
}
}
})
</script>
<style>
.m1{
font-weight: bold;
color: red;
}
.m2{
font-size: 20px;
}
.m3{
border: 1px solid #cccccc;
}
</style>
</body>
</html>
條件渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-bind:title="title">
<!-- 條件渲染 根據變量控制，app.isShow=true-->
<div v-if="isShow">hello bennyrhys</div>
<!-- template不參與頁面渲染，但是能控制多條語句，同時顯示 測試app.isShow=true-->
<template v-if="isShow">
<p>hello</p>
<h1>bennyrhys</h1>
<span>version</span>
</template>
<!-- v-else-->
<div v-else>瑞新</div>
<!-- v-else-if 測試app.isShow=true app.gender=1-->
性別：
<div v-if="gender == 0">男</div>
<div v-else-if="gender == 1">女</div>
<div v-else>未知</div>
<!-- 渲染緩存複用【默認】 如果不想用默認的【用key區分】 測試app.loginType='email'-->
<template v-if="loginType == 'username'">
<label>用戶名</label>
<input type="text" placeholder="請輸入用戶名" key="username" >
</template>
<template v-else>
<label>郵箱地址</label>
<input type="text" placeholder="請輸入郵箱地址" key="email">
</template>
<!-- v-show【if是從dom中刪除，show是一直存在控制display顯示或隱藏】【不支持和template一起使用】-->
<div v-show="!isHide" >hello v-show</div>
<!-- 【總結：頻繁顯示隱藏show,偶爾if】-->
</div>
<script>
var app = new Vue({
el:'#app',
data:{
isShow:false,
gender:0,
loginType:'username',
isHide:false
}
})
</script>
</body>
</html>
列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-bind:title="title">
<!-- 遍歷數組 【注意key 】-->
<table>
<tr>
<td>索引</td>
<td>書名</td>
<td>作者</td>
</tr>
<tr v-for="(book, index) of books" v-bind:key="index">
<!-- 注意：in等價於of -->
<td>{{index}}</td>
<td>{{book.name}}</td>
<td>{{book.author}}</td>
</tr>
</table>
<!-- 遍歷對象元素 ()內元素排序：元素 key index 【注意key，循環渲染被認爲同一個div】-->
<div v-for="(s, k, i) in site" v-bind:key="i ">
{{s}}--{{k}}--{{i}}
</div>
<!-- 存在問題：數組無法響應式更新
測試存入，但頁面沒更新
app.books[4]={name:'故事新編',author:'魯迅'}
測試存入：調用變異方法，是js原有的vue封裝，內含了視圖更新
app.books.push({name:'故事新編',author:'魯迅'})
元素出棧：app.books.pop()
刪除元素：app.books.splice(0,1)表示從第0個開始，刪除一個
替換數組：非變異方法，不會改變原始數組【filter、concat、slice】
錯誤做法 app.books.concat({name:'故事新編',author:'魯迅'})
正確做法 app.books=app.books.concat({name:'故事新編',author:'魯迅'})
刪除替換元素：【參考官方set方法】
app.books.splice(0,1,{name:'故事新編',author:'魯迅'})
對象更新存在問題：
注意：提前定義元素，保證後期響應式更新
Vue.set(app.site,'ip','0.0.0.0')
app.$set(app.site,'ip','0.0.0.0')
直接寫是不會變的
-->
</div>
<script>
var app = new Vue({
el:'#app',
data:{
books:[
{
name:'三國演義',
author:'羅貫中'
},
{
name:'水滸傳',
author:'施耐庵'
},
{
name:'西遊記',
author:'吳承恩'
},
{
name:'紅樓夢',
author:'曹雪芹'
}
],
site:{
url:'www.996cloud.work',
name:'不才工作室',
author:'bennyrhys'
}
}
})
</script>
</body>
</html>
事件處理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-bind:title="title">
<div>{{counter}}</div>
<!-- @click="counter++"寫一個方法替代效果和++一樣-->
<input type="button" value="自增" @click="increment(2)">
<!-- 注意事件修飾符，按鍵修飾符-->
<input type="text" v-on:keydown.ctrl.enter="submit">
</div>
<script>
var app = new Vue({
el:'#app',
data:{
counter:0
},
methods:{
increment(step) {
this.counter = this.counter+step;
},
submit(){
console.log("submit")
}
}
})
</script>
</body>
</html>
表單輸入綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue01</title>
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-bind:title="title">
<!-- 單行文本-->
<input type="text" v-model="msg">
<p>{{msg}}</p>
<!-- 多行文本-->
<textarea v-model="textarea" cols="30" rows="10"></textarea>
<P style="white-space: pre-line;" >{{textarea}}</P>
<!-- 複選框-->
<!-- 單個測試-->
<input type="checkbox" v-model="isRead">
<p>{{isRead}}</p>
<!-- 多選興趣愛好-->
籃球<input type="checkbox" value="籃球" v-model="favorites">
足球<input type="checkbox" value="足球" v-model="favorites">
乒乓球<input type="checkbox" value="乒乓球" v-model="favorites">
<p>{{favorites}}</p>
<!-- 單選框性別-->
性別<input type="radio" value="男" v-model="gender">男 <input type="radio" value="女" v-model="gender">女
<p>{{gender}}</p>
<!-- 選擇框-->
<!-- 學歷-單選-->
<select v-model="edu">
<option value="本科">本科</option>
<option value="碩士">碩士</option>
<option value="博士">博士</option>
</select>
<p>{{edu}}</p>
<!-- 補充上方愛好的-多選-->
<select v-model="favorites" multiple>
<option value="足球">足球</option>
<option value="籃球">籃球</option>
<option value="乒乓球">乒乓球</option>
</select>
<!-- 優化-->
<select v-model="favorites" multiple>
<option v-for="(f, index) in fs" v-bind:key="index" v-bind:value="f">{{f}}</option>
</select>
<!-- 值選擇-->
<input type="checkbox" true-value="yes" false-value="no" v-model="toggle">
<p>{{toggle}}</p>
<!-- 單選框，返回值類似
選擇框 value可以傳一個對象，但記得v-bind
-->
<!-- .lazy .number .trim修飾符，可以使修改事件觸發狀態【挪出光標點一下才能觸發】-->
<input type="text" v-model.lazy="msg">
<p>{{msg}}</p>
<!-- 改進for的99乘法表-->
<!-- v-model修飾符控制數值【此時即使number類型也沒用】-->
<!-- <input type="number" v-model.number="num">-->
</div>
<script>
var app = new Vue({
el:'#app',
data:{
msg:'',
textarea:'',
isRead:false,
favorites:[],
gender:'',
edu:'',
fs:[
'足球',
'籃球',
'乒乓球'
],
toggle:''
}
})
</script>
</body>
</html>
組件基礎
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--<!– 保證了組件的複用不會同時調用同一個變量，避免結果異常 –>-->
<bennyrhys></bennyrhys>
<bennyrhys></bennyrhys>
<hr>
<!-- 向子組件傳遞數據 【定義的組件數據像元素屬性一樣賦值】 -->
<bennyrhys title="組件1"></bennyrhys>
<bennyrhys title="組件2"></bennyrhys>
<!-- 傳遞了一個數組的數據給子組件 【注意此處引用data的變量，記得加：】 -->
<mybolgs @sayhello="hello" v-for="(blog, index) in blogs" :title="blog.title" :date="blog.date" :author="blog.author" :key="index">
<!-- 插槽佔位符-->
<div style="color: red">bennyrhys</div>
</mybolgs>
<hr>
<!-- 動態組件：傳組件名字動態切換 -->
<component v-bind:is="currentTabComponent"></component>
</div>
<script>
Vue.component('bennyrhys',{
//返回值一定要是方法，避免變量被屬性同時公用造成異常
data() {
return {
counter: 0
}
},
// 向子組件傳遞數據
props:['title'],
// 外層必須是一個整div包裹
template:'<div><div>{{title}}</div><button @click="counter++" >hello {{counter}}</button></div>'
})
Vue.component('mybolgs',{
// 傳遞了一個數組的組件
props:['title', 'date', 'author'],
template: '<div>' +
'<div>{{title}}</div>'+
// 插槽佔位符 可以起名字
'<slot></slot>'+
'<div>{{date}}--{{author}}</div>'+
// 監聽子組件的點擊事件，調用app的方法【大小寫不敏感的 不要用大寫】
// 使用組件拋出一個值傳參
'<button @click="$emit(\'sayhello\',title)">監聽子組件</button>'+
'</div> '
})
var app = new Vue({
el:'#app',
data:{
currentTabComponent: 'bennyrhys',
message:"bennyrhys",
blogs:[
{
'title':'Spring Boot1',
'date':'時間1',
'author':'bennyrhys'
},
{
'title':'Spring Boot2',
'date':'時間2',
'author':'bennyrhys'
},
{
'title':'Spring Boot3',
'date':'時間3',
'author':'瑞新'
}
]
},
methods:{
// 監聽子組件傳遞過來的方法
hello(val){
console.log("hello zi"+val)
}
}
})
</script>
</body>
</html>
git提交-vue核心基礎完結
此處靜待，後期開源
彩蛋福利
爲了便於小夥伴們更好的學習Vue，防止視頻教程的鏈接失效，瑞新將最新的視頻教程放置公衆號【讓我遇見相似的靈魂】後臺回覆關鍵字領取。
關鍵字:Vue獲取
當然小夥伴如果覺得打字麻煩也可以掃描下方二維碼喲！
