VUE 基础理解 data method el

<div id="vue">
    <h1>test: {{site}}</h1>
    <h1>url: {{url}}</h1>
    <h1>函数{{details()}}</h1>
</div>

<script type="text/javascript">
var data = {
    site: 'test',
    url: 'http://www.baidu.com',
    }
var vm = new Vue({
    el: '#vue',
    data,
methods: {
    details: function(){
        return `${this.site}1123`
    }
}

})
</script>

`

vue构造器中有个el的参数,它是 DOM 元素中的 id,在上面实例中id 为 vue :

…

意味着接下来 div 中的改动全部在以上指定的 div 内,外部不收影响.

data 用于定义属性

methods 用于定义函数

{{}} 用于输出对象属性和函数返回值

`

document.write(vm.$data === data) // true document.write(vm.$el === document.getElementById('vue')) // true

vue提供实例属性和方法,前缀$,用来区分用户定义的属性