vue一：vue基礎之vue初體驗
一、Vue介紹
Vue是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。
veu官網：https://cn.vuejs.org/
下載vue.js：https://cn.vuejs.org/v2/guide/installation.html
二、Vue安裝和使用：
vue的安裝大體上分成三種方式
第一種是通過script標籤引用的
第二種是通過npm(node package manager)來安裝
第三種是通過vue-cli命令列來安裝
# CDN引用script標籤
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
# 或者是指定版本號
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
# 下載程式碼儲存到本地引用
<script src="../vue.js"></script>
# 生產環境，使用壓縮後的檔案
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
三、基本使用：
1.這裡採用下載vue.js的方式，下載後放到工作空間
2.在程式碼head標籤裡面使用script標籤引用
3.要使用Vue，首先需要建立一個Vue物件，並且在這個物件中傳遞el引數，el引數全稱是element，用來找到一個給vue渲染的根元素。並且可以傳遞一個data引數，data中的所有值都可以直接在根元素下使用{{}}來使用。其中data中的資料，只能在vue的根元素下使用，在其他地方是不能被vue識別和渲染的
4.也可以在vue物件中新增methods，這個屬性中專門用來儲存自己的函式。methods中的函式也可以在模板中使用，並且在methods中的函式來訪問data中的值，只需要通過this.屬性名就可以訪問到了，不需要額外加this.data.屬性名來訪問
5.點選事件，設定點選時修改username的值
6.設定值只能改變一次，即渲染後不再更改：v-once
此時渲染過後，不管怎麼點改值按鈕，都不會修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p v-once>{{username}}</p>
<p>{{hello()}}</p>
<button @click="username='這是username點選修改後的值'">修改username的值</button>
</div>
<!-- id為app外的元素不會被vue渲染 -->
<p>這裡不會被渲染{{username}}</p>
<script>
new Vue({
el: "#app",
data: {
username: "這是vue變數username"
},
methods: {
hello(){
return '這是methods.hello函式的返回值'
}
}
})
</script>
</body>
</html>