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>
