Vue.js?模板語(yǔ)法和數(shù)據(jù)綁定

更新時(shí)間：2022年05月27日 11:06:33 作者：??奔跑吧雞翅????

這篇文章主要介紹了Vue.js?模板語(yǔ)法和數(shù)據(jù)綁定，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下

模板語(yǔ)法

Vue 模板語(yǔ)法有兩大類

插值語(yǔ)法：

功能：用于解析標(biāo)簽體內(nèi)容
寫法：{{xxx}}，xxx是js表達(dá)式，可以讀取到 data 中屬性

指令語(yǔ)法：

功能：用于解析標(biāo)簽（標(biāo)簽屬性、標(biāo)簽體內(nèi)容、綁定事件...）
寫法：v-bind:href="xxx" 或簡(jiǎn)寫為 :href="xxx"，xxx是js表達(dá)式，可以讀取到 data 中屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初識(shí)</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="root">
    <h1>插值語(yǔ)法</h1>
    Hello {{name}}
    <h1>語(yǔ)法指令</h1>
    <a :href="url" rel="external nofollow" >百度</a>
</div>
<script type="text/javascript">
    new Vue({
        el:"#root",
        data:{
            name:"world",
            url:"https://www.baidu.com"
        }
    })
</script>
</body>
</html>

數(shù)據(jù)綁定

Vue中有2種數(shù)據(jù)綁定的方式

單向綁定(v-bind)：數(shù)據(jù)只能從 data 流向頁(yè)面
雙向綁定(v-model)：數(shù)據(jù)不僅能從 data 流向頁(yè)面，還可以從頁(yè)面流向data

備注

雙向綁定一般都應(yīng)用在表單類元素上（如: input、select等)
v-model:value 可以簡(jiǎn)寫為v-model，因?yàn)?nbsp;v-model 默認(rèn)收集的就是 value 值

<body>
<div id="root">
    <!--普通寫法-->
    單向數(shù)據(jù)綁定：<input type="text" v-bind:value="name"><br/>
    雙向數(shù)據(jù)綁定：<input type="text" v-model:value="name"><br/>
    <!--簡(jiǎn)寫-->
    單向數(shù)據(jù)綁定：<input type="text" :value="name"><br/>
    雙向數(shù)據(jù)綁定：<input type="text" v-model="name"><br/>

    <!--如下代碼是錯(cuò)誤的，v-model只能用在表單類元素上(輸入類,有)-->
    <!--<h2 v-model:x="name"></h2>-->
</div>
<script type="text/javascript">
    new Vue({
        el:"#root",
        data:{
            name:"world",
        }
    })
</script>

el的兩種寫法

第一種寫法

new Vue({
        el:"#root",
        data:{
            name:"world",
        }
    })

第二種寫法

const x = new Vue({
        data:{
            name:"world",
        }
    })
console.log(x)
x.$mount('#root')

其中 $mount可以在打印的 vue 實(shí)例中找到

data的兩種寫法

第一種寫法：對(duì)象式

new Vue({
        el: "#root",
        data: {
            name: "world",
        }
    })

第一種寫法：函數(shù)式

new Vue({
        el: "#root",
        data: function () {
            //此處的this是vue實(shí)例對(duì)象
            return {
                name: 'world'
            }
        }
    })

或者：

new Vue({
        el: "#root",
        data(){
            return {
                name: 'world'
            }
        }
    })

目前學(xué)習(xí)兩種寫法都可以，但以后學(xué)到組件，必須函數(shù)式，否則會(huì)報(bào)錯(cuò)

另外：不能寫成箭頭函數(shù)，因?yàn)?this 就不是 vue 實(shí)例對(duì)象了，而是全局 window

new Vue({
        el: "#root",
        data: ()=> {
            //此處的this是全局的window
            return {
                name: 'world'
            }
        }
    })

到此這篇關(guān)于Vue.js 模板語(yǔ)法和數(shù)據(jù)綁定的文章就介紹到這了,更多相關(guān)Vue 模板語(yǔ)法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: