Vue.js 起步
阿新 • • 發佈：2018-11-06
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>