- 什么是Vue?我認(rèn)為它是一個(gè)通過類似于json的東西來操作html界面的這么一個(gè)框架。
- jQuery我一直認(rèn)為是個(gè)庫,它無非是把js簡寫了,特別在dom操作上,讓你感覺到$布滿了代碼世界,我不否認(rèn)它的好,再好它也只是把js簡寫而已。
- 而vue是帶著我們從另一個(gè)面去看網(wǎng)頁設(shè)計(jì),它弱化了dom上的感覺,加強(qiáng)了html界面上的操作。
一、 我們開始去認(rèn)識Vue吧,為了便于學(xué)習(xí),我們還是用鏈接網(wǎng)絡(luò)上的vue.js形式去學(xué)習(xí)吧。
二、創(chuàng)建一個(gè)盒子box等下我們就用vue對它進(jìn)行操作。
三、這就是一個(gè)簡單的vue構(gòu)造。
四、我們把vue捆綁到html元素中。
五、試著對html界面進(jìn)行修改。
六、數(shù)據(jù)不僅可以一個(gè),也可多個(gè),怎么樣,感覺和js的取得dom對象再進(jìn)行innerHTML操作相比,讓你幾乎感受不到了DOM的存在。
七、除了可以放數(shù)據(jù),還可以放函數(shù)事件。
八、我們做個(gè)簡單的返回?cái)?shù)據(jù)的函數(shù)吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div class="box">
<!-- 創(chuàng)建一個(gè)容器box,它就是我們等下的操作對象 -->
<p>{{text1}}</p>
<p>{{text2}}</p>
<p>{{myfun()}}</p>
</div>
<script>
var myvue = new Vue({
// 我在這里聲明了一個(gè)vue對象,我們就是在這里對html進(jìn)行操作
el:'.box',
// myvue就捆綁到了box上,以后box的操作就可以在這里進(jìn)行了
// 注意vue內(nèi)各項(xiàng)的寫法結(jié)構(gòu)aaa:bbb,
data:{
text1:'hello world',
text2:'請關(guān)注我的頭條號',
},
//我認(rèn)為data是存放數(shù)據(jù)的地方
methods: {
// 這里是放函數(shù)事件的地方
myfun:function(){
return this.text2 + '我是落筆承冰!';
},
},
})
</script>
</body>
</html>






