Vue 寫hello world
阿新 • • 發佈：2022-03-29
Vue 寫hello world
前言
vue是Javascript裡的一個框架，因為是一套框架所以在編寫Vue程式前要匯入Vue的包。
<!-- 包1 --> <!-- 開發環境版本，包含所有東西 --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!-- 包2 --> <!-- 上面個包的簡約版，優化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
導包時遇到的問題：
報錯資訊：Cross-origin resource needs a 'crossorigin' attribute to be eligible for integrity validation.
解決辦法,把包的連結複製到後面這個連結裡轉換一下：https://www.srihash.org/
Vue編寫Hello World
<html> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!--匯入vue包--> <body> <div id="app"> <!--設定id選擇器，為後面好呼叫div標籤--> <!--id、類、標籤選擇器都行--> {{ write }} <!--呼叫後面同為write的值--> </div> <script> var app=new Vue({ //建立一個vue例項 el:'#app', //通過id選擇器定位到div標籤，id、類、標籤選擇器都行 data:{ //存放資料 write:"Hello World" //變數賦值 } }) </script> </body> </html>
Vue中data中的複雜資料型別處理
<html> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!--匯入vue包--> <body> <div id="app"> <!--設定id選擇器，為後面好呼叫div標籤--> <!--id、類、標籤選擇器都行--> {{ write }} <!--呼叫後面同為write的值--> <h3>{{info.name}}</h3> <h3>{{info.sex}}</h3> <ul> <li>{{family[0]}}</li> <li>{{family[1]}}</li> <li>{{family[2]}}</li> </ul> </div> <script> var app=new Vue({ //建立一個vue例項 el:'#app', //通過id選擇器定位到div標籤，id、類、標籤選擇器都行 data:{ //存放資料 write:"物件資料型別和資料資料型別處理方法如下" , //變數賦值 info:{name:"小紅",sex:"男",year:18}, //物件資料型別 family:["爸爸","媽媽","姐姐"] //陣列資料型別 } }) </script> </body> </html>