6.Vue实例

Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:
虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

当创建一个 Vue 实例时,你可以传入一个选项对象。这篇教程主要描述的就是如何使用这些选项来创建你想要的行为。作为参考,你也可以在 API 文档 中浏览完整的选项列表。

创建一个instance.html页面并引入vue.js代码,详情如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
</body>
</html>

通过var data = {a: 1,b: null}来创建实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div>{{a}}</div>
</div>
<script>
    //定义data对象
    var data = {a: 1,b: null}
    //用来这个方法,a变量改变了也不会变
    // Object.freeze(data)
    var app = new Vue({
        el:"#app",
        data:data,
        //当Vue开始创建的时候调用的方法
        created(){
            console.log("created");
        }
    })
    console.log(data.a==app.a);
    data.a=99;
    console.log(app.a);
    app.a=100;
    console.log(data.a);
    data.b=99;
    console.log(app.$el==document.getElementById("#app"));
    console.log(app.$data==data);
</script>
</body>
</html>

运行详情页面如下


image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • [TOC] Vue 学习笔记 Vue 源码解析 - 主线流程 Vue 源码解析 - 模板编译 Vue 源码解析 -...
    Whyn阅读 636评论 0 1
  • 基本用法 一、vuejs简介 是一个构建用户界面的框架 是一个轻量级的MVVM(Model-View-ViewMo...
    深度剖析JavaScript阅读 18,264评论 0 8
  • 一. Vue核心小知识点 1、vue中 key 值的作用 key 的特殊属性主要用在 Vue的虚拟DOM算法,在新...
    倚剑闯天涯_阅读 1,767评论 0 12
  • 一. Vue核心小知识点 1、vue中 key 值的作用 key 的特殊属性主要用在 Vue的虚拟DOM算法,在新...
    素心_b7d9阅读 785评论 0 0
  • 说到冬天,除了天气寒冷,还有就是满大街的火锅! 火锅的种类颇多,但是我只爱重庆的火锅。吃火锅的时候,朋友们总是叫老...
    味博士阅读 360评论 0 0