Vue.js 起步
每个Vue应用都需要通过实例化Vue来实现。
语法格式如下:
var vm = new Vue({
//选项
})
提问:
(1)实例化vue有什么作用呢?为什么要实例化,是为了new 一个对象吗?然后操控对象中的数据吗?
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'hello,北京!',
}
})
</script>
</body>
</html>
可以看到在Vue的构造器中有一个el参数,它是DOM元素中的id。在上面的实例中id是app,在div元素中
<div id='app'></div>
这意味着我们所改动的东西都在此div内,div外不受影响。
接下来我们看看如何定义数据对象。
- data 用于定义属性,实例中的属性为message。
- methods 用于定义的函数,可以通过return来返回函数值。
- {{ }} 用于输出对象属性和函数返回值。
提问:
(2)有些函数需要return,有些函数为什么不需要return?
我的理解是有些需要返回一个东西,这个需要return,有些不需要返回东西就可以不return;不return的话就返回undefined。
比如:
function test() {
return ''我喜欢你;
}
这个需要return一个我喜欢你。
function test() {
let a = 1;
let b = 2;
let c;
c = a + b;
}
这个不需要返回,就不需要return;
<div id="app">
<h1>标题: {{ title }}</h1>
<p>路径:{{ url }}</p>
<p>信息:{{ message }}</p>
<p>{{ details() }}</p>
</div>
当一个Vue实例被创建时,它向Vue的响应式系统中加入data对象所有的属性,当这些属性的值发生改变时,html视图也会发生相应的变化。
提问:
(3)如何理解vue中的this和用法?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>标题: {{ title }}</h1>
<p>路径:{{ url }}</p>
<p>信息:{{ message }}</p>
<p>{{ details() }}</p>
</div>
<script>
var data = {
title: '学习vue',
url: 'www.baidu.com',
message: 'hello,北京!',
};
var vm = new Vue({
el: '#app',
data: data,
methods: {
details: function(){
return this.title+ ',' + '学的不仅是技术,而是梦想';
}
}
})
//它们引用相同的对象
document.write(vm.title === data.title); //true
document.write('<br />');
//设置属性也会影响到原始数据
vm.title = '我不想吃饭';
document.write(vm.title + '<br />');
</script>
</body>
</html>
除了数据属性,Vue实例还提供了一些有用的实例属性和方法,它们都用$,以便与用户自定的属性区分开来。
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>标题: {{ title }}</h1>
<p>路径:{{ url }}</p>
<p>信息:{{ message }}</p>
<p>{{ details() }}</p>
</div>
<script>
var data = {
title: '学习vue',
url: 'www.baidu.com',
message: 'hello,北京!',
};
var vm = new Vue({
el: '#app',
data: data,
methods: {
details: function(){
return this.title+ ',' + '学的不仅是技术,而是梦想';
}
}
})
document.write(vm.$data === data); //true
document.write('<br />');
document.write(vm.$title); //undefined why???
document.write('<br />');
document.write(vm.$el === document.getElementById('app'));
</script>
</body>
</html>