vue 挂载在html 中_01.新手入门vue之Hello World

课程目标

在页面上显示出Hello World文字

实现步骤

1.引入vue.js文件

2.实例化一个Vue对象

3.指定Vue对象的作用域

4.在data中显示的初始化页面数据

5.用{{}}展示数据

实例代码

    Document

{{msg}}

{{methodsMag}}

Vue实例选项详解

1.new Vue({})

实例化一个Vue对象参数是一个对象

2.el作用：

指定vue实例的作用域，通常是id选择器、类选择器 如 #app 或 .app

不能指定vue实例对象的作用域到html或者body标签，挂载到body和html，将会报如下错误：

一个页面可以有多个Vue实例对象，每个对象只管理自己el所挂载的作用域；

如下所示，v1实例对象只会管理它所挂载的

    Document

{{msg}}

{{msg1}}

3.data的作用：

data相当于一个内存，存储页面需要展示的数据；

所有页面需要展示的数据都需要显示的初始化到data中。

data中是数据是响应式的数据，只有数据改变，对应页面展示的数据也会相应的改变。

4.methods:

指定当前Vue实例对象的方法，其值可以是一个对象。

可以通过实例对象访问方法，如v1.fn1();

方法中的 this 自动绑定为 Vue 实例

不应该使用箭头函数来定义 method 函数,箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this. 将是 undefined

5.{{}}: 插值表达式

把绑定的数据展示到页面上，只要data里面的数据改变，页面上的数据也会发生改变。

在插值表达式中不能写js语句，如 var a = 100;