整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
了::before 和::after，CSS 的偽元素還有::first-line、::first-letter 和::selection 這三個，這三個相對來說就簡單得多，用法也較為純粹。沒看過前兩篇文章的，筆者建議大家看看：
CSS 偽元素基礎知識：before 與after （一）、CSS 偽元素基礎知識：content 與counter 實用技巧（二）
::first-line顧名思義就是「第一行」，通過這個偽元素可以輕松指定文字的第一行，需要注意的是::first-line 「不能」作用于display:inline的元素。以下面的例子，html里有一段文字如下所示：
<p> 前端達人公眾號，已經有五年的歷史啦，目前有幾千名前端開發者訂閱，公眾號的宗旨是：分享當下最實用的前端技術。關注前端達人，與數千名達人們一起進步！期待你的訂閱和關注！ </p>
CSS 只要這樣寫，頁面呈現出來的第一行就會是綠色的，不論視窗如何縮放，只有第一行會是綠色的。
p::first-line{
color:green;
}
::first-letter顧名思義就是「第一個字」，通過這個偽元素，可以做出許多文章第一個字放大或變色的效果，我們這里就用剛剛上面那段文字為例，把第一個字用下段的CSS 來做變化，就可以看到第一個字放大且變色了的效果。
p::first-letter{
font-weight:bold;
font-size:38px;
color:red;
}
雖然把第一個字放大了，但排版上仍然有點亂沒有美感，這時你可以加入line-height、float或padding等屬性進行修正，經過修正后，你會驚喜的發現很像報紙雜志會出經常用的效果（第一個字會跨行顯示）。
p::first-letter{
font-weight:bold;
font-size:38px;
color:red;
line-height:26px;
float:left;
padding:10px 5px 0 0;
}
不過很有趣的是，在實際應用的過程里，發現「有一些符號」是無法套用::first-letter 的，例如「『 {} [] 都不行，但如果后方加上其他文字或符號，又會跟著一起放大...( 到底是怎樣？ )
經過查詢W3C的官網，發現了下面這段話，意思大概就是說網頁里面有定義一些所謂「包覆式、點綴式的標點符號」，如果是這些包覆式的標點符號，基本上就無法放大，反而需要搭配其它字符進行使用，因此，在使用第一個字進行特殊變化時，就要注意有這種特殊狀況會發生。
參考：https://www.w3.org/TR/CSS21/selector.html#first-letter
::selection 是個十分常見的偽元素，它就是負責一段選取文字的效果，以下面這段CSS來說，選取后的文字，就會是深色背景，黃色文字。
p::selection{
color:yellow;
background:#543;
}
雖然我們能用CSS操控偽元素，但因為偽元素不存在于網頁元素內，所以無法通過JavaScript常規操控DOM的方式來修改或控制，不過JavaScript身為一個神通廣大的編程語言，仍然是有方法可以辦到的。
讀取偽元素屬性
一般來說使用JavaScript讀取某個元素DOM里的屬性不難，但相對來說要讀取一個不存在網頁里的元素就不容易，如果要讀取偽元素屬性，可以通過getComputedStyle來獲得，getComputedStyle是個可以獲取當前元素「所有的CSS屬性值」，讀取后會返回一個Object CSSStyleDeclaration，而這個屬性是只讀的，無法進行修改。
使用方法：window.getComputedStyle('元素', '偽元素')
舉例來說html 放入一個div 以及一個span，待會會用這個span 來顯示div 的::before 屬性。
<div id="d">我是 div</div> <span id="s"></span>
CSS 的部分指定偽元素的content和color。
#d::before{
content:'偽元素的content ';
color:red;
}
JavaScript使用window.getComputedStyle(d,'::before')獲取div里頭偽元素使用的style，然后顯示在span里面。
var d=document.getElementById('d');
var s=document.getElementById('s');
var b=window.getComputedStyle(d,'::before');
s.innerHTML=b.content +'<br/>'+b.color;
最后頁面呈現的結果，第一段就是原本的div加上紅色的偽元素文字，下方第一段是content的內容，緊接著是偽元素的顏色屬性。
修改偽元素屬性
我們可以讀取屬性值也就一定要嘗試修改，不過修改偽元素的屬性其實比想像中的難，必須通過insertRule這個方法在指定的style里插入「預設的規則」，讓這個規則去影響偽元素的屬性表現。
用法：style 標簽元素.insertRule(樣式規則, 0)
舉例來說我們的網頁布局如下，一開始開頭的部分有兩組style，第一組是我們賦予元素的樣式屬性，第二組則是要來定義規則的style，因為要加入規則，所以讓第二組style有一個id。至于html就放入一個div。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#d::before{
content:'偽元素的 content ';
color:red;
}
</style>
<style id="css"></style>
</head>
<body>
<div id="d">我是div</div>
</body>
</html>
在完全沒有編寫JavaScript的狀態，應該會呈現如下圖的樣子：
JavaScript開聲明一個變量css，通過id獲取style，然后使用在指定一個變量給css.sheet，就可以通過insertRule的方法修改了。需要注意的是，由于規則加入時會放在整串style的開頭(第二個值預設0 )，所以純粹使用一個#d是無法覆蓋原本的屬性( CSS權重問題)，所以這邊使用#d#d兩次，就可以在權重上壓過原本的屬性。(當然如果要用!important也是可以)
var css=document.getElementById('css');
var d=document.getElementById('d');
var c=css.sheet;
c.insertRule("#d#d::before{content:'我是修改的 content ';}", 0);
c.insertRule("#d#d::before{color:blue;}", 0);
如此一來，呈現出來的效果就是通過JavaScript修改的。
修改偽元素content
我們知道::before和::after的content可以通過attr獲取父元素的屬性，因此通過改變這個屬性，就能間接連帶改變content的內容，舉例來說有個div，我們指定它的data-text="我是預設文字"，然后放兩個按鈕，期望點選不同的按鈕，會更換content不同的內容。
<button id="b1">顯示 ABC</button> <button id="b2">顯示 123</button> <div data-text="我是預設文字">我是 div</div>
接著設定CSS，關鍵在使用content的attr，讓偽元素直接顯示父元素屬性的內容。
button{
font-size:16px;
}
div{
margin:10px;
font-size:20px;
}
div::before{
content: attr(data-text) '，';
}
最后就是JavaScript的部分，通過setAttribute更改div的屬性，就會看到content的內容修改了。
var b1=document.getElementById('b1');
var b2=document.getElementById('b2');
var d=document.querySelector('div');
b1.addEventListener('click',function(){
d.setAttribute('data-text','ABC');
});
b2.addEventListener('click',function(){
d.setAttribute('data-text','123');
});
雖然說我們可以通過JavaScript 來操控偽元素，但偽元素終究不是真正的網頁元素，也因此操作起來也不如基本操作網頁元素DOM 來的簡便，所以如果可以，還是盡量用正常的操控模式吧。
文章來源：https://www.oxxostudio.tw/articles/201706/pseudo-element-3.html
https://www.oxxostudio.tw/articles/201706/pseudo-element-4.html
原文作者：oxxostudio
由于網頁為繁體內容，術語描述和話術與我們有差異的問題，筆者在保證不改變原意的基礎上做了調整，把上述兩篇文章合成了一篇，并在此基礎上進行了錯誤校正，如發現問題，歡迎你的指正
關于偽元素的系列文章就介紹到這里，如果你喜歡此系列文章，麻煩各位點贊和轉發，謝謝啦。關于偽元素的用法，雖然說大部分的時候用不太到，但某些時候也不失為強化網頁效果、或是優化網頁結構的好方法。
了::before 和::after，CSS 的偽元素還有::first-line、::first-letter 和::selection 這三個，這三個相對來說就簡單得多，用法也較為純粹。沒看過前兩篇文章的，筆者建議大家看看：
CSS 偽元素基礎知識：before 與after （一）、CSS 偽元素基礎知識：content 與counter 實用技巧（二）
::first-line顧名思義就是「第一行」，通過這個偽元素可以輕松指定文字的第一行，需要注意的是::first-line 「不能」作用于display:inline的元素。以下面的例子，html里有一段文字如下所示：
<p> 前端達人公眾號，已經有五年的歷史啦，目前有幾千名前端開發者訂閱，公眾號的宗旨是：分享當下最實用的前端技術。關注前端達人，與數千名達人們一起進步！期待你的訂閱和關注！ </p>
CSS 只要這樣寫，頁面呈現出來的第一行就會是綠色的，不論視窗如何縮放，只有第一行會是綠色的。
p::first-line{
color:green;
}
::first-letter顧名思義就是「第一個字」，通過這個偽元素，可以做出許多文章第一個字放大或變色的效果，我們這里就用剛剛上面那段文字為例，把第一個字用下段的CSS 來做變化，就可以看到第一個字放大且變色了的效果。
p::first-letter{
font-weight:bold;
font-size:38px;
color:red;
}
雖然把第一個字放大了，但排版上仍然有點亂沒有美感，這時你可以加入line-height、float或padding等屬性進行修正，經過修正后，你會驚喜的發現很像報紙雜志會出經常用的效果（第一個字會跨行顯示）。
p::first-letter{
font-weight:bold;
font-size:38px;
color:red;
line-height:26px;
float:left;
padding:10px 5px 0 0;
}
不過很有趣的是，在實際應用的過程里，發現「有一些符號」是無法套用::first-letter 的，例如「『 {} [] 都不行，但如果后方加上其他文字或符號，又會跟著一起放大...( 到底是怎樣？ )
經過查詢W3C的官網，發現了下面這段話，意思大概就是說網頁里面有定義一些所謂「包覆式、點綴式的標點符號」，如果是這些包覆式的標點符號，基本上就無法放大，反而需要搭配其它字符進行使用，因此，在使用第一個字進行特殊變化時，就要注意有這種特殊狀況會發生。
參考：https://www.w3.org/TR/CSS21/selector.html#first-letter
::selection 是個十分常見的偽元素，它就是負責一段選取文字的效果，以下面這段CSS來說，選取后的文字，就會是深色背景，黃色文字。
p::selection{
color:yellow;
background:#543;
}
雖然我們能用CSS操控偽元素，但因為偽元素不存在于網頁元素內，所以無法通過JavaScript常規操控DOM的方式來修改或控制，不過JavaScript身為一個神通廣大的編程語言，仍然是有方法可以辦到的。
讀取偽元素屬性
一般來說使用JavaScript讀取某個元素DOM里的屬性不難，但相對來說要讀取一個不存在網頁里的元素就不容易，如果要讀取偽元素屬性，可以通過getComputedStyle來獲得，getComputedStyle是個可以獲取當前元素「所有的CSS屬性值」，讀取后會返回一個Object CSSStyleDeclaration，而這個屬性是只讀的，無法進行修改。
使用方法：window.getComputedStyle('元素', '偽元素')
舉例來說html 放入一個div 以及一個span，待會會用這個span 來顯示div 的::before 屬性。
<div id="d">我是 div</div> <span id="s"></span>
CSS 的部分指定偽元素的content和color。
#d::before{
content:'偽元素的content ';
color:red;
}
JavaScript使用window.getComputedStyle(d,'::before')獲取div里頭偽元素使用的style，然后顯示在span里面。
var d=document.getElementById('d');
var s=document.getElementById('s');
var b=window.getComputedStyle(d,'::before');
s.innerHTML=b.content +'<br/>'+b.color;
最后頁面呈現的結果，第一段就是原本的div加上紅色的偽元素文字，下方第一段是content的內容，緊接著是偽元素的顏色屬性。
修改偽元素屬性
我們可以讀取屬性值也就一定要嘗試修改，不過修改偽元素的屬性其實比想像中的難，必須通過insertRule這個方法在指定的style里插入「預設的規則」，讓這個規則去影響偽元素的屬性表現。
用法：style 標簽元素.insertRule(樣式規則, 0)
舉例來說我們的網頁布局如下，一開始開頭的部分有兩組style，第一組是我們賦予元素的樣式屬性，第二組則是要來定義規則的style，因為要加入規則，所以讓第二組style有一個id。至于html就放入一個div。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#d::before{
content:'偽元素的 content ';
color:red;
}
</style>
<style id="css"></style>
</head>
<body>
<div id="d">我是div</div>
</body>
</html>
在完全沒有編寫JavaScript的狀態，應該會呈現如下圖的樣子：
JavaScript開聲明一個變量css，通過id獲取style，然后使用在指定一個變量給css.sheet，就可以通過insertRule的方法修改了。需要注意的是，由于規則加入時會放在整串style的開頭(第二個值預設0 )，所以純粹使用一個#d是無法覆蓋原本的屬性( CSS權重問題)，所以這邊使用#d#d兩次，就可以在權重上壓過原本的屬性。(當然如果要用!important也是可以)
var css=document.getElementById('css');
var d=document.getElementById('d');
var c=css.sheet;
c.insertRule("#d#d::before{content:'我是修改的 content ';}", 0);
c.insertRule("#d#d::before{color:blue;}", 0);
如此一來，呈現出來的效果就是通過JavaScript修改的。
修改偽元素content
我們知道::before和::after的content可以通過attr獲取父元素的屬性，因此通過改變這個屬性，就能間接連帶改變content的內容，舉例來說有個div，我們指定它的data-text="我是預設文字"，然后放兩個按鈕，期望點選不同的按鈕，會更換content不同的內容。
<button id="b1">顯示 ABC</button> <button id="b2">顯示 123</button> <div data-text="我是預設文字">我是 div</div>
接著設定CSS，關鍵在使用content的attr，讓偽元素直接顯示父元素屬性的內容。
button{
font-size:16px;
}
div{
margin:10px;
font-size:20px;
}
div::before{
content: attr(data-text) '，';
}
最后就是JavaScript的部分，通過setAttribute更改div的屬性，就會看到content的內容修改了。
var b1=document.getElementById('b1');
var b2=document.getElementById('b2');
var d=document.querySelector('div');
b1.addEventListener('click',function(){
d.setAttribute('data-text','ABC');
});
b2.addEventListener('click',function(){
d.setAttribute('data-text','123');
});
雖然說我們可以通過JavaScript 來操控偽元素，但偽元素終究不是真正的網頁元素，也因此操作起來也不如基本操作網頁元素DOM 來的簡便，所以如果可以，還是盡量用正常的操控模式吧。
文章來源：https://www.oxxostudio.tw/articles/201706/pseudo-element-3.html
https://www.oxxostudio.tw/articles/201706/pseudo-element-4.html
原文作者：oxxostudio
由于網頁為繁體內容，術語描述和話術與我們有差異的問題，筆者在保證不改變原意的基礎上做了調整，把上述兩篇文章合成了一篇，并在此基礎上進行了錯誤校正，如發現問題，歡迎你的指正
關于偽元素的系列文章就介紹到這里，如果你喜歡此系列文章，麻煩各位點贊和轉發，謝謝啦。關于偽元素的用法，雖然說大部分的時候用不太到，但某些時候也不失為強化網頁效果、或是優化網頁結構的好方法。
漸進式 JavaScript 框架 --摘自官網
# 漸進式
1. 易用 html css javascript
2. 高效 開發前端頁面 非常高效
3. 靈活 開發靈活 多樣性
# 總結
Vue 是一個javascript 框架
# 后端服務端開發人員:
Vue 漸進式javascript框架: 讓我們通過操作很少的DOM,甚至不需要操作頁面中任何DOM元素,就很容易的完成數據和視圖綁定 雙向綁定 MVVM
注意: 日后在使用Vue過程中頁面中不要在引入Jquery框架
htmlcss--->javascript ----->jquery---->angularjs -----> Vue
# Vue 作者
尤雨溪 國內的 //開發版本:
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
//生產版本:
<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <div id="app">
{{ msg }} {{username}} {{pwd}}
<br>
<span>
{{ username }}
<h1>{{ msg }}</h1>
</span>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app=new Vue({
el:"#app", //element 用來給Vue實例定義一個作用范圍
data:{ //用來給Vue實例定義一些相關數據
msg:"我的第一個Vue入門應用",
username:"hello Vue!",
pwd :"12345",
},
});
</script># 總結:
1.vue實例(對象)中el屬性: 代表Vue的作用范圍 日后在Vue的作用范圍內都可以使用Vue的語法
2.vue實例(對象)中data屬性: 用來給Vue實例綁定一些相關數據, 綁定的數據可以通過{{變量名}}在Vue作用范圍內取出
3.在使用{{}}進行獲取data中數據時,可以在{{}}中書寫表達式,運算符,調用相關方法,以及邏輯運算等
4.el屬性中可以書寫任意的CSS選擇器[jquery選擇器],但是在使用Vue開發是推薦使用 id選擇器v-text:用來獲取data中數據將數據以文本的形式渲染到指定標簽內部 類似于javascript 中 innerText
<div id="app" class="aa">
<span >{{ message }}</span>
<span v-text="message"></span>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
message:"Vue歡迎您的使用"
}
})
</script># 總結
1.{{}}(插值表達式)和v-text獲取數據的區別在于
a.使用v-text取值會將標簽中原有的數據覆蓋 使用插值表達式的形式不會覆蓋標簽原有的數據
b.使用v-text可以避免在網絡環境較差的情況下出現插值閃爍v-html:用來獲取data中數據將數據中含有的html標簽先解析在渲染到指定標簽的內部 類似于javascript中 innerHTML
<div id="app" class="aa">
<span>{{message}}</span>
<br>
<span v-text="message"></span>
<br>
<span v-html="message">xxxxxx</span>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
message:"<a href=''>Vue歡迎您的使用</a>"
}
})
</script> <div id="app">
<h2>{{message}}</h2>
<h2 v-text="message"></h2>
<h2>年齡:{{ age }}</h2>
<br>
<input type="button" value="點我改變年齡" v-on:click="changeage">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
message:"hello Vue歡迎您的使用!",
age:23,
},
methods:{ //methods 用來定義vue中時間
changeage:function(){
alert('點擊觸發');
}
}
})
</script># 總結:
事件 事件源:發生事件dom元素 事件: 發生特定的動作 click.... 監聽器 發生特定動作之后的事件處理程序 通常是js中函數
1.在vue中綁定事件是通過v-on指令來完成的 v-on:事件名 如 v-on:click
2.在v-on:事件名的賦值語句中是當前時間觸發調用的函數名
3.在vue中事件的函數統一定義在Vue實例的methods屬性中
4.在vue定義的事件中this指的就是當前的Vue實例,日后可以在事件中通過使用this獲取Vue實例中相關數據 <div id="app">
<h2>{{ age }}</h2>
<input type="button" value="通過v-on事件修改年齡每次+1" v-on:click="changeage">
<input type="button" value="通過@綁定時間修改年齡每次-1" @click="editage">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app=new Vue({
el:"#app", //element: 用來指定vue作用范圍
data:{
age:23,
}, //data : 用來定義vue實例中相關數據
methods:{
changeage:function(){
this.age++;
},
editage:function(){
this.age--;
}
} //methods: 用來定義事件的處理函數
});
</script># 總結:
1.日后在vue中綁定事件時可以通過@符號形式 簡化 v-on 的事件綁定 <div id="app">
<span>{{count}}</span>
<input type="button" value="改變count的值" @click="changecount">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
count:1,
},
methods:{
/*changecount:function(){
this.count++;
}*/
changecount(){
this.count++;
}
}
});
</script># 總結:
1.在Vue中事件定義存在兩種寫法 一種是 函數名:function(){} 推薦 一種是 函數名(){} 推薦 <div id="app">
<span>{{count}}</span>
<input type="button" value="改變count為指定的值" @click="changecount(23,'xiaohei')">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
count:1,
},
methods:{
//定義changecount
changecount(count,name){
this.count=count;
alert(name);
}
}
});
</script># 總結:
1.在使用事件時,可以直接在事件調用出給事件進行參數傳遞,在事件定義出通過定義對應變量接收傳遞的參數v-show:用來控制頁面中某個標簽元素是否展示 底層使用控制是 display 屬性
<div id="app">
<!--
v-show: 用來控制標簽展示還是隱藏的
-->
<h2 v-show="false">Vue歡迎您的使用!</h2>
<h2 v-show="show">Vue歡迎您的使用！這是vue中定義變量true!</h2>
<input type="button" value="展示隱藏標簽" @click="showmsg">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
show:false,
},
methods:{
//定義時間
showmsg(){
this.show=!this.show;
}
}
})
</script># 總結
1.在使用v-show時可以直接書寫boolean值控制元素展示,也可以通過變量控制標簽展示和隱藏
2.在v-show中可以通過boolean表達式控制標簽的展示和隱藏v-if: 用來控制頁面元素是否展示 底層控制是DOM元素 操作DOM
<div id="app">
<h2 v-if="false">Vue3.0</h2>
<h2 v-if="show">Vue3.0歡迎您的使用</h2>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
show:false
},
methods:{
}
});
</script>v-bind: 用來綁定標簽的屬性從而通過vue動態修改標簽的屬性
<div id="app">
<img width="300" v-bind:title="msg" v-bind:class="{aa:showCss}" src="Vuelogo.jpg" alt="">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
msg:"Vue官方logo!!!!",
showCss:true,
},
methods:{
}
})
</script>v-for: 作用就是用來對對象進行遍歷的(數組也是對象的一種)
<div id="app">
<span>{{ user.name }} {{ user.age }}</span>
<br>
<!--
通過v-for遍歷對象
-->
<span v-for="(value,key,index) in user">
{{index}} : {{key}} : {{value}}
</span>
<!--
通過v-for遍歷數組
-->
<ul>
<li v-for="a,index in arr" >
{{index}} {{a}}
</li>
</ul>
<!--
通過v-for遍歷數組中對象
:key 便于vue內部做重用和排序
-->
<ul>
<li v-for="user,index in users" :key="user.id">
{{index+1}} {{ user.name }}==={{ user.age }}===={{ user.content }}
</li>
</ul>
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app=new Vue({
el: "#app",
data: {
user:{name:"小V",age:23},
arr:["Vue1.0", "Vue2.0", "Vue3.0"],
users:[
{id:"1",name:"xiaoV",age:23,content:"我曾經也是一個單純的少年!"},
{id:"2",name:"小白",age:23,content:"我曾經是一個邪惡的少年!"},
]
},
methods: {}
});
</script># 總結
1.在使用v-for的時候一定要注意加入:key 用來給vue內部提供重用和排序的唯一key v-model: 作用用來綁定標簽元素的值與vue實例對象中data數據保持一致,從而實現雙向的數據綁定機制
<div id="app">
<input type="text" v-model="message">
<span>{{message}}</span>
<hr>
<input type="button" value="改變Data中值" @click="changeValue">
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app=new Vue({
el: "#app",
data: {
message:""
},
methods: {
changeValue(){
this.message='Vue3.0歡迎您的使用！';
}
}
});
</script># 總結
1.使用v-model指令可以實現數據的雙向綁定
2.所謂雙向綁定 表單中數據變化導致vue實例data數據變化 vue實例中data數據的變化導致表單中數據變化 稱之為雙向綁定
# MVVM架構 雙向綁定機制
Model: 數據 Vue實例中綁定數據
VM: ViewModel 監聽器
View: 頁面 頁面展示的數據# ***************Vue基礎示例講解持續中，感謝關注一下呦。****************請認真填寫需求信息，我們會在24小時內與您取得聯系。
