説明
Vue.js是前端框架，用JS解決HTML資料處理。
→技術文件
HTML：寫模板
JS：代入資料
→解決①HTML重複撰寫太多②資料即時更新問題
應用
引入Vue.js
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.js"></script>
</head>建立模板與代入資料
#app
//指定Vue作用區域
h1 Vue.js 使用大括號與變數代換
hr
p 我的名字叫做{{name}}，來自{{city}}
//用兩個大括號{{}}建立模板
br
|最近正在學習如何使用{{lang}}，
br
|他其實就像是一個{{text}}
p Vue.js的代換可以用物件來表示，甚至陣列來判斷。//建立一個Vue, 即時監測資料更新狀況
var vm=new Vue({
el: "#app", //指定作用區域
data: { //用物件形式存放資料
name: "陳怡安",
city: "基隆市",
lang: "Vue.js",
text: "資料置換法",
notation: "兩個大括號{{變數名稱}}",
}
})Display
我的名字叫做陳怡安，來自基隆市
最近正在學習如何使用Vue.js，
他其實就像是一個資料置換法
Vue.js的代換可以用物件來表示，甚至陣列來判斷。
只要在裡面用兩個大括號{{變數名稱}}包起來就可以了。
陣列與v-for列表渲染
#app
p 我的技能有：
/**************
非v-for法
ul
li {{skills[0]}}
li {{skills[1]}}
li {{skills[2]}}
li {{skills[3]}}
****************/
//v-for法
ul
li(v-for="skill in skills") {{skill}}
//skill 可以自己命名
//skills要根據vue撰寫的内容指定var vm=new Vue({
el: "#app",
data: {
skills: ["程式開發", "網頁設計", "翻譯", "口譯"],
});Display
我的技能有：
- 程式開發
- 網頁設計
- 翻譯
- 口譯
使用物件資料
#app
p 我踏入網頁設計已經有{{infos.year}}年了，希望可以持續進步。var vm=new Vue({
el: "#app",
data: {
infos:{
year: 1
},
}
});Display
我踏入網頁設計已經有1年了，希望可以持續進步。
代入HTML程式碼
使用3組大括號代入HTML程式碼
#app
p Vue.js除了預設帶入是一般的純文字以外，三組大括號可以代入HTML原始碼
div {{{html}}}.block
width: 100px
padding: 10px
border: 1px solid #000var vm=new Vue({
el: "#app",
data: {
html: "<div class='block'>代入HTML</div>"
//雙引號内的HTML字串裡面要改單引號
}
});Display
代入HTML