根據千峰教育學習視頻所練習的筆記 | 學習一段時間，我也有寫一點東西的必要了···
1. vue簡介
- 漸進式JavaScript框架：vue適合不同層次的開發人員，比如簡單的數據交互，數據與視圖的綁定操作，可以直接用vue操作。
- 完善的生態環境：vue router，vuex，Nuxt。
- 強大的組件化應用構建。
- 聲明式渲染，所有的元素都是響應式的。
2.基礎使用
建議參考vue中文官網
2.1. 創建 vue 實例
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue基礎使用</title>
<script src="../vue.js"></script>
<!--引入vue.js文件 在官網可以下載，跟之前.js下載差不多-->
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
var vm = new Vue({ //創建vue實例
el:'#app' //el跟app進行交互
data: { //message 作為數據渲染的結果，
message:'hello my-vue !'
}
});
</script>
</body>
</html>
可以看到渲染完的結果：
2.2. 操作計算屬性
<div id="app">
{{message}}<br>
{{messageReverse}}<br>
</div>
<script>
var vm = new Vue({
···
},
computed:{//2.計算屬性
messageReverse:function () {
return this.message.split('').reverse().join('');
<!--字符串用空格分隔，reverse 將'hello my-vue !'反向輸出，存在變量里-->
<!-- messageReverse變量，存儲數組 -->
}
}
});
</script>
2.3. 指令
- 繼續在
<div>里添加一個<input>輸入框：
<div id="app">
···
<input type="text" v-model="message" >
</div>
就是這樣了：
2.4. 事件處理器
- 接着在
<input>里添加一個點擊事件，對應的方法是changeBgColor，方法要寫到methods里
<input type="text" v-model="message" v-on:click="changeBgColor">
<!--
v-on:click="changeBgColor" 可以簡寫成 @click="changeBgColor"
v-bind:title="message" 可以簡寫成 :title="message"
-->
<script>
var vm = new Vue({
······
},
methods:{//4.事件
changeBgColor:function (ev) {
ev.target.style.background = 'pink';
}
}
});
</script>
- 再介紹兩個有趣的事件：
2.5. 生命周期
- 創建一個實例從開始到銷毀，過程中會添加很多回調函數，俗稱鈎子。當實例執行到相關的位置，就會執行這些鈎子。
這里介紹兩個：
<script>
var vm = new Vue({
······
},
mounted:function () {
console.log(123);
}
});
</script>
-
意思是：瀏覽器彈出了123，就是說組件的el准備好了，可以掛載的時候就會觸發mounted
-
同理，我們再寫一個update，一旦有數據更新的時候就會觸發：
<script>
var vm = new Vue({
······
},
update:function () {
console.log(456);
}
});
</script>
- 還有一些很有用的，比如說 watch:監聽數據變化。
<script>
var vm = new Vue({
······
},
watch:{
message:function (news, olds) {
console.log(news);
console.log(olds);
}
}
//message只要一變，就會觸發這個回調
});
</script>
基本上我們就把vue的基礎使用講完了，一起加油練習喲~