目錄
1.初始Vue
1.1 什么是Vue
1.2 Vue的特點
1.3 引入Vue
1.4 使用Vue
2. 數據綁定的方法
2.1?Mustache（雙大括號插值法）
2.2?v-text
2.3?v-html
3. 列表渲染
1.初始Vue
1.1 什么是Vue
Vue 是一套用于構建用戶界面的漸進式JavaScript框架。 與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。
1.2 Vue的特點
- Vue 上手簡單易用。
- Vue 具有靈活強大的生態系統。
- Vue 比較高效，采用虛擬dom（使用js對象描述的dom節點）。
// 虛擬dom,因為真實的dom里面包含的方法和屬性太多了，多次加載會耗費大量內存，//而使用對象來模擬dom節點就可只加載我們需要的方法和屬性，會節約大量內存let div = {tagname: 'div',attr: {id: 'box',class: 'a'},innerHTML: '好好學習，天天向上'} - Vue 采用diff算法(差異算法或對比算法)：通過比較新舊組件樹或虛擬DOM樹，框架能夠找出最小更新集合并減少不必要的DOM操作，從而提高應用的性能。
1.3 引入Vue
引入vue可以選擇引入在線文件，也可以將文件中的內容全部復制到本地的.js文件中，然后引用該.js文件。
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>1.4 使用Vue
使用vue需要創建Vue實例?參數為options（選項）表示一個對象。
let vm = new Vue({// element 元素節點 表示當前vue實例所作用的元素節點el: "#app",// 存放當前數據的集合data: {msg: 'hello world vue.js',title: '初始vue'}});2. 數據綁定的方法
2.1?Mustache（雙大括號插值法）
- 雙大括號會將數據解釋為普通文本，而非 HTML 代碼。而且這個方法還有插值閃爍的問題，可以在標簽內寫入v-cloak，再設置v-cloak的樣式為display: none;可以解決這個問題。
- Mustache（雙大括號插值法）也可以綁定一個js表達式。在使用js表達式時，每個綁定的值都只能是單個表達式，語句、及流程控制、函數等是不會生 效的，
<style>[v-cloak] {display: none;}</style>
<body><div id="app"><!-- 雙大括號中只能寫js表達式 --><h1 v-cloak>{{msg.split('')}}</h1><h2 v-cloak>{{sex?'男':'女'}}</h2></div><script src="./vue.js"></script><script>let vm = new Vue({el: '#app',data: {msg: '好好學習 天天向上！！！',sex: true}})console.log(vm);</script>
</body>2.2?v-text
?v-text指令用來渲染內容 類似于原生js中的innerText。
<body><div id="app"><!-- v-text指令用來渲染內容 類似于原生js中的innerText --><h2 v-text="title"></h2></div><!-- 插值閃爍： --><script src="./vue.js"></script><script>new Vue({el: '#app',data: {msg:'Vue基礎指令',title:'請認真學習',html:"<a href='https://cn.vuejs.org/guide/introduction.html'>vue官網</a>"}})</script>
</body>2.3?v-html
v-html指令用來渲染內容 類似于原生js中的innerHtml。
<body><div id="app"><!--v-html指令用來渲染內容 類似于原生js中的innerHtml --><h3 v-html="html"></h3></div><!-- 插值閃爍： --><script src="./vue.js"></script><script>new Vue({el: '#app',data: {msg:'Vue基礎指令',title:'請認真學習',html:"<a href='https://cn.vuejs.org/guide/introduction.html'>vue官網</a>"}})</script>
</body>3. 列表渲染
?在vue中使用v-for指令可以進行數組格式數據渲染。
? 格式：? ?<li v-for="(item,index) in list">{{item}}---{{index}}</li>
| ?v-for | ? 用于列表循環 |
| ?item | ??表示遍歷得到的每一項 |
| ?index | ? 表示遍歷得到的每一項所對應的索引 |
| ? list ? | ? 表示要循環的數組名稱 |
<body><div id="app"><ol><!-- v-for 用于列表循環item 表示遍歷得到的每一項index 表示遍歷得到的每一項所對應的索引list 表示要循環的數組名稱--><li v-for="(item,index) in list">{{item}}---{{index}}</li></ol><hr></hr><ul><li v-for="(item,index) in userList">{{item.name}}---{{item.age}}---{{item.sex}}</li></ul><!-- 遍歷數字 --><ol><li v-for="(item,index) in num">{{item}}---{{index}}</li></ol></div><script src="./vue.js"></script><script>new Vue({el: '#app',data: {list: ['張三', '李四', '王五', '趙六', '關四'],userList: [{name: "張11",age: 18,sex: '男'},{name: "張22",age: 17,sex: '女'},{name: "張33",age: 16,sex: '男'}],num: 10}})</script>
</body>
)
