Vue.js 笔记之起步

最新推荐文章于 2023-03-22 17:08:24 发布

HelloWude

最新推荐文章于 2023-03-22 17:08:24 发布

阅读量219

点赞数

分类专栏： Vue.js-笔记

本文链接：https://blog.csdn.net/HelloWude/article/details/81979817

版权

Vue.js-笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

第一个实例

Vue 2.0 Hello World
HTML代码：

<div id="app">
  <p>{{ message }}</p>
</div>

JavaScript代码：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

运行结果：
Hello Vue.js!

Vue.js 起步

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。

语法格式如下：

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

虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="vue_det">
        <h1>名称 : {{name}}</h1>
        <h1>地址 : {{url}}</h1>
        <h1>{{details()}}</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#vue_det',
            data: {
                name: "HelloWude",
                url: "blog.csdn.net/HelloWude"
            },
            methods: {
                details: function() {
                    return  this.name + " - 爱Java，爱编程！";
                }
            }
        })
    </script>
</body>
</html>

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

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

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

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

data 用于定义属性，实例中有三个属性分别为：name、url。

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 = { name: "HelloWude", url: "blog.csdn.net/HelloWude"}
    var vm = new Vue({
        el: '#vue_det',
        data: data
    })
    // 它们引用相同的对象！
    document.write(vm.name=== data.name) // true
    document.write("<br>")
    // 设置属性也会影响到原始数据
    vm.name= "CSDN"
    document.write(data.name+ "<br>") // CSDN

    // ……反之亦然
    data.name= 1234
    document.write(vm.alexa) // 1234
</script>

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

<div id="vue_det">
    <h1>site : {{name}}</h1>
    <h1>url : {{url}}</h1>
    <h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
    // 我们的数据对象
    var data = { name: "HelloWude", url: "blog.csdn.net/HelloWude"}
    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>

HelloWude

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js 笔记之起步

第一个实例Vue 2.0 Hello World HTML代码：&amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;p&amp;gt;{{ message }}&amp;lt;/p&amp;gt;&amp;lt;/div&amp;gt;JavaScript代码：new Vue({ el: '#app', data: { message: '
复制链接

扫一扫