Demo01 Hello World
<div id='app'>
<p>{{message}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{message:'Hello World !'}
});
</script>
使用Vue的过程就是定义MVVM各个组成部分的过程的过程。
- 定义View
- 定义Model
- 创建一个Vue实例或”ViewModel”,它用于连接View和Model
在创建Vue实例时,需要传入一个选项对象,选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。
在这个示例中,选项对象的el属性指向View,el: ‘#app’表示该Vue实例将挂载到
…
这个元素;data属性指向Model,data: exampleData表示我们的Model是exampleData对象。
Vue.js有多种数据绑定的语法,最基础的形式是文本插值,使用一对大括号语法,在运行时{{ message }}会被数据对象的message属性替换,所以页面上会输出”Hello World!”。
Demo02 V-modul指令实现数据双向绑定
<div id='app'>
<input v-model='message'/>
<p>{{message}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{message:'hello'}
});
</script>
将message绑定到文本框,当更改文本框的值时,
{{ message }}
中的内容也会被更新。Demo03 v-if指令
<div id='app'>
<h2>hello world</h2>
<h2 v-if="yes">YES</h2>
<h2 v-if="no">NO</h2>
<h2 v-if="age>=28">年龄:{{age}}</h2>
<h2 v-if="gender">性别:</h2>
<h2 v-if="name.indexOf('gao') !== -1">姓名:{{name}}</h2>
</div>
<script>
new Vue({
el:'#app',
data:{
yes:true,
no:false,
age:30,
gender:false,
name:'gaoce'
}
});
</script>
v-if是条件渲染指令,它根据表达式的真假来删除和插入元素,语法如下:
v-if=”expression”
expression返回boolean表达式,表达式可以是boolean属性即true或false,也可以是返回boolean的运算式
v-show指令
<div id='app'>
<h2>hello world</h2>
<h2 v-show="yes">YES</h2>
<h2 v-show="no">NO</h2>
<h2 v-show="age>=28">年龄:{{age}}</h2>
<h2 v-show="gender">性别:</h2>
<h2 v-show="name.indexOf('gao') !== -1">姓名:{{name}}</h2>
</div>
<script>
new Vue({
el:'#app',
data:{
yes:true,
no:false,
age:30,
gender:false,
name:'gaoce'
}
});
</script>
v-show也是条件渲染指令,和v-if指令不同的是,使用v-show指令的元素始终会被渲染到HTML,它只是简单地为元素设置CSS的style属性。(display:none)
v-for指令
<div id='app'>
<table>
<thead>
<tr>
<td>userName</td>
<td>age</td>
<td>gender</td>
</tr>
<tbody>
<tr v-for="student in students">
<td>{{student.userName}}</td>
<td>{{student.age}}</td>
<td>{{student.gender}}</td>
</tr>
</tbody>
</thead>
</table>
</div>
<script>
new Vue({
el: '#app',
data: {
students: [{
userName: '张三',
age: 21,
gender: '女'
}, {
userName: '李四',
age: 21,
gender: '男'
}, {
userName: '王五',
age: 23,
gender: '女'
}]
}
});
</script>
v-for指令基于一个数组渲染一个列表,它和JavaScript的遍历语法相似:
v-for=” site in sites ”
sites是源数据数组,site是数组元素迭代的别名。
Demo06 Computed和Methods
<div id='app'>
<p>{{message}}</p>
<p>computed计算反转字符串{{reverseMessage}}</p>
<p>使用方法计算反转字符串{{reverseMessage2() }}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
message:'hello!'
},
computed:{
reverseMessage:function (){
return this.message.split("").reverse().join("")
}
},
methods:{
reverseMessage2:function(){
return this.message.split("").reverse().join("")
}
}
});
</script>
Computed和Methods效果上两个是一样的,但Computed有依赖缓存。当相关依赖发生改变时才会重新取值,而使用methods时,在重新渲染的时候,函数总会重新调用。