Vue.js 簡介 說明及下載 Vue.js使用文檔已經寫的很完備和詳細了,通過以下地址可以查看: https://cn.vuejs.org/v2/guide/ vue.js如果當成一個庫來使用,可以通過下麵地址下載: https://cn.vuejs.org/v2/guide/installati ...
Vue.js 簡介
說明及下載
Vue.js使用文檔已經寫的很完備和詳細了,通過以下地址可以查看: https://cn.vuejs.org/v2/guide/
vue.js如果當成一個庫來使用,可以通過下麵地址下載: https://cn.vuejs.org/v2/guide/installation.html
Vue.js基本概念
我們下載了vue.js後,需要在頁面上通過script標簽引入vue.js,開發中可以使用開發版本vue.js,產品上線要換成vue.min.js。
script type="text/javascript" src="js/vue.min.js"></script
Vue代碼實例(創建)
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">{{ message }}</div>
</body>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
var vm=new Vue({
//el屬性對應一個標簽 當el對象創建後,這個標簽內的區域就被Vue對象接管,
//接下來就可用Vue來做一些為所欲為的事情啦
el:'#app',
data : {message:'好濕呀'}
});
</script>
數據與方法
當一個 Vue 實例被創建時,它向 Vue 的響應式系統中加入了其data對象中能找到的所有的屬性。當這些屬性的值發生改變時,視圖將會產生“響應”,即匹配更新為新的值。還可以在Vue實例中定義方法,通過方法來改變實例中data對象中的數據,數據改變了,視圖中的數據也改變。
Vue實例代碼(方法)
window.onload = function(){
var vm = new Vue({
el:'#app',
data:{message:'hello world!'},
methods:{
fnChangeMsg:function(){
this.message = 'hello Vue.js!';
}
}
});
}
div id="app"
<p>{{ message }}</p>
<button @click="fnChangeMsg">改變數據和視圖</button>
/div
Vus.js模板語法
模板語法指的是如何將數據放入html中
數據綁定最常見的形式就是使用“Mustache”語法 (雙大括弧) 的文本插值,例如:
{{ msg }}
插入的值當中還可以寫表達式:
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<a v-bind:href="url">鏈接文字
指令
指令 (Directives) 是帶有“v-”首碼的特殊屬性。指令屬性的值預期是單個JavaScript表達式,指令的職責是,當表達式的值改變時,將其產生的連帶影響,響應式地作用於DOM。常見的指令有v-bind、v-if、v-on。
<-- 根據ok的布爾值來插入/移除 p元素 -->
<p v-if="ok">是否顯示這一段
<-- 監聽按鈕的click事件來執行fnChangeMsg方法 -->
<button v-on:click="fnChangeMsg">按鈕
我的小boby ,有不懂的,歡迎下方評論!!!