Vue入门
配置对象
vue配置对象,就是new Vue(params)的params
- el: 指定容器,一般写选择器字符串,或者给一个dom元素,如果选到多个容器,也只用第一个容器,el和root是一对一的关系
- data: 数据,提供给el指定的容器去使用, 也只能给容器使用,并且需要配合模板语法{{propName}}. data中的属性存储在vue实例和及其$data上
- $mount: 同el, 挂载容器。 setTimeout(()=>vue.$mount(selector),1000)
- 函数式data: 必须返回一个数据。写组件必须写函数式否则报错。函数体中this指向vue实例对象
容器和vue实例是一对一的关系
vue管理的函数不要写箭头函数,否则没有this
vue对象中,所有$开头的属性,都是提供给开发者用的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<!-- 插值语法 -->
<h1>hello, {{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false // 组织vue在启动时自动生成提示
const vue = new Vue({
el: '#root', // 创建Vue实例,通常为css选择器字符串,如果选择到多个容器标签,只用第一个容器
data: { // 用于存储数据,给el指定的容器去使用
name: "island",
age: 18
}
})
</script>
</body>
</html>