<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