Vue.js 基礎用法
要使用Vue.js定義的參數時用{{}}把參數包在裡面就可以跟著Vue.js裡面設定的參數連動
<p id="test">{{msg}}</p>
<script>
var test = new Vue{
el:"#tset", //這裡就跟選擇器寫法一樣，#代表選擇ID .代表選擇class
data:{
msg:"測試文字", //這裡就是用兩個大括號包起來的參數
}
}
</script>
Vue.js文件裡面提到的瀏覽器控制台就是開發人員模式(ctrl+shift+i)的console頁籤
v-bind 用: 替代 example v-bind:title="asd" => :title="asd"
v-if v-show
裡面的變數值要true 或 false
效果是true的時候會顯示在畫面上，反之則看不見。
if和show差別在於，當判斷為false的時候，綁定if的tag會完全消失，show只是隱藏起來而已
v-for
<div id="test">
<table>
<tr v-for="AAA in BBB"> //BBB為Vue的data裏面的變數，AAA類似each的k
<td>{{AAA .a}}</td>
<td>{{AAA .b}}</td>
</tr>
</table>
</div>
<script>
var test = new Vue({
el:"#test",
data:{
BBB:[
{a:"a1",b:"b1"},
{a:"a2",b:"b2"}
],
}
});
</script>
v-text
<p v-text="test"></p>
你在裡面塞的東西通通只會以字串方式呈現，就算塞html tag會把tag顯示出來。
v-html
<p v-html="test"></p>
會讀取塞進來的html tag
v-once
<p v-once="test"></p>
只會執行一遍，不會被更動
v-on 用@替代 example v-on:click="asdsad" => @click="asdsad"
v-on就是幫物件綁定動作(event)，function 的設定使用methods
methods用法
<div id="app">
<p>{{alert}}</p>
<p v-text="alert"></p>
<p v-html="alert"></p>
<p v-once="alert">{{alert}}</p>
<input type="text" v-model="restStr">
<input type="text" v-on:keyup="changeinput">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
alert:'提示',
test:'qwe',
maxStr:10,
restStr:10,
},
methods:{
changeinput : function(e){
console.log(e);
this.restStr = this.maxStr-e.target.value.length;
if(e.target.value.length > 10){
this.alert = '<span style="color:red;">你已經超過10個字了</span>';
}else{
this.alert = "提示";
}
}
}
});
</script>
function裡是可以使用javascript函式的，要呼叫Vue data裡面設定的參數前面先加個this用.連接。
--------------------------------------------------------------------------------------------------------------------------
今天繼續玩Vue.js
之前會有ajax取資料回來後再用html字串 append() 或 html() 頁面上去
今天嘗試用Vue.js來實作
html
<div id="app-4">
<ol>
<li v-for="todo in data">
{{ todo.class_name }}
{{ todo.create_datetime }}
<a class="btn btn-xs btn-info" v-bind:data-sn="todo.class_sn">按我</a>
</li>
</ol>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
javascript
$.post(路徑,{參數},function(product_class){
console.log(product_class);
var app4 = new Vue({
el: '#app-4',
data: product_class,
methods: {
reverseMessage: function () {
alert('asd');
}
}
})
},'json');
留言
張貼留言