Vue.js 模板語法和數據綁定

Posted on by

模板語法

Vue 模板語法有兩大類

插值語法：

  • 功能：用於解析標簽體內容
  • 寫法：{{xxx}}，xxx是js表達式，可以讀取到 data 中屬性

指令語法：

  • 功能：用於解析標簽（標簽屬性、標簽體內容、綁定事件…）
  • 寫法：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>

數據綁定

Vue中有2種數據綁定的方式

  • 單向綁定(v-bind)：數據隻能從 data 流向頁面
  • 雙向綁定(v-model)：數據不僅能從 data 流向頁面，還可以從頁面流向data

備註

  • 雙向綁定一般都應用在表單類元素上（如: input、select等)
  • v-model:value 可以簡寫為v-model，因為 v-model 默認收集的就是 value 值
<body>
<div id="root">
    <!--普通寫法-->
    單向數據綁定：<input type="text" v-bind:value="name"><br/>
    雙向數據綁定：<input type="text" v-model:value="name"><br/>
    <!--簡寫-->
    單向數據綁定：<input type="text" :value="name"><br/>
    雙向數據綁定：<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",
        }
    })

第一種寫法：函數式

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

或者：

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

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

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

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

到此這篇關於Vue.js 模板語法和數據綁定的文章就介紹到這瞭,更多相關Vue 模板語法內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：