Vue.js 实例

简介: Vue.js 实例

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

语法格式如下:

var vm = new Vue({
  // 选项
})

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

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>
<script type="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 元素中:

<div id = "vue_det"></div>

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

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

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

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

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

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

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

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>Alexa : {{alexa}}</h1>
</div>
<script type="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 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如:

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>Alexa : {{alexa}}</h1>
</div>
<script type="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>
相关文章
|
2月前
|
JavaScript
vue实例的data属性,可以在哪些生命周期中获取到
Vue实例的`data`属性在`beforeCreate`、`created`和`beforeMount`阶段已可访问。此时,虽能使用数据,但事件监听和DOM操作不可行。`beforeCreate`时数据可访问,但未初始化观测和事件;`created`时数据完全可用,但未挂载到DOM;`beforeMount`时仍可访问数据,DOM挂载未开始。
31 3
|
4月前
|
JavaScript Linux iOS开发
第1节:Vue3 安装部署 创建应用(实例)
第1节:Vue3 安装部署 创建应用(实例)
67 0
|
4月前
|
存储 JavaScript 前端开发
Vue3 详细教程及实例(完整版)
Vue3 详细教程及实例(完整版)
92 0
|
4月前
Vue3 反应性全套基础知识都单独附带实例
Vue3 反应性全套基础知识都单独附带实例
20 0
|
4月前
|
缓存
Vue3 详细模板语法及实例
Vue3 详细模板语法及实例
30 0
|
6天前
|
JavaScript
【vue】setInterval的嵌套实例
【vue】setInterval的嵌套实例
10 1
|
18天前
|
JavaScript
Vue 实例详解——从这里开始
Vue 实例详解——从这里开始
|
18天前
|
JavaScript 前端开发
【掰开揉碎】JavaScript状态机的应用场景与实例(二)
【掰开揉碎】JavaScript状态机的应用场景与实例(二)
|
18天前
|
前端开发 JavaScript 测试技术
【掰开揉碎】JavaScript状态机的应用场景与实例(一)
【掰开揉碎】JavaScript状态机的应用场景与实例(一)
|
2月前
|
JavaScript
vue的实例生命周期?
vue的实例生命周期?
10 0