六.Vue实例

最新推荐文章于 2023-02-14 11:24:36 发布

凌枫zero

最新推荐文章于 2023-02-14 11:24:36 发布

阅读量190

点赞数

分类专栏： vue.js 文章标签： vue.js vue vue.js实例 mvvm

本文链接：https://blog.csdn.net/qq_43674132/article/details/104857953

版权

vue.js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一.Vue初体验：https://blog.csdn.net/qq_43674132/article/details/104857216

二.Vue条件命令：https://blog.csdn.net/qq_43674132/article/details/104857322

三.Vue循环指令：https://blog.csdn.net/qq_43674132/article/details/104857517

四.Vue处理用户输入：https://blog.csdn.net/qq_43674132/article/details/104857651

五.Vue组件初体验：https://blog.csdn.net/qq_43674132/article/details/104857870

六.Vue实例：https://blog.csdn.net/qq_43674132/article/details/104857953

七.Vue模板语法：https://blog.csdn.net/qq_43674132/article/details/104858009

八.Vue计算属性：https://blog.csdn.net/qq_43674132/article/details/104858068

九.Vue.js侦听器：https://blog.csdn.net/qq_43674132/article/details/104860083

十.Vue.js的class绑定：https://blog.csdn.net/qq_43674132/article/details/104861826

十一.Vue style绑定：https://blog.csdn.net/qq_43674132/article/details/104877107

十二.Vue 条件渲染：https://blog.csdn.net/qq_43674132/article/details/104877177

十三.Vue 列表渲染：https://blog.csdn.net/qq_43674132/article/details/104877393

十四.Vue事件处理：https://blog.csdn.net/qq_43674132/article/details/104878173

十五.Vue表单输入绑定：https://blog.csdn.net/qq_43674132/article/details/104879776

十六.Vue中引用图片：https://blog.csdn.net/qq_43674132/article/details/107043105

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>

运行详情页面如下

凌枫zero

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
六.Vue实例

Vue实例每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：虽然没有完全遵循MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用vm(ViewModel 的缩写) 这个变量名表示 Vue 实例。当创建一个 Vue 实例时，你可以传入一个选项对象。这篇教程主要描述的就是如何使用这些选项来创建你想要的行为。作为参考，你也可以在API ...
复制链接

扫一扫