Vue——初识Vue

最新推荐文章于 2023-12-18 15:37:22 发布

Bonsoir777

最新推荐文章于 2023-12-18 15:37:22 发布

阅读量272

点赞数 4

分类专栏： Vue2.js 文章标签：前端前端框架 vue.js 框架

本文链接：https://blog.csdn.net/Bonsoir777/article/details/126878676

版权

Vue2.js 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

文章目录

前言
一、Vue.js是什么
二、Vue.js的安装
三、创建Vue实例
四、数据与方法
总结

一、Vue.js是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

适学者——已了解关于 HTML、CSS 和 JavaScript 的中级知识。

二、Vue.js的安装

1.通过script标签引入

尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue

开发环境版本



<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

生产环境版本



<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

三、创建Vue实例

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

Vue 实例

var vm = new Vue({

//选项

})

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

四、数据与方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

 // 我们的数据对象
        var obj  = { a: 1 }

        // 该对象被加入到一个 Vue 实例中
        var vm = new Vue({
            data: obj
        })

        // 获得这个实例上的 property
        // 返回源数据中对应的字段
        console.log(vm.a == obj.a);// => true

        // 设置 property 也会影响到原始数据
        vm.a = 2
        console.log(obj.a);// => 2

当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。也就是说如果你添加一个新的 property，那么这个新的property改动将不会触发任何视图的更新。

如果你知道你会在晚些时候需要一个 property，但是一开始它为空或不存在，那么你仅需要设置一些初始值。比如：

data: {

newTodoText: '',

visitCount: 0,

hideCompletedTodos: false,

todos: [],

error: null

}

这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。

  <div id="app">
        <p>{{ foo }}</p>
        <!-- 这里的 `foo` 不会更新！ -->
        <button v-on:click="foo = 'baz'">Change it</button>
      </div>
   
    <script>
         var obj = {
            foo: 'bar'
        }

        Object.freeze(obj)

        new Vue({
            el: '#app',
            data: obj
        })
  
    </script>

运行结果

Vue 实例自己的property方法

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

 var data = { a: 1 }
        var vm = new Vue({
            el: '#example',
            data: data
        })

        vm.$data === data // => true
        vm.$el === document.getElementById('example') // => true

        // $watch 是一个实例方法
        vm.$watch('a', function (newValue, oldValue) {
            // 这个回调将在 `vm.a` 改变后调用
        })
    </script>