如下图所示，是一个对vue.js最简单的应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
</div>
<script src="../../框架工具/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data:{
message:'你好啊'
}
})
</script>
</body>
</html>
- 1、通过
script引入本地下载好的vue.js - 2、创建
vue实例app- 传入一个对象
options，可通过https://cn.vuejs.org/v2/api/#%E5%AE%9E%E4%BE%8B-property网站查看options包含哪些选项 - 这里暂时掌握以下几个:
-
el:- 类型：
string | HTMLElement - 作用：决定之后Vue实例会管理哪个
DOM
- 类型：
-
-
data:- 类型：
Object | Function - 作用：
Vue实例对应的数据对象（组件当中data必须是个函数）
- 类型：
-
methods:- 类型：
{[key:string]:Function} - 作用：定义属于
Vue的一些方法，可以在其他地方调用，也可以在指令中使用 - 这里稍微补充个知识点，函数和方法的区别，方法定义在类里面，它跟实例对象是挂钩的
- 类型：
- 传入一个对象
3、通过<div id="app">和el: '#app',将两者绑定到一起，然后在标签内部可用mastache语法来获取展示对象app中data内部的值。（这里需要注意的是app的作用域只在id="app"的div标签内，超出无效）
这里稍微补充一个有关Const的知识
1、一旦使用
const修饰的标识符被赋值后，不能修改
2、在使用const定义标识符时，必须进行赋值
3、常量的含义是指向对象不能修改，但是可以改变对象内部的属性
网友评论