VUE 基础理解 data method el

23 篇文章 0 订阅
15 篇文章 0 订阅
<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提供实例属性和方法,前缀$,用来区分用户定义的属性

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值