注意：
1、所謂指令忿族，其實(shí)就是元素的屬性
2锣笨、所有的指令，前提是在js中聲明了是Vue對(duì)象
3道批、參數(shù)
1错英、靜態(tài)參數(shù)：一些指令能夠接收一個(gè)“參數(shù)”，在指令名稱之后以冒號(hào)表示隆豹。例如椭岩，v-bind 指令可以用于響應(yīng)式地更新 HTML attribute：
<a v-bind:href="url">...</a>
此處的href是參數(shù)
<a v-on:click="doSomething">...</a>
v-on 指令，它用于監(jiān)聽 DOM 事件璃赡，在這里參數(shù)是監(jiān)聽的事件名
2判哥、動(dòng)態(tài)參數(shù)：可以用方括號(hào)括起來的 JavaScript 表達(dá)式作為一個(gè)指令的參數(shù)：例如：（動(dòng)態(tài)參數(shù)不是太理解）
<a v-bind:[attributeName]="url"> ... </a>
這里的 attributeName 會(huì)被作為一個(gè) JavaScript 表達(dá)式進(jìn)行動(dòng)態(tài)求值，求得的值將會(huì)作為最終的參數(shù)來使用碉考。例如塌计，如果你的 Vue 實(shí)例有一個(gè) data 屬性 attributeName，其值為 "href"侯谁，那么這個(gè)綁定將等價(jià)于 v-bind:href锌仅。
同樣的你可以使用動(dòng)態(tài)參數(shù)為一個(gè)動(dòng)態(tài)的事件名綁定處理函數(shù)：
<a v-on:[eventName]="doSomething"> ... </a>
在這個(gè)示例中，當(dāng) eventName 的值為 "focus" 時(shí)墙贱，v-on:[eventName] 將等價(jià)于 v-on:focus热芹。
實(shí)例：? 點(diǎn)擊會(huì)有彈窗的出現(xiàn)
? ? <a href="" id="add" v-on:[whos]="tanChuang">{{message}}</a>
? ? <script>
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: "#add",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? message: "張浩琦",
? ? ? ? ? ? ? ? whos: "click",
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? tanChuang: function() {
? ? ? ? ? ? ? ? ? ? alert(123456)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? ? ? </script>
3、在我們的模板中惨撇，我們一直都只綁定簡(jiǎn)單的屬性鍵值伊脓。但實(shí)際上，對(duì)于所有的數(shù)據(jù)綁定串纺，Vue.js 都提供了完全的 JavaScript 表達(dá)式支持丽旅。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
以下符合邏輯但是不是表達(dá)式的也不會(huì)生效
<!-- 這是語句，不是表達(dá)式 -->
{{ var a = 1 }}
<!-- 流控制也不會(huì)生效纺棺，請(qǐng)使用三元表達(dá)式 -->
{{ if (ok) { return message } }}
v-text指令
設(shè)置標(biāo)簽的文本值（textContent）
1榄笙、v-text已經(jīng)將文本的內(nèi)容替換，所以源文本的內(nèi)容不會(huì)顯示
2祷蝌、{{content}}實(shí)在原來的文本的基礎(chǔ)上進(jìn)行拼接茅撞。
<div id="add">
v-text的使用：
? ? ? ? <!-- h2的內(nèi)容被message的v-text指向 -->
? ? ? ? <h2 v-text="message">
? ? ? ? ? ? <!-- 因?yàn)橛衯-text，所以{{info}}里面的內(nèi)容顯示不出來 -->
? ? ? ? ? ? {{ info }}
? ? ? ? ? ? <!-- </h2>
? ? ? ? 此時(shí)文本的內(nèi)容 “深圳”也顯示不出來 -->
? ? ? ? ? ? <h2 v-text="info">
? ? ? ? ? ? ? ? 深圳
? ? ? ? ? ? </h2>
? ? ? ? ? ?
{{}}的使用：
? ? ? ? ? ? <!-- {{message}}表示拼接，所以此時(shí)的深圳可以顯示出來 -->
? ? ? ? ? ? <h2>
? ? ? ? ? ? ? ? {{message}}深圳
? ? ? ? ? ? </h2>
? ? ? ? ? ?
v-text拼接文本? ：
? ? ? ? ? ? ? <!-- v-text拼接文本 -->
? ? ? ? ? ? <h2 v-text="info+'我是v-text拼接的字符串'"></h2>
? ? ? ? ? ? <!-- v-text插入多個(gè)屬性文本 -->
? ? ? ? ? ? <h2 v-text="info+message"></h2>
? ? ? ? ? ?
? ? </div>
? ? <script>
? ?
? ? ? ? var app = new Vue({
? ? ? ? ? ? el: "#add",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? message: "黑馬程序員",
? ? ? ? ? ? ? ? info: "白馬程序員"
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
v-once指令
通過使用 v-once 指令米丘，你也能執(zhí)行一次性地插值剑令，當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會(huì)更新拄查。但請(qǐng)留心這會(huì)影響到該節(jié)點(diǎn)上的其它數(shù)據(jù)綁定：
<span v-once>這個(gè)將不會(huì)改變: {{ msg }}</span>
msg只隨著屬性的變化而變化一次
v-html指令
設(shè)置元素的innerHTML
1吁津、更新文本的值，直接將原文本替換堕扶，和v-html差不多
2碍脏、當(dāng)v-html指向的內(nèi)容符合HTML標(biāo)簽的形式時(shí)，會(huì)生成新的標(biāo)簽稍算。
? <div id="add">
?
v-html更新文本?
? ? ? ? <!-- 黑馬程序員被替換為白馬程序員黃馬程序員綠馬程序員 -->
? ? ? ? <span v-html="content+info+'綠馬程序員'">黑馬程序員</span>
? ? ?
v-html新增標(biāo)簽
? ? ? ? <!--如果v-html指向的內(nèi)容符合標(biāo)簽的形式典尾，則生成一個(gè)html標(biāo)簽-->
? ? ? ? <!-- 原div里面的內(nèi)容全部都被替換，生成一個(gè)內(nèi)容為程序員的span標(biāo)簽糊探。 -->
? ? ? ?
? ? ? ? <div v-html="message">
? ? ? ? </div>
? ? </div>
? ? <script>
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: "#add",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? content: "白馬程序員",
? ? ? ? ? ? ? ? info: "黃馬程序員",
? ? ? ? ? ? ? ? message: "<span>程序員</span>"
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
v-html和v-text的對(duì)比
? ? ? <span v-html="weblink"></span><br>? ? ? ? //顯示的是一個(gè)百度鏈接
? ? ? ?
? ? ? ? <span v-text="weblink"></span>? ? ? ? ? //顯示的是<a href='www.baidiu.com'>百度鏈接</a>
? ? ? ? ?
? ? <script>
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: "#add",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? weblink: "<a href='www.baidiu.com'>百度鏈接</a>"
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
v-on指令
為元素綁定事件 監(jiān)聽DOM事件
1钾埂、格式
1、<input type="button" value="事件綁定"v-on:事件名="方法">
2科平、<input type="button" value="事件綁定" @事件名="方法">
事件名為常用事件 click mouseover 等
2褥紫、點(diǎn)擊事件
<input type="button" value="事件綁定" v-on:click="方法">
或者 v-on：換成@
<input type="button" value="事件綁定" @click="方法">
3、直接更改屬性的值
<button v-on:click="foo = 'baz'">Change it</button>
4匠抗、Vue寫方法
? ? ? var app = new Vue({
? ? ? ? ? ? el: "add",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? message: "張浩琦",
? ? ? ? ? ? ? ? foo:"123"
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? dolt: function() {
? ? ? ? ? ? ? ? ? ? ? //邏輯
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
5故源、觸發(fā)函數(shù)
觸發(fā)函數(shù)時(shí)會(huì)出現(xiàn)集中不同情況
1、一個(gè)按鈕觸發(fā)一個(gè)函數(shù)
? 無參數(shù)時(shí)? 方法的名稱可以不加小括號(hào)
? <input type="button" id="add" value="點(diǎn)擊觸發(fā)函數(shù)" v-on:click="dolt">
?
2汞贸、一個(gè)按鈕觸發(fā)兩個(gè)函數(shù)（兩個(gè)函數(shù)都需要帶小括號(hào)绳军，執(zhí)行順序按照先后順序）
<input type="button" id="add" value="點(diǎn)擊觸發(fā)函數(shù)" v-on:click="dolt()+dolttwo()">
? ?
? ?
? ? <script>
? ? ? ? var app = new Vue({
? ? ? ? ? ? el: "#add",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? message: "張浩琦",
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? dolt: function() {
? ? ? ? ? ? ? ? ? ? alert(this);
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? dolttwo: function() {
? ? ? ? ? ? ? ? ? ? console.log(this); // this指的是當(dāng)前創(chuàng)建的app這個(gè)Vue對(duì)象
? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? console.log(this.message); //張浩琦
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
Vue的操作重在操作數(shù)據(jù)（文本域），而非操作Dom元素(操作Vue的時(shí)候時(shí)矢腻，需要使用this)
使用事件點(diǎn)擊更改謀個(gè)標(biāo)簽的內(nèi)容
點(diǎn)擊之后门驾，調(diào)用dolttwo方法，message的內(nèi)容由張浩琦換成劉倩倩多柑，span標(biāo)簽里面的內(nèi)容也更改為現(xiàn)在的message內(nèi)容
<span id="add" v-on:click="dolttwo">
? ? ? ? {{message}}
</span>
? ? <script>
? ? ? ? var app = new Vue({
? ? ? ? ? ? el: "#add",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? message: "張浩琦",
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? dolt: function() {
? ? ? ? ? ? ? ? ? ? alert(this);
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? dolttwo: function() {
? ? ? ? ? ? ? ? ? ? this.message = "劉倩倩"
? ? ? ? ? ? ? ? ? //this.message+="劉倩倩";
? ? ? ? ? ? ? ? ? 函數(shù)每調(diào)用一次奶是，message后面就添加一個(gè)劉倩倩
? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? //this.message-="劉倩倩";
? ? ? ? ? ? ? ? ? 點(diǎn)擊一次，顯示Nan;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
計(jì)數(shù)器的實(shí)戰(zhàn)
0-10之間
<body>
? ? <div id="pss">
? ? ? ? <button class="one" @click="sub">減少</button>
? ? ? ? <span class="one" v-text="message"></span>
? ? ? ? <button class="one" @click="add">增加</button>
? ? </div>
? ? <script>
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: "#pss",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? message: 0
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? add() {
? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? console.log(this)
? ? ? ? ? ? ? ? ? ? if (this.message >= 10) {
? ? ? ? ? ? ? ? ? ? ? ? this.message = 0;
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? this.message += 1;
? ? ? ? ? ? ? ? ? ? ? ? //? ? 或者
? ? ? ? ? ? ? ? ? ? // this.message++;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? sub() {
? ? ? ? ? ? ? ? ? ? if (this.message <= 0) {
? ? ? ? ? ? ? ? ? ? ? ? this.message = 10;
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? this.message -= 1;
? ? ? ? ? ? ? ? ? ? ? ? //? ? 或者
? ? ? ? ? ? ? ? ? ? // this.message--;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? console.log(this)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>
v-on補(bǔ)充
傳遞自定義參數(shù)竣灌，事件修飾符@keyup后的.XXX(https://cn.vuejs.org/v2/api/#v-on)
方法傳遞參數(shù) <input type="button" @click="doIt(p1,p2)">
鍵盤監(jiān)聽（以回車為例）
<input type="text" @keyup.enter="sayHi('小鐵',555)">
或者 <input type="text" v-on:keyup.enter="sayHi('小鐵',555)">
如果不加.enter聂沙，則按鍵盤上的任意按鈕，都會(huì)調(diào)用sayHi('小鐵',555)的方法
<div id="add">
? ? ? ? <!-- 鼠標(biāo)? -->
? ? ? ? <input type="button" value="老鐵666" @click="doIt('老鐵',666)">
? ? ? ? <!-- 鍵盤 -->
? ? ? ? <input type="text" @keyup.enter="sayHi('小鐵',555)">
? ? </div>
? ? <script>
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: "#add",
? ? ? ? ? ? data: {
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? //含有參數(shù)的方法
? ? ? ? ? ? ? ? doIt: function(p1, p2) {
? ? ? ? ? ? ? ? ? ? console.log(p1, p2)
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? sayHi: function(p3, p4) {
? ? ? ? ? ? ? ? ? ? console.log(p3, p4)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
訪問原生事件DOM對(duì)象$event
? <div id="add">
? ? ? ? <button v-on:click="warn($event)">訪問原生事件對(duì)象</button>
? ? ? ? //如果此處參數(shù)是event初嘹，則輸出的時(shí)候會(huì)報(bào)錯(cuò)
? ? </div>
? ? <script>
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: "#add",
? ? ? ? ? ? data: {
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? warn: function(event) {
? ? ? ? ? ? ? ? ? ? console.log(event)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
v-show指令
根據(jù)表達(dá)值的真假及汉，切換元素的顯示和隱藏(其實(shí)是操作元素的display)
1、< img src="" v-show="true">;true顯示屯烦，false不顯示
2坷随、v-show里面的值還可以加判斷
<div id="add">
v-show="false" 標(biāo)簽元素不顯示
? ? ?
? ? ? ? <img src="./image/q1.jpg" alt="" v-show="false">
? ? ? ?
v-show="isShow" isShow的值為false? 標(biāo)簽元素不顯示
? ? ? ? <img src="./image/q2.jpg" alt="" v-show="isHidde">
? ? ? ?
v-show="isShow" isShow的值為true? 標(biāo)簽元素顯示 點(diǎn)擊不顯示
? ? ? ? <img src="./image/q2.jpg" alt="" v-show="isShow" @click="visPic">
? ? ? ?
v-show="age==16"顯示房铭，否則隱藏? 此處v-show里面的值為boolean值
? ? ? ? <img src="./image/q3.jpg" v-show="age==16" alt="" @click="addAge">
? ? </div>
? ? <script>
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: "#add",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? isShow: true,
? ? ? ? ? ? ? ? isHidde: false,
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? visPic() {
? ? ? ? ? ? ? ? ? ? //使isShow的值變?yōu)閠rue
? ? ? ? ? ? ? ? ? ? this.isShow = false
? ? ? ? ? ? ? ? ? ? //或者
? ? ? ? ? ? ? ? ? ? this.isShow = !this.isShow
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? //此方法每調(diào)用一次，age增加1
? ? ? ? ? ? ? ? addAge() {
? ? ? ? ? ? ? ? ? ? this.age++;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
v-if指令
根據(jù)表達(dá)式的真假温眉，切換元素顯示和隱藏（操縱Dom元素缸匪，而非樣式，v-show操縱的是樣式）
1类溢、用法和v-show完全一樣凌蔬，v-if改變的是Dom元素的添加或刪除，v-show改變的是樣式豌骏，不會(huì)新增加Dom元素和刪除Dom元素的
2龟梦、實(shí)際工作中，頻繁切換的元素用v-show窃躲，反之用v-if，因?yàn)椴僮鱀om消耗比較大钦睡。
v-if和v-else的使用
v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面蒂窒，否則它將不會(huì)被識(shí)別。
<div id="add">
? ? ? ? <h1 v-if="awesome">張浩琦</h1>
? ? ? ? <h1 v-else>是的</h1>
? ? ? ? <h1></h1>
? ? </div>
? ? <script>
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: "#add",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? awesome: false //此時(shí)顯示的是? 是的
? ? ? ? ? ? ? ? ? ? //當(dāng)為true時(shí)? 顯示的是張浩琦
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
? ?
template元素荞怒，一個(gè)不可見的包裹元素
? ? <div id="add">
? ? ? ? <h1 v-else>是的</h1>
? ? ? ? <h1></h1>
? ? ? ? <template v-if="ok">
? ? ? ? ? ? <h1>Title</h1>
? ? ? ? ? ? <p>Paragraph 1</p>
? ? ? ? ? ? <p>Paragraph 2</p>
? ? ? ? ? </template>
? ? </div>
? ? <script>
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: "#add",
? ? ? ? ? ? data: {
? ? ? ? ? ?
? ? ? ? ? ? ? ? ok: true? //此時(shí)template里面包裹的元素都可以顯示出來洒琢。 如果不添加vue指令，不管是直接在template元素里面添加內(nèi)容還是添加元素褐桌，template里面的內(nèi)容都顯示不出來
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
v-else-if
? <div id="add">
? ? ? ? <template v-if="ok">
? ? ? ? ? ? ? <h3 v-if="type===A">A</h3>
? ? ? ? ? ? ? <h3 v-if="type===B">B</h3>
? ? ? ? ? ? ? <h3 v-if="type===C">C</h3>
? ? ? ? ? ? ? <h3 v-if="type===D">D</h3>
? ? ? ? ? ? ? <h3 v-else>沒有選項(xiàng)了啊</h3>
? ? ? ? ? </template>
? ? </div>
? ? <script>
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: "#add",
? ? ? ? ? ? data: {
? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ok: true, //此時(shí)template里面包裹的元素都可以顯示出來衰抑。 如果不添加vue指令，不管是直接在template元素里面添加內(nèi)容還是添加元素荧嵌，template里面的內(nèi)容都顯示不出來
? ? ? ? ? ? ? ? type: "132"? //此時(shí)網(wǎng)頁(yè)顯示的是沒有選項(xiàng)了啊
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
用key 管理可復(fù)用的元素
可復(fù)用元素舉例 此處的表單元素即可復(fù)用元素 這樣做其實(shí)是不符合實(shí)際的呛踊，要用key屬性來解決
? <div id="add">
? ? ? ? <button v-on:click="change">點(diǎn)擊切換</button>
? ? ? ? <!-- 點(diǎn)擊之后，元素的內(nèi)容改變啦撮，但是input已經(jīng)輸入的值卻不發(fā)生改變谭网， -->
? ? ? ? <template v-if="loginType === 'username'">
? ? ? ? ? ? <label>Username</label>
? ? ? ? ? ? <input placeholder="Enter your username">
? ? ? ? ? ? //更改為這個(gè)，元素里面的內(nèi)容就會(huì)重新渲染赃春，而不是重復(fù)使用 //<input placeholder="Enter your username"? key="one">
? ? ? ? ? </template>
? ? ? ? <template v-else>
? ? ? ? ? ? <label>Email</label>
? ? ? ? ? ? <input placeholder="Enter your email address">
? ? ? ? ? ? //這里也需要更改愉择，不能和復(fù)用的元素的key值一樣
? ? ? ? ? ? //<input placeholder="Enter your username"? key="two">
? ? ? ? ? </template>
? ? </div>
? ? <script>
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: "#add",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? loginType: "username",
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? change: function() {
? ? ? ? ? ? ? ? ? ? console.log(this.loginType)
? ? ? ? ? ? ? ? ? ? this.loginType = "sef"
? ? ? ? ? ? ? ? ? ? console.log(this.loginType)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
v-bind指令
操作元素的屬性（如：src，title织中，class等）
格式
1锥涕、< img v-bind:src ="imgSrc" >
2、< img v-bind:title="imgTitle+'123456'"> 拼接
3狭吼、< img v-bind:class="isActive?'active':''">三元表達(dá)式的形式表示判斷,判斷isActive的值层坠，如果符合，class的屬性值為active搏嗡，如果不符合窿春，class的屬性值為空拉一。（這種寫法比較麻煩，可以采用對(duì)象的形式）
4旧乞、< img v-bind:class ="{active:isActive}"> 對(duì)象的形式表示判斷蔚润，如果isActive的值為true，class的屬性為active尺栖，否則class的屬性為空
5嫡纠、簡(jiǎn)寫形式：< img :class ="{active:isActive}">（v-bind可以刪除，但是在屬性前需要加一個(gè)：）
? <div id="add">
? ? ? ? <!-- 為一個(gè)標(biāo)簽的屬性賦予一個(gè)變量的值 -->
? ? ? ? <img v-bind:src="imgSrc"></img>
? ? ? ? 為一個(gè)標(biāo)簽賦的屬性賦予兩個(gè)變量的值
? ? ? ? <span v-bind:class="[classes,changeColor]">
? ? ? ? <!-- 為一個(gè)標(biāo)簽的屬性賦值延赌，外加拼接 -->
? ? ? ? <span v-bind:title="imgTitle+'我是拼接的部分'">啦啦啦啦啦</span>
? ? ? ? <div v-bind:class="'active'+' '+'bgBorder'">
? ? ? ? ? ? <img src="./image/q2.jpg" alt="">
? ? ? ? </div>
? ? ? ? <div>
? ? ? ? ? ? <!-- 對(duì)象形式判斷條件是否成立除盏，成立變?yōu)閴K元素，不成立變?yōu)樾性?-->
? ? ? ? ? ? <span v-bind:class="{active:judge}">添加一個(gè)屬性值</span>
? ? ? ? ? ? <!--待解決-->
? ? ? ? ? ? <!-- <span v-bind:class="{classes:judge}">判斷并把vue對(duì)象的屬性值作為此標(biāo)簽的class值</span> -->
? ? ? ? ? ? <br>
? ? ? ? ? ? <!-- 三元表達(dá)式形式判斷添加一個(gè)和兩個(gè)class屬性值 -->
? ? ? ? ? ? <span v-bind:class="judge?'active':''">添加一個(gè)屬性值</span>
? ? ? ? ? ? <span v-bind:class="judge?'active bgBorder':''">添加兩個(gè)屬性值</span>
? ? ? ? </div>
? ? </div>
? ? <script>
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: "#add",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? imgSrc: "./image/q1.jpg",
? ? ? ? ? ? ? ? imgTitle: "這是一個(gè)標(biāo)簽",
? ? ? ? ? ? ? ? judge: true,
? ? ? ? ? ? ? ? classes: "fonts"挫以，
? ? ? ? ? ? ? ? changeColor: "red"
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
? ?
綜合寫法
<div id="demo">
<span :class="[one,{classA:classa,classB:classb}]"></span>
</div>
var vm = new Vue({
el:"#demo",
data:{
one:"string",
classa:true,
classb:false
}
})
效果 <span class = "string classA">
5者蠕、遺留問題
待解決
問題一：判斷并把vue對(duì)象的變量作為此標(biāo)簽的class值
? ? ? ? <span v-bind:class="{classes:judge}">判斷并把vue對(duì)象的屬性值作為此標(biāo)簽的class值</span>
? ? ? ? //此時(shí)添加的span標(biāo)簽的class的屬性值為classes而非fonts
? ? ? ?
解決方式：
? ?
? ? ? ?
問題二：? ? 如何用對(duì)象的形式一次添加兩個(gè)屬性值
對(duì)象形式判斷條件是否成立，成立變?yōu)閴K元素，不成立變?yōu)樾性?/p>
? ? ? ? ? ? <span v-bind:class="{active:judge}">添加一個(gè)屬性值</span>
? ? ? ? ? ?
解決措施:兩個(gè)屬性值判斷之間用逗號(hào)隔開
? <span v-bind:class="{active:judge,fonts:judge}">添加一個(gè)屬性值41564156416</span>
?
? ? ? ? ? ?
? ? ? ? ? ?
? ? ? ? ? ?
? ? ? ? ? ?
? ? ? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: "#add",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? imgSrc: "./image/q1.jpg",
? ? ? ? ? ? ? ? imgTitle: "這是一個(gè)標(biāo)簽",
? ? ? ? ? ? ? ? judge: true,
? ? ? ? ? ? ? ? classes: "fonts"
? ? ? ? ? ? }
? ? ? ? })
v-bind指令的詳細(xì)補(bǔ)充 包括樣式的改變
修改class和style， v-bind指令與一半屬性共存
對(duì)象語法
樣式一：
.static {
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? border: 1px solid red;
? ? ? ? }
? ? ? ?
? ? ? ? .backgroundcolor {
? ? ? ? ? ? background-color: green;
? ? ? ? }
? ? ? ?
? ? ? ? .divBig {
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 200px;
? ? ? ? }
<div id="add" class="static"? 一半屬性class? 還可以添加v-bind屬性 v-bind:class="{divBig:classOne,backgroundcolor:classTwo}">
? ? ? ? <span>1234656</span>
? ? </div>
? ? <script>
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: "#add",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? classOne: true,? 如果classOne為false凿傅，則divBig此類名屬性則無法發(fā)揮作用
? ? ? ? ? ? ? ? classTwo: true
? ? ? ? ? ? ? ? 與上同理
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
? ?
樣式二：將所有的樣式寫在一個(gè)屬性對(duì)象中
.active {
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? background-color: red;
? ? ? ? }
<div id="add" v-bind:class="classObject"></div>
? ? <script>
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: "#add",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? classObject: {
? ? ? ? ? ? ? ? ? ? //此時(shí)的類名為active
? ? ? ? ? ? ? ? ? ? active: true,
? ? ? ? ? ? ? ? ? ? ' text-danger': false
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
? ?
使用計(jì)算屬性（看不懂）
? <div id="app" v-bind:class="classObject">
? ? </div>
? ? <script>
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: "#app",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? active: true,
? ? ? ? ? ? ? ? error: null
? ? ? ? ? ? },
? ? ? ? ? ? computed: {
? ? ? ? ? ? ? ? classObject: function() {
? ? ? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? ? ? active: this.active && !this.error,
? ? ? ? ? ? ? ? ? ? ? ? 'text-danger': this.error && this.error.type === 'fatal'
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
? ?
? ?
? ?
數(shù)組語法
可以把一個(gè)數(shù)組傳給 v-bind:class撒轮，以應(yīng)用一個(gè) class 列表：
樣式一：將對(duì)象存入到數(shù)組中
? ? ? ? .active {
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? }
? ? ? ?
? ? ? ? .error {
? ? ? ? ? ? background-color: red;
? ? ? ? }
? ? ? ?
? ? ? ?
? ? ? ?
? ? ? ?
<div id="add" v-bind:class="[activeClass,errorClass]">
? ? </div>
? ?
? ? <script>
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: "#add",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? activeClass: "active",
? ? ? ? ? ? ? ? errorClass: "error",
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
? ?
樣式二：三元表達(dá)式形式
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
? .active {
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? }
? ? ? ?
? ? ? ? .error {
? ? ? ? ? ? background-color: red;
? ? ? ? }
? <!-- 三元表達(dá)式，判斷屬性 -->
? ? <div id="add" v-bind:class="[activeClass,panduan?'':errorClass]">
? ? </div>
? ? <script>
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: "#add",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? activeClass: "active",
? ? ? ? ? ? ? ? errorClass: "error",
? ? ? ? ? ? ? ? panduan: false,
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
對(duì)象語法在數(shù)組中使用
? ? ? ? .active {
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? }
? ? ? ?
? ? ? ? .error {
? ? ? ? ? ? background-color: red;
? ? ? ? }
? ? ? ?
? ? ? ? .question {
? ? ? ? ? ? border: 10px solid black;
? ? ? ? }
<!-- 數(shù)組語法和對(duì)象語法的混合使用 -->
? ? <div id="add" v-bind:class="[{active:activeClass,error:errorClass},questionClass]"></div>
? ? <script>
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: "#add",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? activeClass: false,
? ? ? ? ? ? ? ? errorClass: true,
? ? ? ? ? ? ? ? questionClass: "question"
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
? ?
用在組件上（沒有操作過，官方原文檔）
當(dāng)在一個(gè)自定義組件上使用 class 屬性時(shí)，這些 class 將被添加到該組件的根元素上面。這個(gè)元素上已經(jīng)存在的 class 不會(huì)被覆蓋待榔。
例如，如果你聲明了這個(gè)組件：
Vue.component('my-component', {
? template: '<p class="foo bar">Hi</p>'
})
然后在使用它的時(shí)候添加一些 class：
<my-component class="baz boo"></my-component>
HTML 將被渲染為:
<p class="foo bar baz boo">Hi</p>
對(duì)于帶數(shù)據(jù)綁定 class 也同樣適用：
<my-component v-bind:class="{ active: isActive }"></my-component>
當(dāng) isActive 為 truthy[1] 時(shí)流济，HTML 將被渲染成為：
<p class="foo bar active">Hi</p>
綁定內(nèi)聯(lián)樣式
v-bind:style 的對(duì)象語法十分直觀——看著非常像 CSS锐锣，但其實(shí)是一個(gè) JavaScript 對(duì)象。CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case袭灯，記得用引號(hào)括起來) 來命名：
當(dāng) v-bind:style 使用需要添加瀏覽器引擎前綴的 CSS 屬性時(shí)刺下，如 transform，Vue.js 會(huì)自動(dòng)偵測(cè)并添加相應(yīng)的前綴稽荧。
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"這樣寫只會(huì)渲染數(shù)組中最后一個(gè)被瀏覽器支持的值橘茉。在本例中，如果瀏覽器支持不帶瀏覽器前綴的 flexbox姨丈，那么就只會(huì)渲染 display: flex畅卓。
<div id="add" v-bind:style="[{color:activeColor,fontSize:fontSize+'px'},styleObject]">
? ? ? ? 張浩琦
? ? </div>
? ? <script>
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: "#add",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? activeColor: 'yellow',
? ? ? ? ? ? ? ? fontSize: '30',
? ? ? ? ? ? ? ? styleObject: {
? ? ? ? ? ? ? ? ? ? border: "20px solid red",
? ? ? ? ? ? ? ? ? ? width: "200px",
? ? ? ? ? ? ? ? ? ? height: "200px"
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
使用方法和class的更改差不多? ?
? ?
v-for指令
根據(jù)數(shù)據(jù)生成列表結(jié)構(gòu)（列表的生成依賴數(shù)據(jù)，所以在data里面建立）
v-for指定的內(nèi)容會(huì)隨著vue對(duì)象的數(shù)據(jù)的改變而進(jìn)行dom節(jié)點(diǎn)數(shù)量的改變
語法：
語法一：列表的每一項(xiàng)內(nèi)容為數(shù)組的內(nèi)容（列表里面如果有原內(nèi)容蟋恬，則原內(nèi)容每一次都會(huì)被打游膛恕）
<div id="app>
<ul>
<li v-for="item in arr">張浩琦{{item}}</li>
//item是遍歷的每一項(xiàng)，可以改名字歼争，但是得遵循命名規(guī)則
//in 關(guān)鍵字 不能修改
//arr 要循環(huán)的數(shù)據(jù)名
//如果li標(biāo)簽里面原本就有內(nèi)容拜马，例如“張浩琦”渗勘，那么遍歷的每一項(xiàng)數(shù)據(jù)生成的節(jié)點(diǎn)都是張浩琦
</ul>
</div>
var app = new? Vue({
? ? el:"#app",
? ? data:{
? ? ? ? arr:[1,2,3,4,5]
? ? }
})
結(jié)果
張浩琦
張浩琦
張浩琦
張浩琦
張浩琦
語法中的內(nèi)容不一樣
? 內(nèi)容用一個(gè)對(duì)象儲(chǔ)存
?
<html>
<div id="edd">
? ? ? ? <ul>
? ? ? ? ? ? <button @click="add">增加</button>
? ? ? ? ? ? <button @click="remove">移除</button>
? ? ? ? ? ? <li v-for="item in objArr" v-bind:title="item.name">
? ? ? ? ? ? ? ? {{item.name}}
? ? ? ? ? ? </li>
? ? ? ? </ul>
? ? </div>
? ?
? ?
<script>
var am = new Vue({
? ? ? ? ? ? el: "#edd",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? //綁定一個(gè)對(duì)象的數(shù)組
? ? ? ? ? ? ? ? objArr: [{
? ? ? ? ? ? ? ? ? ? name: "張浩琦"
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? name: "劉倩倩"
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? name: "花粥"
? ? ? ? ? ? ? ? }]
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? add: function() {
? ? ? ? ? ? ? ? ? ? //push增加 方法，方法沒執(zhí)行一次俩莽，對(duì)象數(shù)組objArr里面增加一個(gè)對(duì)象“張雨墨”
? ? ? ? ? ? ? ? ? ? this.objArr.push({
? ? ? ? ? ? ? ? ? ? ? ? name: "張雨墨"
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? remove: function() {
? ? ? ? ? ? ? ? ? ? //shift()? 刪除最左邊的元素旺坠，方法每執(zhí)行一次，數(shù)組里面就移除一個(gè)objArr最里面的一個(gè)對(duì)象
? ? ? ? ? ? ? ? ? ? this.objArr.shift()
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? ? ?
? ? ? ?
? ? ? ? 內(nèi)容顯示出數(shù)據(jù)的索引
? ? ? ? <li v-for="(item,index) in arr">
? ? ? ? ? ? ? ? {{index}}{{item}}
? ? ? ? ? </li>
? ? ? ? ?
? ? ? ? ? var bm = new Vue({
? ? ? ? ? ? ? ? el: "#app",
? ? ? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? ? ? arr: [1, 2, 3, 4, 5]
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
v-for里使用值范圍
<div id="add">
? ? ? ? <li v-for="n in 10">{{n}}</li>
? ? </div>
? ? <script>
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: "#add",
? ? ? ? ? ? data: {
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
? ? 結(jié)果1-10
v-model（model 模型扮超；典型取刃；模特兒）
便捷獲取和設(shè)置表單元素的值（雙向數(shù)據(jù)綁定） 需要和表單元素一起使用
雙向綁定即當(dāng)message的內(nèi)容改變，表單的內(nèi)容會(huì)隨著改變出刷，表單的內(nèi)容改變璧疗，message的內(nèi)容也會(huì)隨著改變
? <div id="add">
? ? ? ? <input type="text" v-model="message">
? ? ? ? <!-- span里面的內(nèi)容會(huì)隨著message的變化而變化，message會(huì)隨著表單錄入的內(nèi)容變化而變化 -->
? ? ? ? <span>{{message}}</span>
? ? ? ? <input type="button" value="點(diǎn)擊更改message的內(nèi)容為劉倩倩" @click="add">
? ? </div>
? ? <script>
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: "#add",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? message: "張浩琦"
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? add: function() {
? ? ? ? ? ? ? ? ? ? this.message = "劉倩倩"
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
修飾符（不是太清楚）
.lazy（懶加載）
在默認(rèn)情況下馁龟，v-model 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步 (除了上述輸入法組合文字時(shí))崩侠。你可以添加 lazy 修飾符，從而轉(zhuǎn)變?yōu)槭褂?change 事件進(jìn)行同步：
<div id="add">
沒有.lazy
? ? ? ? <input type="text" v-model="message" v-on:change="nub">
? ? ? ? <!-- 當(dāng)表單中的值發(fā)生改變時(shí)屁柏，會(huì)調(diào)用nub方法啦膜，但是v-model控制的對(duì)象屬性導(dǎo)致表單的值發(fā)生改變時(shí)，并不會(huì)調(diào)用nub方法 -->
? ? ? ? <button v-on:click="change">點(diǎn)擊更改</button>
? ? ? ?
加上.lazy
<input type="text" v-model.lazy="message">
? <span>
? ? ? ? ? ? {{message}}
? ? ? ? </span>
span中的值并不會(huì)隨著message的改變而同步改變淌喻，只有表單失去焦點(diǎn)時(shí)，span中的值才會(huì)同步改變雀摘，類似于change
? ? </div>
? ? <script>
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: "#add",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? message: "張浩琦"
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? change: function() {
? ? ? ? ? ? ? ? ? ? this.message = "劉倩倩"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? nub: function() {
? ? ? ? ? ? ? ? ? ? alert("15465")
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
<!-- 在“change”時(shí)而非“input”時(shí)更新 -->
<input v-model.lazy="msg" >
.number
如果想自動(dòng)將用戶的輸入值轉(zhuǎn)為數(shù)值類型裸删，可以給 v-model 添加 number 修飾符：
<input v-model.number="age" type="number">
這通常很有用，因?yàn)榧词乖?type="number" 時(shí)阵赠，HTML 輸入元素的值也總會(huì)返回字符串涯塔。如果這個(gè)值無法被 parseFloat() 解析，則會(huì)返回原始的值清蚀。
.trim
如果要自動(dòng)過濾用戶輸入的首尾空白字符匕荸，可以給 v-model 添加 trim 修飾符：
<input v-model.trim="msg">
.ref像v-model一樣，實(shí)現(xiàn)數(shù)據(jù)的雙向綁定（主要是為了獲取當(dāng)前的元素對(duì)象input對(duì)象）
<div id="add">
? ? ? ? <!-- ref目的：獲取表單的內(nèi)容枷邪，并把內(nèi)容賦值給span標(biāo)簽榛搔，間接實(shí)現(xiàn)雙向綁定? 類似于v-model -->
? ? ? ? <!-- 獲取表單的內(nèi)容要獲取事件，此處使用的是keyup东揣，鍵盤每按下一次践惑，就調(diào)用一次方法 -->
? ? ? ? <input type="text" ref="name" @keyup="getName">
? ? ? ? <span>{{name}}</span>
? ? ? ? <input type="text" ref="age" @keyup="getAge">
? ? ? ? <span>{{age}}</span>
? ? </div>
? ? <script>
? ? ? ? new Vue({
? ? ? ? ? ? el: "#add",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? name: " ",
? ? ? ? ? ? ? ? age: 32
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? getName: function() {
? ? ? ? ? ? ? ? ? ? console.log(this.$refs);
? ? ? ? ? ? ? ? ? ? //? 相當(dāng)于ref的父級(jí)，包含了標(biāo)簽中ref的所有內(nèi)容? 所以此處輸出的也有age的內(nèi)容
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? getAge: function() {
? ? ? ? ? ? ? ? ? ? console.log(this.$refs.age.value);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
項(xiàng)目實(shí)戰(zhàn)
小黑記事本項(xiàng)目
學(xué)到的內(nèi)容
1嘶卧、數(shù)組元素的長(zhǎng)度 content.length
2尔觉、 this.content.splice(index, 1); 刪除指定的索引內(nèi)容，如果是2芥吟，則刪除當(dāng)前索引內(nèi)容和之后的那個(gè)索引內(nèi)容
? <div id="littleBlack">
? ? ? ? <!-- 回車鍵向表格中錄入內(nèi)容侦铜，q鍵清除表格中的所有內(nèi)容 -->
? ? ? ? <input type="text" v-model="message" @keyup.enter="addContent" @keyup.q="clearAll">
? ? ? ? <ul>
? ? ? ? ? ? <li v-for="(item,index) in content" @click="remove(index)">{{index+1}}{{item}}</li>
? ? ? ? </ul>
? ? ? ? <!-- 統(tǒng)計(jì)列表中元素的個(gè)數(shù)即統(tǒng)計(jì)數(shù)組的長(zhǎng)度? 當(dāng)數(shù)組的長(zhǎng)度為0時(shí)专甩，隱藏此項(xiàng)功能-->
? ? ? ? <span v-text="'個(gè)數(shù)'+content.length" v-if="content.length!=0"></span>
? ? </div>
? ? <script>
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: "#littleBlack",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? message: "泡面",
? ? ? ? ? ? ? ? content: ["吃飯飯", "睡覺覺", "敲代碼"]
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? addContent: function() {
? ? ? ? ? ? ? ? ? ? this.content.push(this.message);
? ? ? ? ? ? ? ? ? ? this.message = " ";
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? remove: function(index) {
? ? ? ? ? ? ? ? ? ? console.log(index);
? ? ? ? ? ? ? ? ? ? //splice(index,1)刪除指定的索引，一次刪除一個(gè)元素? 如果是2刪除索引和索引后面的元素
? ? ? ? ? ? ? ? ? ? this.content.splice(index, 1);
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? clearAll: function() {
? ? ? ? ? ? ? ? ? ? this.content = " ";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
