成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

Vue整理01---模板語(yǔ)法

sean / 2788人閱讀

摘要:部分起始值步長(zhǎng)增加減少輸出結(jié)果部分這個(gè)例子用到了框的雙向綁定。的打印結(jié)果大于結(jié)果小于動(dòng)態(tài)改變背景圖片

1.基礎(chǔ)知識(shí)

1.new Vue 創(chuàng)建一個(gè)實(shí)例,傳入一個(gè)對(duì)象。
2.對(duì)象包括:

el:作用域
data:所用到的數(shù)據(jù)
methods:所用到的函數(shù)

3.{{}} 數(shù)據(jù)綁定 其中不止可以綁定data,也可以綁定函數(shù)(如果這個(gè)函數(shù)有返回值并且返回值是字符串之類(lèi)的可以輸出的東西)
4.{{}}大括號(hào)只能綁定內(nèi)容,不能在html屬性里使用,如:< a href={{}}} >,這是不行的
5.上面那個(gè)可以使用 v-bind:href="link" --> 屬性值的綁定,告訴html : 后面的數(shù)據(jù)是綁定的。
6.使用v-html綁定html標(biāo)簽而不是直接輸出字符串,不過(guò)這樣會(huì)造成跨站腳本攻擊,不安全。

幾個(gè)簡(jiǎn)單的例子: 1. 2個(gè)輸入框,1個(gè)接收初始值,一個(gè)接收步長(zhǎng),兩個(gè)按鈕,一個(gè)增加一個(gè)減少,一行輸出文字。

html部分:

起始值 步長(zhǎng)

輸出結(jié)果:{{result}}

js部分


這個(gè)例子用到了:
1.v-model input框的雙向綁定。
2.v-on:click 監(jiān)聽(tīng)click事件,其他事件道理類(lèi)似。

2.在上一個(gè)例子的基礎(chǔ)上,如果resultPrint是一個(gè)函數(shù),返回目前值是大于5還是小于5, 還有一個(gè)增加另一個(gè)變量的按鈕2。
起始值 步長(zhǎng)

輸出結(jié)果:{{resultPrint()}}
sum2 is {{sum2}}

解析:如果resultPrint是一個(gè)函數(shù)的話(huà),不管我點(diǎn)擊按鈕1還是按鈕2,由于并不知道按鈕2是否會(huì)影響到resultPrint的輸出值,因此無(wú)論頁(yè)面做什么操作,resultPrint都會(huì)渲染重新執(zhí)行,如果resultPrint是一個(gè)計(jì)蒜屬性的話(huà),既可以解決普通屬性無(wú)法加邏輯的局限,又可以避免寫(xiě)成一個(gè)函數(shù)的話(huà)不必要的執(zhí)行。

computed:{
                resultPrint:function(){
                    console.log("resultPrint的打印")
                    return this.result>10? "結(jié)果大于10":"結(jié)果小于10"
                }
            },
3.v-bind動(dòng)態(tài)改變背景圖片
           
               
                                           
                       
                 

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/104544.html

相關(guān)文章

  • 前方來(lái)報(bào),八月最新資訊--關(guān)于vue2&3的最佳文章推薦

    摘要:哪吒別人的看法都是狗屁,你是誰(shuí)只有你自己說(shuō)了才算,這是爹教我的道理。哪吒去他個(gè)鳥(niǎo)命我命由我,不由天是魔是仙,我自己決定哪吒白白搭上一條人命,你傻不傻敖丙不傻誰(shuí)和你做朋友太乙真人人是否能夠改變命運(yùn),我不曉得。我只曉得,不認(rèn)命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處 查看github最新的Vue...

    izhuhaodev 評(píng)論0 收藏0
  • almost最好的Vue + Typescript系列02 項(xiàng)目結(jié)構(gòu)篇

    摘要:源碼文件夾,基本上我們的業(yè)務(wù)邏輯文件都應(yīng)該放在這里定義了這個(gè)項(xiàng)目所需要的各種模塊,以及項(xiàng)目的配置信息比如名稱(chēng)版本許可證等元數(shù)據(jù)。 基于vue-cli 3.x,配合typescript的環(huán)境構(gòu)建的新vue項(xiàng)目,跟以前的結(jié)構(gòu)相比,有了一些變化,下面我們來(lái)簡(jiǎn)單的了解一下 基本結(jié)構(gòu): showImg(https://segmentfault.com/img/bV5xGn?w=360&h=226...

    BicycleWarrior 評(píng)論0 收藏0
  • almost最好的Vue + Typescript系列02 項(xiàng)目結(jié)構(gòu)篇

    摘要:源碼文件夾,基本上我們的業(yè)務(wù)邏輯文件都應(yīng)該放在這里定義了這個(gè)項(xiàng)目所需要的各種模塊,以及項(xiàng)目的配置信息比如名稱(chēng)版本許可證等元數(shù)據(jù)。 基于vue-cli 3.x,配合typescript的環(huán)境構(gòu)建的新vue項(xiàng)目,跟以前的結(jié)構(gòu)相比,有了一些變化,下面我們來(lái)簡(jiǎn)單的了解一下 基本結(jié)構(gòu): showImg(https://segmentfault.com/img/bV5xGn?w=360&h=226...

    DTeam 評(píng)論0 收藏0
  • almost最好的Vue + Typescript系列02 項(xiàng)目結(jié)構(gòu)篇

    摘要:源碼文件夾,基本上我們的業(yè)務(wù)邏輯文件都應(yīng)該放在這里定義了這個(gè)項(xiàng)目所需要的各種模塊,以及項(xiàng)目的配置信息比如名稱(chēng)版本許可證等元數(shù)據(jù)。 基于vue-cli 3.x,配合typescript的環(huán)境構(gòu)建的新vue項(xiàng)目,跟以前的結(jié)構(gòu)相比,有了一些變化,下面我們來(lái)簡(jiǎn)單的了解一下 基本結(jié)構(gòu): showImg(https://segmentfault.com/img/bV5xGn?w=360&h=226...

    Clect 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<