（vue基础试炼_01）使用vue.js 快速入门hello world
文章目錄
- 一、需求案例
- 二、案例實現
- 2.1. 原始js寫法
- 2.2. 怎樣使用vue.js ？
- 2.3. 使用vue.js 寫法
- 三、案例vue簡述？
- 四、案例趣味延伸
- 五、表達值作用及囑咐語
一、需求案例
- 在頁面顯示hello world
二、案例實現
2.1. 原始js寫法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>使用原始 js 快速入門hello world</title> </head><body> <div id="app"></div> <script>var dom = document.getElementById('app');dom.innerHTML = 'hello world' </script> </body> </html>- 效果圖
2.2. 怎樣使用vue.js ？
| ① | 下載vue.js復制到項目中 |
| ② | 在頁面中引入vue.js 庫 |
| ③ | 創建一個Vue實例 |
| ④ | 創建一個受vue管束的div，并在Vue實例的el表達式中，設置受vue.js管束div的id |
| ⑤ | 在Vue實例的data標簽中，設置需要現實的數據 |
| ⑥ | 在div標簽中，使用插值表達式將數據渲染出來 |
2.3. 使用vue.js 寫法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>使用vue.js 快速入門hello world</title><!--引入vue.js庫--><script src="vue.js"></script> </head><body> <!--vue接管的div--> <div id="app">{{content}} </div> <script>/*創建了一個vue實例*/var app = new Vue({el: '#app',data: {content: 'hello world'}}); </script> </body> </html>三、案例vue簡述？
首先創建一個Vue實例，然后這個是里接收一些配置項，這里el這個配置項指的是Vue實例負責管理的區域，el中的#app指的是id等于app的div標簽，所以，當你寫 el: '#app’的時候，意思就是說讓我的這個Vue實例去接管id等于app的這個dom標簽里的所有的內容；在Vue實例中定義的data，相當于定義了一組數據，數據里面有一個content的數據，內容是hello world,而我在我的id等于app的div標簽之中，可以通過插值表達式也就是{{}}這種語法，來去調用data里面對應的數據。
四、案例趣味延伸
新增下面這一組div標簽和內容，效果又是怎樣的呢？
截圖中，新增的div中的數據被原封不動的輸出了出來，只有上面的div被替換成了hello world 這是為為什么呢？
原因就在于你的這個Vue實例只接管了app對應的id標簽下面所有的內容，而沒有接管其他div標簽下面的內容，因此，他只能替換id等于app這個dom標簽下面的content，而不會替換不受Vue管束的dom標簽下面的content。
五、表達值作用及囑咐語
| el | el限制了一個Vue實例接管的區域或者說處理的dom的范圍 |
| data | 定義一些數據 |
最后希望大家借助這個例子，能夠理解vue.js里面el的作用(el限制了一個Vue實例接管的區域或者說處理的dom的范圍)、data的作用(定義一些數據)。
下一篇：（vue基礎試煉_02）使用vue.js實現隔2秒顯示不同內容https://gblfy.blog.csdn.net/article/details/103841818
總結
以上是生活随笔為你收集整理的（vue基础试炼_01）使用vue.js 快速入门hello world的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 开发经验分享_01_遇到问题三步走(思路
- 下一篇： Vue计算属性、方法、侦听器