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

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

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

模板語法

Vue 模板語法有兩大類

插值語法：

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

指令語法：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初識</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="root">
    <h1>插值語法</h1>
    Hello {{name}}
    <h1>語法指令</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 流向頁面
雙向綁定(v-model)：數(shù)據(jù)不僅能從 data 流向頁面，還可以從頁面流向data

備注

雙向綁定一般都應用在表單類元素上（如: input、select等)
v-model:value 可以簡寫為v-model，因為 v-model 默認收集的就是 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/>
    <!--簡寫-->
    單向數(shù)據(jù)綁定：<input type="text" :value="name"><br/>
    雙向數(shù)據(jù)綁定：<input type="text" v-model="name"><br/>

    <!--如下代碼是錯誤的，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 實例中找到

data的兩種寫法

第一種寫法：對象式

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

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

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

或者：

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

目前學習兩種寫法都可以，但以后學到組件，必須函數(shù)式，否則會報錯

另外：不能寫成箭頭函數(shù)，因為 this 就不是 vue 實例對象了，而是全局 window

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

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

您可能感興趣的文章: