美文网首页
Vue--创建Vue实例

Vue--创建Vue实例

作者: 两点半的杂货铺 | 来源:发表于2019-02-17 11:35 被阅读3次

创建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>

相关文章

  • Vue--创建Vue实例

    创建Vue 实例 1.基本使用章节主要针对,创建Vue 实例的记录 兼容性 1.Vue 不支持 IE8 及以下版本...

  • vue基础知识

    new Vue() 创建 Vue 实例,其中 Vue.components() 也可以创建 Vue 实例。 Vue...

  • vue实例创建及数据挂载渲染

    vue实例篇 vue实例创建及数据挂载渲染 一、 创建实例 vue实例创建其实很简单,首先讲一下vue其实是由一个...

  • Vue.js学习笔记(2)

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

  • Vue引入、指令、挂载点、模板、实例和绑定事件

    Vue实例 创建一个Vue实例,每个Vue应用都是通过 Vue 函数创建一个新的Vue实例 开始的:var vm ...

  • vue实例

    Vue实例化 1.创建一个Vue实例 通过Vue构造函数new 一个新的vue实例, 当你创建一个vue实例,你可...

  • Day9:Vue文档精读2——Vue实例

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

  • Vue学习的第二天

    创建一个Vue实例 每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的,所有的Vue组件都是Vue实例,...

  • Vue实例

    创建一个Vue的实例 每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的: 当创建一个Vue实例时,就传...

  • Vue-- 监听路由变化,数据无法更新?

    Vue-- 监听路由变化,数据无法更新?

网友评论

      本文标题:Vue--创建Vue实例

      本文链接:https://www.haomeiwen.com/subject/aicgeqtx.html