? Vue.js 学习日志(一) - 蓝蓝设计_UI设计公司

追求卓越一諾千金

藍藍設計,2011年成立,主創清華團隊,專注軟件和互聯網ui設計開發。擅長企業信息化管理、監控、大數據軟件UIUE咨詢和設計開發服務。立足UI,好好學習,天天進步!


Vue.js 學習日志(一)

2019-7-4 釋然 前端及開發文章及欣賞


如果您想訂閱本博客內容,每天自動發到您的郵箱中,


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例</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 + " - 堅持學習!";
}
}
})
</script>
</body>
</html>
1、每個Vue應用都需要實例化Vue來實現

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

在上面實例中的id為vue_data,在div元素中:

<div id="vue_data"></div>
意味著所有的改動均在這個id為vau_data的div中,外部不受影響。

3、定義數據對象

data用于定義屬性,在上述實例中有2個屬性,分別為:title、url。

methods用于定義函數,可以通過return來返回函數值。

{{ }}用于輸出對象屬性和函數返回值。

當一個Vue實例創建時,Vue的響應系統加入了data對象中能找到的所有屬性。當這些屬性的值發生改變時,html視圖也會產生相應的變化。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例</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">
//數據對象
var data = {title: "Vue.js",url: "https://cn.vuejs.org"}
var vm = new Vue({
el: '#vue_data',
data: data
})

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

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

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

藍藍設計www.thriveonsite.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

標簽: Vue.js 學習日志(一) « 如何成為一個讓人幸福的設計師? | 數據可視化大屏設計經驗分享»


藍藍 http://www.thriveonsite.com

訂閱Rss
彩票高賠率好平台 北京赛车pk10APP网资讯 有哪些靠谱的网赚平台 湖北快3走势 2019美元网赚 网赚的方法 速发彩票 在家上网赚点小钱 正规网赚平台 秒速赛车平台