第一个vue实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<template>
<div id="app">
<img src="./assets/logo.png">
<div v-text="$data.title">
</div>
</div>
</template>

<script>
export default {
data: function() {
return {
title: "Hello Word!"
}
}
}
</script>

解析

等价语法

  1. 1
    2
    3
    4
    5
    6
    7

    <div v-text="$data.title"></div>
    <!--等价(Vue语法)-->
    <div v-text>
    {{title}}
    </div>

  2. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
       data: function() {
    return {
    title: "Hello Word!"
    }
    }
    //等价(es6语法)
    data() {
    return {
    title: "Hello Word!"
    }
    }