<!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

備注

雙向綁定一般都應(yīng)用在表單類元素上（如: input、select等)
v-model:value 可以簡寫為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/>
    <!--簡寫-->
    單向數(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的兩種寫法

第一種寫法：對象式

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

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

new Vue({
        el: "#root",
        data: function () {
            //此處的this是vue實(shí)例對象
            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í)例對象了，而是全局 window

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

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

您可能感興趣的文章: