vue 实例化几种方式_第二节:Vue实例化

1.创建一个Vue实例

通过vue函数创建一个新的vue实例

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可嵌套的、可复用的组件树组成的。

我们先看看Vue基本的使用,至于组件我们后面详细的在来探讨

{ { msg }}

// 引入vue后 会白给你一个Vue构造函数

let vm = new Vue({ // 配置对象

el: '#app', // 告诉vue能管理那个部分,使用的是querySelector

data: { // data中的数据会被vm所代理

msg: 'hello world', // 可以通过vm.msg取到对应的内容 ,也可以赋值

}

})

2.声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

2.1. 关于{ {}} 插值表达式

插值表达式,表达式,赋值运算,计算,三元表达式,但是尽量少在这里写逻辑计算

插值：

{ { message }}

new Vue({

el: '#app',

data: {

messgae: 'hello Vue!'

}

})

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？

如果需要确定现在的数据是否已经和DOM建立了关联,形成响应式.

可以将js中的new Vue 复制给一个全局变量vm.此时vm就是Vue实例化对象,未来可能会用它来搞很多事情,但是最常用到它的时候,是通过this关键字来使用它

var vm = new Vue({

el: '#app',

data: {

messgae: 'hello Vue!'

}

})

然后在浏览器的js控制台中修改vm.m