2.实例化Vue对象
2019-07-01 本文已影响0人
初家大老爷
2.1 创建一个Vue实例
每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的，传入选项对象参数，创建想要达到的行为。选项对象的完整内容参考API 文档的选项列表。
实例框架
var vm = new Vue({
// 选项
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js实例</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="vue-app">
</div>
<script src="app.js"></script>
</body>
</html>
app.js
// 实例化Vue对象
var vm = new Vue({
el: '#vue-app',
data: {
name: "米斯特吴",
job: "web开发"
},
methods: {
greet: function(){
return: 'Good Morning';
}
}
});
2.2 数据和方法
2.2.1 数据
- 当Vue实例被创建时，将data对象中的所有属性加入到Vue响应式系统中；
- 当属性值发生改变时，视图将会产生“响应”，匹配更新为新的值，视图会进行重渲染；
- 只有当实例被创建时data中存在的属性才是响应式。
实例框架
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="vue-app">
<p>Name: {{ name }}</p>
<p>Job: {{ job }}</p>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
var vm = new Vue({
el: '#vue-app',
data: {
name: '米斯特吴',
job: 'Web'
}
});
2.2.2 方法
实例框架
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="vue-app">
<h1>{{ greet() }}</h1>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
var vm = new Vue({
el: '#vue-app'
methods: {
greet: function() {
return 'Good Morning!';
}
}
});
