Vue官網中文網：https://cn.vuejs.org/
一、創建一個Vue對象
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="../js/vue.js"></script> <script>
var vm = new Vue({
el: '#example',//定位操作對象，即需要渲染的div，裏面包括需要用vue渲染的控件
data: {//數據json或者json數組的嵌套格式
myData:[],
username:'',
age:'',
nowIndex:-100
},
methods:{//聲明在vue模型中使用的方法
add:function(){
this.myData.push({
name:this.username,
age:this.age
});
this.username='';
this.age='';
},
deleteMsg:function(n){
if(n==-2){
this.myData=[];
}else{
this.myData.splice(n,1);
}
}
},
computed: {//創建數據監聽器
// a computed getter
reversedMessage: function () {//定義回調function，返回基礎數據的操作結果
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
},
watch:{//用於監聽message值得變化
'message':function(val,oldVal){
console.log(val,oldVal);
}
}
});
</script>二、Vue常用指令
1、v-if指令
<h1 v-if="yes">Yes!</h1>
<h1 v-if="no">No!</h1>
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>2、v-show指令
<h1 v-show="yes">Yes!</h1>
<h1 v-show="no">No!</h1>
<h1 v-show="age >= 25">Age: {{ age }}</h1>
<h1 v-show="name.indexOf('jack') >= 0">Name: {{ name }}</h1>3、v-else指令
<h1 v-show="yes">Yes!</h1>
<h1 v-show="no">No!</h1>
<h1 v-show="age >= 25">Age: {{ age }}</h1>
<h1 v-else="sex='femail'">sex:{{sex}}</h1>4、v-for指令
var vm = new Vue({
el: '#app',
data: {
people: [{
name: 'Jack',
age: 30,
sex: 'Male'
}, {
name: 'Bill',
age: 26,
sex: 'Male'
}, {
name: 'Tracy',
age: 22,
sex: 'Female'
}, {
name: 'Chris',
age: 36,
sex: 'Male'
}]
}
}) <table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.sex }}</td>
</tr>
</tbody>
</table>
</div>
</body>5、v-bind指令
<body>
<!--
v-bind指令可以在其名稱後面帶一個參數，中間放一個冒號隔開，這個參數通常是HTML元素的特性（attribute），例如：v-bind:class
v-bind:argument="expression"
下面這段代碼構建了一個簡單的分頁條，v-bind指令作用於元素的class特性上。
-->
<div id="app">
<ul class="pagination">
<li v-for="n in pageCount">
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
activeNumber: 1,
pageCount: 10
}
})
</script>6、v-on指令(處理事件)，並且v-on可以使用@符號替代
<body>
<!--
v-on指令用於給監聽DOM事件，它的用語法和v-bind是類似的，例如監聽<a>元素的點擊事件：
<a v-on:click="doSomething">
有兩種形式調用方法：綁定一個方法（讓事件指向方法的引用），或者使用內聯語句。
Greet按鈕將它的單擊事件直接綁定到greet()方法，而Hi按鈕則是調用say()方法。
-->
<div id="app">
<p><input type="text" v-model="message"></p>
<p>
<!--click事件直接綁定一個方法-->
<button v-on:click="greet">Greet</button>
</p>
<p>
<!--click事件使用內聯語句-->
<button @click="say('Hi')">Hi</button>
</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js!'
},
// 在 `methods` 對象中定義方法
methods: {
greet: function() {
// // 方法內 `this` 指向 vm
alert(this.message)
},
say: function(msg) {
alert(msg)
}
}
})
</script>三、使用v-model實現數據雙向綁定
<div id="example">
<p>顯示文本框的輸入值：{{ message }}</p>
<input type="text" id="test1" v-model="message"/><br>
<input type="text" id="test2" v-model="message"/>
<script>
//model創建
var exampleData = {
message: $("#test1").value
}
// 創建一個 Vue 實例或 "ViewModel"
// 它連接 View 與 Model
var vm=new Vue({
el: '#example',
data: exampleData
})
</script>
