icon-cookie
The website uses cookies to optimize your user experience. Using this website grants us the permission to collect certain information essential to the provision of our services to you, but you may change the cookie settings within your browser any time you wish. Learn more
I agree
blank_error__heading
blank_error__body
Text direction?

Vue.js 起步

每个 Vue 应用都需要通过实例化 Vue 来实现。

语法格式如下:

var vm =newVue({// 选项})

接下来让我们通过实例来看下 Vue 构造器中需要哪些内容:

实例

<divid="vue_det"><h1>site : {{site}}</h1><h1>url : {{url}}</h1><h1>{{details()}}</h1></div><scripttype="text/javascript"> var vm = new Vue({ el: '#vue_det', data: { site: "菜鸟教程", url: "www.runoob.com", alexa: "10000" }, methods: { details: function() { return this.site + " - 学的不仅是技术,更是梦想!"; } } }) </script>
尝试一下 »

点击 "尝试一下" 按钮查看在线实例

可以看到在 Vue 构造器中有一个el 参数,它是 DOM 元素中的 id。在上面实例中 id 为 vue_det,在 div 元素中:

<divid="vue_det"></div>

这意味着我们接下来的改动全部在以上指定的 div 内,div 外部不受影响。

接下来我们看看如何定义数据对象。

data 用于定义属性,实例中有三个属性分别为:site、url、alexa。

methods 用于定义的函数,可以通过 return 来返回函数值。

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

<divid="vue_det"><h1>site : {{site}}</h1><h1>url : {{url}}</h1><h1>{{details()}}</h1></div>

当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。

实例

<divid="vue_det"><h1>site : {{site}}</h1><h1>url : {{url}}</h1><h1>Alexa : {{alexa}}</h1></div><scripttype="text/javascript"> // 我们的数据对象 var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000} var vm = new Vue({ el: '#vue_det', data: data }) // 它们引用相同的对象! document.write(vm.site === data.site) // true document.write("<br>") // 设置属性也会影响到原始数据 vm.site = "Runoob" document.write(data.site + "<br>") // Runoob // ……反之亦然 data.alexa = 1234 document.write(vm.alexa) // 1234 </script>
尝试一下 »

除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如:

实例

<divid="vue_det"><h1>site : {{site}}</h1><h1>url : {{url}}</h1><h1>Alexa : {{alexa}}</h1></div><scripttype="text/javascript"> // 我们的数据对象 var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000} var vm = new Vue({ el: '#vue_det', data: data }) document.write(vm.$data === data) // true document.write("<br>") document.write(vm.$el === document.getElementById('vue_det')) // true </script>
尝试一下 »
Measure
Measure
Related Notes
Get a free MyMarkup account to save this article and view it later on any device.
Create account

End User License Agreement

Summary | 2 Annotations
个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化
2020/06/04 17:04
Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来
2020/06/04 17:04