Vue.js 學(xué)習(xí)日志（一）

2019-7-4    seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例</title>
<script src="../static/vue.min.js"></script>
</head>
<body>
<div id="vue_data">
<h1>title : {{title}}</h1>
<h1>url : {{url}}</h1>
<h1>{{info()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_data',
data: {
title: "Vue.js",
url: "https://cn.vuejs.org"
},
methods: {
info: function() {
return  this.title + " - 堅(jiān)持學(xué)習(xí)！";
}
}
})
</script>
</body>
</html>
1、每個(gè)Vue應(yīng)用都需要實(shí)例化Vue來實(shí)現(xiàn)

var vm = new Vue({
    //*******
})
2、el參數(shù)

在上面實(shí)例中的id為vue_data，在div元素中：

<div id="vue_data"></div>
意味著所有的改動(dòng)均在這個(gè)id為vau_data的div中，外部不受影響。

3、定義數(shù)據(jù)對(duì)象

data用于定義屬性，在上述實(shí)例中有2個(gè)屬性，分別為：title、url。

methods用于定義函數(shù)，可以通過return來返回函數(shù)值。

{{ }}用于輸出對(duì)象屬性和函數(shù)返回值。

當(dāng)一個(gè)Vue實(shí)例創(chuàng)建時(shí)，Vue的響應(yīng)系統(tǒng)加入了data對(duì)象中能找到的所有屬性。當(dāng)這些屬性的值發(fā)生改變時(shí)，html視圖也會(huì)產(chǎn)生相應(yīng)的變化。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例</title>
<script src="../static/vue.min.js"></script>
</head>
<body>
<div id="vue_data">
<h1>title : {{title}}</h1>
<h1>url : {{url}}</h1>
</div>
<script type="text/javascript">
//數(shù)據(jù)對(duì)象
var data = {title: "Vue.js",url: "https://cn.vuejs.org"}
var vm = new Vue({
el: '#vue_data',
data: data
})

//設(shè)置屬性會(huì)影響到原始數(shù)據(jù)
vm.title = "spring";
document.write(data.title + "<br>");

//同樣
data.url = "https://spring.io";
document.write(vm.url);
</script>
</body>
</html>
Vue還提供了實(shí)例屬性與方法，以前綴$與用戶定義的屬性區(qū)分開來。

document.write(vm.$data === data) // true

藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

分享本文至：

日歷

鏈接

個(gè)人資料

存檔