Vue--创建Vue实例

创建Vue 实例

1.基本使用章节主要针对,创建Vue 实例的记录

兼容性

1.Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

安装

1.第一种去官网下载指定顶vue版本包
2.第二种使用cdn使用线上版本(本笔记所有案例都使用cdn)
3.第三种使用npm进行安装
4.第四种使用CLI脚手架

创建一个Vue使用案例

1.创建的Vue实例其实就是MVVM中的VM调度者
2.创建的Vue实例中el属性是要被挂载的到Vue上的DOM元素,可以是id选择器,也可以是类选择器,或者直接使用'docuemnt.getElementById'将HTMLElement ,直接挂载上去
3.这里的data 和{{}} 的语法会在下面章节讲解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue cdn 的网址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
    </div>
    <script>
        // 获取绑定的dome 对象也可以将这个对象和el 进行吧绑定
        //var app = docuemnt.getElementById('#app')
        // 创建一个vue 实例,这个VM实例就是MVVM中的VM调度
        var vm = new Vue({
            // 也可以绑定docuemnt.getElementById('#app')返回的app对象
            el:"#app",
            data:{
                msg:"第一个案例"
            }
        })
    </script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,921评论 1 45
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,281评论 0 4
  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 827评论 0 3
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,625评论 0 7