目前公司前端在用vue架構，是以總結了一下vue的學習筆記(最好的學習方：官方文檔)，感興趣的小夥伴可以一起來學習交流下。
一、vue的介紹
1. 什麼是vue.js
在學習一個新的架構時，首先應該知道它是什麼，它是用來幹嘛的，其次是應該如何使用它，然後可以對比下它跟相似的架構的差別或者說優勢在哪。這是我認為比較好的一種學習方式，也更容易幫助我們了解。
- vue.js是一個目前比較流行的前端架構，Vue.js 是一套建構使用者界面的架構，隻關注視圖層，它不僅易于上手(連我這個前端小白使用起來都覺得非常爽)，還便于與第三方庫或既有項目整合。(Vue有配套的第三方類庫，可以整合起來做大型項目的開發)
2. 為什麼要學習流行架構
- vue.js能夠大大的提高我們的開發效率。在之前學習的js,jquery，他們都是直接操作Dom元素的，而使用vue可以減少不必要的Dom操作
- 提高渲染效率
- 資料雙向綁定的概念，我們隻需要使用vue提供的指令，隻關注資料的業務邏輯而不需要知道是如何渲染的
二、vue的基本使用
編輯器使用的vscode,個人感覺很好用！
- 首先安裝vue.js
- 直接使用script标簽引入
- 使用npm方式下載下傳（建構大型項目時比較友善，以後介紹）
- 第一個案例hello world
<!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="https://cn.vuejs.org/js/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
let app = new Vue({
el: '#app', //表示建立vue的時候，vue控制的頁面區域
data: {
message: 'hello world vue',
}
})
</script>
</body>
</html>
打開浏覽器檢視效果：
頁面效果：
3. mustache文法（插值文法),就是雙大括号
<!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="https://cn.vuejs.org/js/vue.js"></script>
</head>
<body>
<div id="app">
<!--兩種拼接方式，效果是一樣的-->
{{firstName}}+{{lastName}}
{{firstName+lastName}}
</div>
<script>
let app = new Vue({
el: '#app',
data: {
firstName: 'kobe',
lastName: 'bryant'
}
})
</script>
</body>
</html>
-
v-once指令：使用了v-once指令，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="../vue.js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
message: '你好啊',
}
})
</script>
</body>
</html>
效果：
5. v-html指令：會将資料以HTML的形式解析
代碼：
<!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="../vue.js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{url}}</h1>
<h1 v-html="url"></h1>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
url: "<a href='http://www.baidu.com'>百度一下</a>"
}
})
</script>
</body>
</html>
效果：
6. v-cload指令：使用v-cload指定樣式，在vue編譯完成時，這些樣式會從綁定的元素移除；有時候網絡較慢，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="../vue.js/vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
{{message}}
</div>
<script>
let app = new Vue({
el: '#app' ,
data: {
message: '今天天氣真好'
}
})
</script>
</body>
</html>
-
v-bind指令：v-bind可以動态綁定不同的屬性
代碼：
<!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="../vue.js/vue.js"></script>
</head>
<body>
<div id="app">
<!--v-bind指令可以動态綁定不同屬性-->
<img v-bind:src="imageUrl">
<a v-bind:href="link">百度一下</a>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
imageUrl: 'https://cn.vuejs.org/images/logo.png' ,
link: 'http://www.baidu.com'
}
})
</script>
</body>
</html>
效果：
這裡注意，對象文法和數組文法（數組文法使用較少）：
<!--對象文法: 含義就是class後面跟一個對象
<div v-bind:class='{類名1:boolean,類名2:boolean}'>{{message}}</div>
隻有當boolean的值為true時,對應的類才會加到标簽中
-->
基本使用就這些，接下來繼續學習vue的進階使用。