课程目标
在页面上显示出Hello World文字
实现步骤
1.引入vue.js文件
2.实例化一个Vue对象
3.指定Vue对象的作用域
4.在data中显示的初始化页面数据
5.用{{}}展示数据
实例代码
<code>
<title>Document/<title>
{{msg}}
{{methodsMag}}
/<code>
Vue实例选项详解
1.new Vue({})
实例化一个Vue对象参数是一个对象
2.el作用：
指定vue实例的作用域，通常是id选择器、类选择器 如 #app 或 .app
不能指定vue实例对象的作用域到html或者body标签，挂载到body和html，将会报如下错误：
一个页面可以有多个Vue实例对象，每个对象只管理自己el所挂载的作用域；
如下所示，v1实例对象只会管理它所挂载的
之内的视图，v2只会管理自己挂载的之内的视图，他们不会相互影响，因为自己有自己的作用域。<code>
<title>Document/<title>
{{msg}}
{{msg1}}
/<code>
3.data的作用：
data相当于一个内存，存储页面需要展示的数据；
所有页面需要展示的数据都需要显示的初始化到data中。
data中是数据是响应式的数据，只有数据改变，对应页面展示的数据也会相应的改变。
4.methods:
指定当前Vue实例对象的方法，其值可以是一个对象。
可以通过实例对象访问方法，如v1.fn1();
方法中的 this 自动绑定为 Vue 实例
不应该使用箭头函数来定义 method 函数,箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this. 将是 undefined
5.{{}}: 插值表达式
把绑定的数据展示到页面上，只要data里面的数据改变，页面上的数据也会发生改变。
在插值表达式中不能写js语句，如 var a = 100;
分享到:
閱讀更多 就叫春哥 的文章
