小生博客：http://xsboke.blog.51cto.com
如果有疑问,请点击此处,然后发表评论交流,作者会及时回复。
-------谢谢您的参考，如有疑问，欢迎交流目录:
1. 简单的将数据渲染到DOM 2. Vue的"v-"指令 3. "v-if"指令的使用 4. "v-for"指令的使用 5. Vue的事件处理 6. "v-model:value"实现双向数据绑定 7. Vue实现逆转字符串 8. Vue 动态添加class属性,以及三目运算. 9. "v-bind:style"指令定义内联样式 10. 指令支持数组 11. Vue实例各个生命周期的钩子函数
- 简单的将数据渲染到DOM
<div id="app">
{{message}} -- 使用"{{}}"将数据渲染到DOM
</div>
<script type="text/javascript">
var app = new Vue({ -- 创建Vue实例
el: '#app', -- 通过属性绑定元素
data:{
message: 'Hello Vue!', -- 设置上下文
}
})
</script>- Vue的"v-"指令
通过"v-"用来绑定属性,然后对属性值进行操作
<div id="app" v-bind:title='vueTitle'> -- 使用"v-"时不需要再使用"{{}}"渲染
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
vueTitle: 'vue data vueTitle'
}
})
- "v-if"指令的使用
只用来判断真假(true|false)
<div id="app">
<p v-if="seen">如果是true则可以显示</p> -- 如果seen的值为true则显示p标签,如果为false则不显示
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
seen:true,
}
})
</script>- "v-for"指令的使用
<div id="app">
<ul>
<li v-for="item in list"> -- item就是for从list中取出来的变量,仔细看看其实和普通的for循环一样
{{item}} -- 如果循环的是一个字典类型数据,通过 "item." 获取value
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
list:["Item A","Item B","Item C"]
}
})
</script>- Vue的事件处理
通过"v-on"指令,处理click的事件
所有的事件触发时执行的函数,都需要写到Vue实例的的methods选项中,
<div id="app">
<p>{{message}}</p>
<button v-on:click="showmessage">显示消息</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
message: 'Hello Vue!'
},
// 所有的函数都定义在methods
methods:{
showmessage:function(){
this.message = "Hello World!"
}
}
})
</script>- "v-model:value"实现双向数据绑定(就是不同标签中的内容是相同的)
<div id="app">
<p>{{message}}</p>
<input v-model:value="message" /> -- input标签和p标签互相随对方改变
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
message: 'Hello Vue!'
},
})
</script>- Vue实现逆转字符串
<div id="app">
<p>{{message}}</p>
<button v-on:click="reverse">逆转消息</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
message: 'Hello Vue!'
},
methods:{
reverse:function(){
this.message = this.message.split('').reverse().join('') -- Vue逆转字符串,类似python中,先将字符串转换为序列,然后翻转列表,最后在join为字符串
}
}
})
</script>- Vue 动态添加class属性,以及三目运算.
动态添加class属性
<style type="text/css">
.active{
background-color: #0f0;
}
</style>
<body>
<div id="app">
<!-- 支持三目运算符 -->
<p v-bind:class="{Vactive:isActive}">我是P标签</p> -- 当isActive为true时,class属性才会等于"Vactive",然后将引用上面style定义的CSS样式
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
isActive:true,
Vactive:'active'
}
})
</script>
</body>
三目运算
<style type="text/css">
.active{
background-color: #0f0;
}
.error{
background-color: #f00;
}
</style>
<body>
<div id="app">
<!-- 支持三目运算符 -->
<p v-bind:class="isActive ? Vactive:Verror">我是P标签</p> -- 当isActive为true时,引用Vactive的值,为false时,引用Verror的值
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
isActive:true,
Vactive:'active',
Verror:'error',
}
})
</script>
</body>- "v-bind:style"指令定义内联样式
"v-bind"可以简写为":",所以"v-bind:style"可以写为":style"
<body>
<div id="app">
<p :style="styleObject">我是P标签</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
/* Vue的内联样式采用的json格式,而且要使用驼峰命名法,
* 和CSS以"-"命名";"结尾是不一样的
*/
styleObject:{
backgroundColor: '#00f',
fontSize: '20px',
}
}
})
</script>
</body>- 指令支持数组
<style type="text/css">
.active{ -- 11.1
background-color: red;
}
.error{ -- 因为".error"在".active"后面,所以:".error"的优先级最高.
background-color: blue;
}
</style>
<body>
<div id="app">
<p :class="items">我是P标签</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
items:['active','error'], -- 如果数组中多个变量的CSS属性冲突,则按照DOM从上往下读的原则,后面的CSS样式优先级高,此例".error"的优先级高,
} -- 注意,优先级与数组的顺序无关,而是标签<style>中的CSS顺序,因为浏览器是不会识别Vue的,Vue最终还是转换为了html语言
})
</script>
</body>- Vue实例各个生命周期的钩子函数
通俗讲,就是在Vue实例运行的各个阶段可以使用的函数
比如:
在Vue实例创建时可以执行created函数
在Vue实例被挂载到DOM时可以执行mounted函数
在Vue实例更新时,可以执行updated函数
<div id="app">
{{message}}
<button @click="change">单击更新message</button> -- "v-on"指令可以简写为"@",所以这里的"v-on:click"简写为了"@click"
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
message:'hello vue!'
},
methods:
change:function(){ -- 点击button按钮时执行change函数
this.message = 'hello world!' -- 更改message的值
}
},
// 钩子函数,不用写在methods中
created:function(){
console.info('Vue对象创建时被调用!'); -- 信息被输入到console控制台
},
mounted:function(){
console.info('Vue对象挂载到dom元素时执行！');
},
updated:function(){
console.info('data数据被更新的时候执行');
}
})
</script>