CSS 偽元素基礎(chǔ)知識(shí)：first-line、fir

CSS 偽元素基礎(chǔ)知識(shí)：first-line、first-letter、selection(三)

了::before 和::after，CSS 的偽元素還有::first-line、::first-letter 和::selection 這三個(gè)，這三個(gè)相對(duì)來(lái)說(shuō)就簡(jiǎn)單得多，用法也較為純粹。沒看過(guò)前兩篇文章的，筆者建議大家看看：

CSS 偽元素基礎(chǔ)知識(shí)：before 與after （一）、CSS 偽元素基礎(chǔ)知識(shí)：content 與counter 實(shí)用技巧（二）

::first-line

::first-line顧名思義就是「第一行」，通過(guò)這個(gè)偽元素可以輕松指定文字的第一行，需要注意的是::first-line 「不能」作用于display:inline的元素。以下面的例子，html里有一段文字如下所示：

<p> 前端達(dá)人公眾號(hào)，已經(jīng)有五年的歷史啦，目前有幾千名前端開發(fā)者訂閱，公眾號(hào)的宗旨是：分享當(dāng)下最實(shí)用的前端技術(shù)。關(guān)注前端達(dá)人，與數(shù)千名達(dá)人們一起進(jìn)步！期待你的訂閱和關(guān)注！
</p>

CSS 只要這樣寫，頁(yè)面呈現(xiàn)出來(lái)的第一行就會(huì)是綠色的，不論視窗如何縮放，只有第一行會(huì)是綠色的。

p::first-line{
 color:green;
}

::first-letter

::first-letter顧名思義就是「第一個(gè)字」，通過(guò)這個(gè)偽元素，可以做出許多文章第一個(gè)字放大或變色的效果，我們這里就用剛剛上面那段文字為例，把第一個(gè)字用下段的CSS 來(lái)做變化，就可以看到第一個(gè)字放大且變色了的效果。

p::first-letter{
 font-weight:bold;
 font-size:38px;
 color:red;
}

雖然把第一個(gè)字放大了，但排版上仍然有點(diǎn)亂沒有美感，這時(shí)你可以加入line-height、float或padding等屬性進(jìn)行修正，經(jīng)過(guò)修正后，你會(huì)驚喜的發(fā)現(xiàn)很像報(bào)紙雜志會(huì)出經(jīng)常用的效果（第一個(gè)字會(huì)跨行顯示）。

p::first-letter{
 font-weight:bold;
 font-size:38px;
 color:red;
 line-height:26px;
 float:left;
 padding:10px 5px 0 0;
}

不過(guò)很有趣的是，在實(shí)際應(yīng)用的過(guò)程里，發(fā)現(xiàn)「有一些符號(hào)」是無(wú)法套用::first-letter 的，例如「『 {} [] 都不行，但如果后方加上其他文字或符號(hào)，又會(huì)跟著一起放大...( 到底是怎樣？ )

經(jīng)過(guò)查詢W3C的官網(wǎng)，發(fā)現(xiàn)了下面這段話，意思大概就是說(shuō)網(wǎng)頁(yè)里面有定義一些所謂「包覆式、點(diǎn)綴式的標(biāo)點(diǎn)符號(hào)」，如果是這些包覆式的標(biāo)點(diǎn)符號(hào)，基本上就無(wú)法放大，反而需要搭配其它字符進(jìn)行使用，因此，在使用第一個(gè)字進(jìn)行特殊變化時(shí)，就要注意有這種特殊狀況會(huì)發(fā)生。

參考：https://www.w3.org/TR/CSS21/selector.html#first-letter

::selection

::selection 是個(gè)十分常見的偽元素，它就是負(fù)責(zé)一段選取文字的效果，以下面這段CSS來(lái)說(shuō)，選取后的文字，就會(huì)是深色背景，黃色文字。

p::selection{
 color:yellow;
 background:#543;
}

延伸閱讀——用JavaScript操控偽元素

雖然我們能用CSS操控偽元素，但因?yàn)閭卧夭淮嬖谟诰W(wǎng)頁(yè)元素內(nèi)，所以無(wú)法通過(guò)JavaScript常規(guī)操控DOM的方式來(lái)修改或控制，不過(guò)JavaScript身為一個(gè)神通廣大的編程語(yǔ)言，仍然是有方法可以辦到的。

讀取偽元素屬性

一般來(lái)說(shuō)使用JavaScript讀取某個(gè)元素DOM里的屬性不難，但相對(duì)來(lái)說(shuō)要讀取一個(gè)不存在網(wǎng)頁(yè)里的元素就不容易，如果要讀取偽元素屬性，可以通過(guò)getComputedStyle來(lái)獲得，getComputedStyle是個(gè)可以獲取當(dāng)前元素「所有的CSS屬性值」，讀取后會(huì)返回一個(gè)Object CSSStyleDeclaration，而這個(gè)屬性是只讀的，無(wú)法進(jìn)行修改。

使用方法：window.getComputedStyle('元素', '偽元素')

舉例來(lái)說(shuō)html 放入一個(gè)div 以及一個(gè)span，待會(huì)會(huì)用這個(gè)span 來(lái)顯示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;

最后頁(yè)面呈現(xiàn)的結(jié)果，第一段就是原本的div加上紅色的偽元素文字，下方第一段是content的內(nèi)容，緊接著是偽元素的顏色屬性。

修改偽元素屬性

我們可以讀取屬性值也就一定要嘗試修改，不過(guò)修改偽元素的屬性其實(shí)比想像中的難，必須通過(guò)insertRule這個(gè)方法在指定的style里插入「預(yù)設(shè)的規(guī)則」，讓這個(gè)規(guī)則去影響偽元素的屬性表現(xiàn)。

用法：style 標(biāo)簽元素.insertRule(樣式規(guī)則, 0)

舉例來(lái)說(shuō)我們的網(wǎng)頁(yè)布局如下，一開始開頭的部分有兩組style，第一組是我們賦予元素的樣式屬性，第二組則是要來(lái)定義規(guī)則的style，因?yàn)橐尤胍?guī)則，所以讓第二組style有一個(gè)id。至于html就放入一個(gè)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的狀態(tài)，應(yīng)該會(huì)呈現(xiàn)如下圖的樣子：

JavaScript開聲明一個(gè)變量css，通過(guò)id獲取style，然后使用在指定一個(gè)變量給css.sheet，就可以通過(guò)insertRule的方法修改了。需要注意的是，由于規(guī)則加入時(shí)會(huì)放在整串style的開頭(第二個(gè)值預(yù)設(shè)0 )，所以純粹使用一個(gè)#d是無(wú)法覆蓋原本的屬性( CSS權(quán)重問(wèn)題)，所以這邊使用#d#d兩次，就可以在權(quán)重上壓過(guò)原本的屬性。(當(dāng)然如果要用!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);

如此一來(lái)，呈現(xiàn)出來(lái)的效果就是通過(guò)JavaScript修改的。

修改偽元素content

我們知道::before和::after的content可以通過(guò)attr獲取父元素的屬性，因此通過(guò)改變這個(gè)屬性，就能間接連帶改變content的內(nèi)容，舉例來(lái)說(shuō)有個(gè)div，我們指定它的data-text="我是預(yù)設(shè)文字"，然后放兩個(gè)按鈕，期望點(diǎn)選不同的按鈕，會(huì)更換content不同的內(nèi)容。

<button id="b1">顯示 ABC</button>
<button id="b2">顯示 123</button>
<div data-text="我是預(yù)設(shè)文字">我是 div</div>

接著設(shè)定CSS，關(guān)鍵在使用content的attr，讓偽元素直接顯示父元素屬性的內(nèi)容。

button{
 font-size:16px;
}
div{
 margin:10px;
 font-size:20px;
}
div::before{
 content: attr(data-text) '，';
}

最后就是JavaScript的部分，通過(guò)setAttribute更改div的屬性，就會(huì)看到content的內(nèi)容修改了。

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');
});

雖然說(shuō)我們可以通過(guò)JavaScript 來(lái)操控偽元素，但偽元素終究不是真正的網(wǎng)頁(yè)元素，也因此操作起來(lái)也不如基本操作網(wǎng)頁(yè)元素DOM 來(lái)的簡(jiǎn)便，所以如果可以，還是盡量用正常的操控模式吧。

文章來(lái)源：https://www.oxxostudio.tw/articles/201706/pseudo-element-3.html
https://www.oxxostudio.tw/articles/201706/pseudo-element-4.html
原文作者：oxxostudio
由于網(wǎng)頁(yè)為繁體內(nèi)容，術(shù)語(yǔ)描述和話術(shù)與我們有差異的問(wèn)題，筆者在保證不改變?cè)獾幕A(chǔ)上做了調(diào)整，把上述兩篇文章合成了一篇，并在此基礎(chǔ)上進(jìn)行了錯(cuò)誤校正，如發(fā)現(xiàn)問(wèn)題，歡迎你的指正

小結(jié)

關(guān)于偽元素的系列文章就介紹到這里，如果你喜歡此系列文章，麻煩各位點(diǎn)贊和轉(zhuǎn)發(fā)，謝謝啦。關(guān)于偽元素的用法，雖然說(shuō)大部分的時(shí)候用不太到，但某些時(shí)候也不失為強(qiáng)化網(wǎng)頁(yè)效果、或是優(yōu)化網(wǎng)頁(yè)結(jié)構(gòu)的好方法。

CSS 偽元素基礎(chǔ)知識(shí)：before 與after （一）、CSS 偽元素基礎(chǔ)知識(shí)：content 與counter 實(shí)用技巧（二）

::first-line

<p> 前端達(dá)人公眾號(hào)，已經(jīng)有五年的歷史啦，目前有幾千名前端開發(fā)者訂閱，公眾號(hào)的宗旨是：分享當(dāng)下最實(shí)用的前端技術(shù)。關(guān)注前端達(dá)人，與數(shù)千名達(dá)人們一起進(jìn)步！期待你的訂閱和關(guān)注！
</p>

CSS 只要這樣寫，頁(yè)面呈現(xiàn)出來(lái)的第一行就會(huì)是綠色的，不論視窗如何縮放，只有第一行會(huì)是綠色的。

p::first-line{
 color:green;
}

::first-letter

p::first-letter{
 font-weight:bold;
 font-size:38px;
 color:red;
}

p::first-letter{
 font-weight:bold;
 font-size:38px;
 color:red;
 line-height:26px;
 float:left;
 padding:10px 5px 0 0;
}

參考：https://www.w3.org/TR/CSS21/selector.html#first-letter

::selection

p::selection{
 color:yellow;
 background:#543;
}

延伸閱讀——用JavaScript操控偽元素

讀取偽元素屬性

使用方法：window.getComputedStyle('元素', '偽元素')

舉例來(lái)說(shuō)html 放入一個(gè)div 以及一個(gè)span，待會(huì)會(huì)用這個(gè)span 來(lái)顯示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;

最后頁(yè)面呈現(xiàn)的結(jié)果，第一段就是原本的div加上紅色的偽元素文字，下方第一段是content的內(nèi)容，緊接著是偽元素的顏色屬性。

修改偽元素屬性

用法：style 標(biāo)簽元素.insertRule(樣式規(guī)則, 0)

<!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的狀態(tài)，應(yīng)該會(huì)呈現(xiàn)如下圖的樣子：

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);

如此一來(lái)，呈現(xiàn)出來(lái)的效果就是通過(guò)JavaScript修改的。

修改偽元素content

<button id="b1">顯示 ABC</button>
<button id="b2">顯示 123</button>
<div data-text="我是預(yù)設(shè)文字">我是 div</div>

接著設(shè)定CSS，關(guān)鍵在使用content的attr，讓偽元素直接顯示父元素屬性的內(nèi)容。

button{
 font-size:16px;
}
div{
 margin:10px;
 font-size:20px;
}
div::before{
 content: attr(data-text) '，';
}

最后就是JavaScript的部分，通過(guò)setAttribute更改div的屬性，就會(huì)看到content的內(nèi)容修改了。

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');
});

文章來(lái)源：https://www.oxxostudio.tw/articles/201706/pseudo-element-3.html
https://www.oxxostudio.tw/articles/201706/pseudo-element-4.html
原文作者：oxxostudio
由于網(wǎng)頁(yè)為繁體內(nèi)容，術(shù)語(yǔ)描述和話術(shù)與我們有差異的問(wèn)題，筆者在保證不改變?cè)獾幕A(chǔ)上做了調(diào)整，把上述兩篇文章合成了一篇，并在此基礎(chǔ)上進(jìn)行了錯(cuò)誤校正，如發(fā)現(xiàn)問(wèn)題，歡迎你的指正

小結(jié)

. Vue 引言

漸進(jìn)式 JavaScript 框架 --摘自官網(wǎng)

# 漸進(jìn)式
   1. 易用  html css javascript
   2. 高效  開發(fā)前端頁(yè)面 非常高效 
   3. 靈活  開發(fā)靈活 多樣性

# 總結(jié)
        Vue 是一個(gè)javascript 框架

# 后端服務(wù)端開發(fā)人員: 
        Vue 漸進(jìn)式j(luò)avascript框架: 讓我們通過(guò)操作很少的DOM,甚至不需要操作頁(yè)面中任何DOM元素,就很容易的完成數(shù)據(jù)和視圖綁定  雙向綁定 MVVM  
        
        注意: 日后在使用Vue過(guò)程中頁(yè)面中不要在引入Jquery框架
        
        htmlcss--->javascript ----->jquery---->angularjs -----> Vue
 
 # Vue 作者
         尤雨溪   國(guó)內(nèi)的

2. Vue入門

2.1 下載Vuejs

//開發(fā)版本:
    <!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

//生產(chǎn)版本:
    <!-- 生產(chǎn)環(huán)境版本，優(yōu)化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.2 Vue第一個(gè)入門應(yīng)用

    <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 用來(lái)給Vue實(shí)例定義一個(gè)作用范圍
            data:{      //用來(lái)給Vue實(shí)例定義一些相關(guān)數(shù)據(jù)
                msg:"我的第一個(gè)Vue入門應(yīng)用",
                username:"hello Vue!",
                pwd :"12345",
            },
        });
    </script>

# 總結(jié):
            1.vue實(shí)例(對(duì)象)中el屬性:   代表Vue的作用范圍  日后在Vue的作用范圍內(nèi)都可以使用Vue的語(yǔ)法
            2.vue實(shí)例(對(duì)象)中data屬性: 用來(lái)給Vue實(shí)例綁定一些相關(guān)數(shù)據(jù), 綁定的數(shù)據(jù)可以通過(guò){{變量名}}在Vue作用范圍內(nèi)取出
            3.在使用{{}}進(jìn)行獲取data中數(shù)據(jù)時(shí),可以在{{}}中書寫表達(dá)式,運(yùn)算符,調(diào)用相關(guān)方法,以及邏輯運(yùn)算等
            4.el屬性中可以書寫任意的CSS選擇器[jquery選擇器],但是在使用Vue開發(fā)是推薦使用 id選擇器

3. v-text和v-html

3.1 v-text

v-text:用來(lái)獲取data中數(shù)據(jù)將數(shù)據(jù)以文本的形式渲染到指定標(biāo)簽內(nèi)部類似于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>

# 總結(jié)
            1.{{}}(插值表達(dá)式)和v-text獲取數(shù)據(jù)的區(qū)別在于 
                    a.使用v-text取值會(huì)將標(biāo)簽中原有的數(shù)據(jù)覆蓋 使用插值表達(dá)式的形式不會(huì)覆蓋標(biāo)簽原有的數(shù)據(jù)
                    b.使用v-text可以避免在網(wǎng)絡(luò)環(huán)境較差的情況下出現(xiàn)插值閃爍

3.2 v-html

v-html:用來(lái)獲取data中數(shù)據(jù)將數(shù)據(jù)中含有的html標(biāo)簽先解析在渲染到指定標(biāo)簽的內(nèi)部類似于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>

4.vue中事件綁定(v-on)

4.1 綁定事件基本語(yǔ)法

        <div id="app">
        <h2>{{message}}</h2>
        <h2 v-text="message"></h2>
        <h2>年齡:{{ age }}</h2>
        <br>
        <input type="button" value="點(diǎn)我改變年齡" 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 用來(lái)定義vue中時(shí)間
                changeage:function(){
                    alert('點(diǎn)擊觸發(fā)');
                }
            }
        })
    </script>

# 總結(jié):
		事件  事件源:發(fā)生事件dom元素  事件: 發(fā)生特定的動(dòng)作  click....  監(jiān)聽器  發(fā)生特定動(dòng)作之后的事件處理程序 通常是js中函數(shù)
		1.在vue中綁定事件是通過(guò)v-on指令來(lái)完成的 v-on:事件名 如  v-on:click
		2.在v-on:事件名的賦值語(yǔ)句中是當(dāng)前時(shí)間觸發(fā)調(diào)用的函數(shù)名
		3.在vue中事件的函數(shù)統(tǒng)一定義在Vue實(shí)例的methods屬性中
		4.在vue定義的事件中this指的就是當(dāng)前的Vue實(shí)例,日后可以在事件中通過(guò)使用this獲取Vue實(shí)例中相關(guān)數(shù)據(jù)

4.2 Vue中事件的簡(jiǎn)化語(yǔ)法

		<div id="app">
        <h2>{{ age }}</h2>
        <input type="button" value="通過(guò)v-on事件修改年齡每次+1" v-on:click="changeage">
        <input type="button" value="通過(guò)@綁定時(shí)間修改年齡每次-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: 用來(lái)指定vue作用范圍
           data:{
               age:23,
           },    //data   : 用來(lái)定義vue實(shí)例中相關(guān)數(shù)據(jù)
           methods:{
               changeage:function(){
                   this.age++;
               },
               editage:function(){
                   this.age--;
               }

           }  //methods: 用來(lái)定義事件的處理函數(shù)
        });
    </script>

# 總結(jié):
			1.日后在vue中綁定事件時(shí)可以通過(guò)@符號(hào)形式 簡(jiǎn)化  v-on 的事件綁定

4.3 Vue事件函數(shù)兩種寫法

		<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>

# 總結(jié):
			1.在Vue中事件定義存在兩種寫法  一種是 函數(shù)名:function(){}  推薦    一種是  函數(shù)名(){} 推薦

4.4 Vue事件參數(shù)傳遞

		<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>

# 總結(jié):
			1.在使用事件時(shí),可以直接在事件調(diào)用出給事件進(jìn)行參數(shù)傳遞,在事件定義出通過(guò)定義對(duì)應(yīng)變量接收傳遞的參數(shù)

5.v-show v-if v-bind

5.1 v-show

v-show:用來(lái)控制頁(yè)面中某個(gè)標(biāo)簽元素是否展示底層使用控制是 display 屬性

<div id="app">
    <!--
        v-show: 用來(lái)控制標(biāo)簽展示還是隱藏的
    -->
    <h2 v-show="false">Vue歡迎您的使用!</h2>
    <h2 v-show="show">Vue歡迎您的使用！這是vue中定義變量true!</h2>
    <input type="button" value="展示隱藏標(biāo)簽" @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:{
            //定義時(shí)間
            showmsg(){
               this.show=!this.show;
            }
        }
    })
</script>

# 總結(jié)
			1.在使用v-show時(shí)可以直接書寫boolean值控制元素展示,也可以通過(guò)變量控制標(biāo)簽展示和隱藏
			2.在v-show中可以通過(guò)boolean表達(dá)式控制標(biāo)簽的展示和隱藏

5.2 v-if

v-if: 用來(lái)控制頁(yè)面元素是否展示底層控制是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>

5.3 v-bind

v-bind: 用來(lái)綁定標(biāo)簽的屬性從而通過(guò)vue動(dòng)態(tài)修改標(biāo)簽的屬性

<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>

6.v-for的使用

v-for: 作用就是用來(lái)對(duì)對(duì)象進(jìn)行遍歷的(數(shù)組也是對(duì)象的一種)

<div id="app">

    <span>{{ user.name }} {{ user.age }}</span>
    <br>
    <!--
       通過(guò)v-for遍歷對(duì)象
    -->
    <span v-for="(value,key,index) in user">
        {{index}} : {{key}} : {{value}}
    </span>

    <!--
        通過(guò)v-for遍歷數(shù)組
    -->
    <ul>
        <li v-for="a,index in arr" >
            {{index}} {{a}}
        </li>
    </ul>

    <!--
        通過(guò)v-for遍歷數(shù)組中對(duì)象
        :key 便于vue內(nèi)部做重用和排序
    -->
    <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:"我曾經(jīng)也是一個(gè)單純的少年!"},
                {id:"2",name:"小白",age:23,content:"我曾經(jīng)是一個(gè)邪惡的少年!"},
            ]
        },
        methods: {}
    });
</script>

# 總結(jié)
	1.在使用v-for的時(shí)候一定要注意加入:key 用來(lái)給vue內(nèi)部提供重用和排序的唯一key

7 .v-model 雙向綁定

v-model: 作用用來(lái)綁定標(biāo)簽元素的值與vue實(shí)例對(duì)象中data數(shù)據(jù)保持一致,從而實(shí)現(xiàn)雙向的數(shù)據(jù)綁定機(jī)制

<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>

# 總結(jié)
		1.使用v-model指令可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定 
		2.所謂雙向綁定 表單中數(shù)據(jù)變化導(dǎo)致vue實(shí)例data數(shù)據(jù)變化   vue實(shí)例中data數(shù)據(jù)的變化導(dǎo)致表單中數(shù)據(jù)變化 稱之為雙向綁定

# MVVM架構(gòu)  雙向綁定機(jī)制
	Model: 數(shù)據(jù)  Vue實(shí)例中綁定數(shù)據(jù)
	VM:   ViewModel  監(jiān)聽器
	View:  頁(yè)面  頁(yè)面展示的數(shù)據(jù)

# ***************Vue基礎(chǔ)示例講解持續(xù)中，感謝關(guān)注一下呦。***************

在線咨詢

上一篇：HTML+JS框架下開發(fā)與VUE框架下開發(fā)最基礎(chǔ)的區(qū)
下一篇：網(wǎng)頁(yè)上的文字禁止復(fù)制？教你一串代碼，3秒破解

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

CSS 偽元素基礎(chǔ)知識(shí)：first-line、fir

::first-line

::first-letter

::selection

延伸閱讀——用JavaScript操控偽元素

小結(jié)

::first-line

::first-letter

::selection

延伸閱讀——用JavaScript操控偽元素

小結(jié)

. Vue 引言

2. Vue入門

2.1 下載Vuejs

2.2 Vue第一個(gè)入門應(yīng)用

3. v-text和v-html

3.1 v-text

3.2 v-html

4.vue中事件綁定(v-on)

4.1 綁定事件基本語(yǔ)法

4.2 Vue中事件的簡(jiǎn)化語(yǔ)法

4.3 Vue事件函數(shù)兩種寫法

4.4 Vue事件參數(shù)傳遞

5.v-show v-if v-bind

5.1 v-show

5.2 v-if

5.3 v-bind

6.v-for的使用

7 .v-model 雙向綁定

您的項(xiàng)目需求