vue入门例子
vue入门例子
1、声明示渲染 {{message}}
2、绑定事件 v-bind
3、控制切换一个程序是否显示 v-if
4、渲染循环 v-for
5、点击事件 v-on
6、双向数据绑定 v-model
一、声明示渲染 {{message}} 例:
<template>
<div id="app">
<h1>
<p>{{message}}</p>
</h1>
</div>
</template> <script>
export default {
name: 'app',
data(){
return{
message:'我最棒!'
}
},
}
</script> <style scoped>
#app {
text-align: center;
color: red;
margin-top: 60px;
font-size: 60px;
}
</style>
效果如下:
二、绑定事件 v-bind 例:
<template>
<div id="app">
<h1>
<p v-bind:title="msg">
鼠标悬停几秒,查看动态绑定的提示信息!
</p>
</h1>
</div>
</template> <script>
export default {
name: 'app',
data(){
return{
msg: '今天你吃早餐了吗' + new Date().toLocaleString()
}
},
}
</script> <style scoped>
#app {
text-align: center;
color: red;
margin-top: 60px;
font-size: 60px;
}
</style>
显示效果如下:
请把鼠标悬停几秒,会有提示信息。
三、控制切换一个程序是否显示 v- for 例:
<template>
<div id="app">
<h1>
<p v-if="showMsg">大家好!</p>
</h1>
</div>
</template> <script>
export default {
name: 'app',
data(){
return{
showMsg:true
}
},
}
</script> <style scoped>
#app {
text-align: center;
color: red;
margin-top: 60px;
font-size: 60px;
}
</style>
效果如下:
四、渲染循环 v-for 例:
<template>
<div id="app">
<h3>
<ol>
<li v-for="list in lists">{{list.text}}</li>
</ol>
</h3>
</div>
</template> <script>
export default {
name: "app",
data() {
return {
lists: [
{ text: "天气晴朗,阳光明媚" },
{ text: "适合约会!" },
{ text: "不是吗?" }
]
};
}
};
</script> <style scoped>
#app {
text-align: center;
color: red;
margin-top: 60px;
font-size: 60px;
}
</style>
效果如下:
五、点击事件 v-on: 例:
<template>
<div id="app">
<h1>
<p>{{message}}</p>
</h1>
<button v-on:click='msg'>素素最美!</button>
</div>
</template> <script>
export default {
name: 'app',
data(){
return{
message:'素素最棒!'
}
},
methods:{
msg:function(){
this.message = this.message.split('').reverse().join('')
}
}
}
</script> <style scoped>
#app {
text-align: center;
color: red;
margin-top: 60px;
font-size: 60px;
}
</style>
点击按钮之后,字母可以反转,变为
六、双向数据绑定 v-model 例:
<template>
<div id="app">
<h1>{{msg}}</h1>
<input v-model="msg">
</div>
</template> <script>
export default {
name: "app",
data() {
return {
msg:'海阔天空!'
};
}
};
</script> <style scoped>
#app {
text-align: center;
color: red;
margin-top: 60px;
font-size: 60px;
}
</style>
效果如下:
尝试在input框里输入一些东西,查看效果,例:
vue入门例子的更多相关文章
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue入门(二)之数据绑定
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Vue入门系列(三)之Vue列表渲染及条件渲染实战
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Vue入门系列(四)之Vue事件处理
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Vue入门系列(五)Vue实例详解与生命周期
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Vue 入门之 Vuex 实战
Vue 入门之 Vuex 实战 引言 Vue 组件化做的确实非常彻底,它独有的 vue 单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其 Vue 组件设计的就 ...
- 09Vue.js快速入门-Vue入门之Vuex实战
9.1. 引言 Vue组件化做的确实非常彻底,它独有的vue单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其Vue组件设计的就是,父组件通过子组件的prop进 ...
- Vue 入门之组件化开发
Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...
随机推荐
- oo_project_1
Project 1题目要求分析: 实现多项式的加减运算,主要问题是解决输入格式的判断问题. 输入实例: {(3,0), (2,2), (12,3)} + {(3,1), (-5,3)} – {(-19 ...
- EasyUI 的日期控件单击文本框显示日历
注意:可 用 ctrl+f 搜索 "_outerWidth():0" 1. jQuery.easyui.min.js1.3.2 版本 function _745(_746,_7 ...
- bootstrap知识点
首先,声明本次笔记是来自biaoyansu.com表严肃老师的bootstrap课程视频. 1.基本知识:1-1.首先,Html(理解:骨骼).Css(理解:皮肤).Js(理解:神经)分工不同.1-2 ...
- ThinkPHP内置标签库原理(Cx标签库)
任何一个模板引擎的功能都不可能是为你量身定制的,具有一个良好的可扩展 机制也是模板引擎的另外一个考量,Smarty采用的是插件方法来实现扩展,ThinkTemplate由于采用了标签库技术,比Smar ...
- 调用Consul服务(消费服务)
调用Consul服务(消费服务) 依赖项 在spring-cloud-consul-client项目中添加依赖项,POM文件内容中添加如下依赖项: <dependency> <gro ...
- mysql 性能调优 参数随写
set global innodb_buffer_pool_size = 12*1024*1024*1024;set global bulk_insert_buffer_size = 12582912 ...
- 【UR #5】怎样跑得更快
题目 给定\(n,c,d\)和序列\(\{b_i\}\),求一个序列\(\{x_i\}\)满足 \[\sum_{j=1}^n\gcd(i,j)^c\times \rm{lcm(i,j)^d}\time ...
- c# WPF DataGrid 获取选中单元格信息
private void Dg_SelectedCellsChanged(object sender, SelectedCellsChangedEventArgs e) { Console.Write ...
- struts2之ModelDriven
在Struts 2中,提供了另外一种直接使用领域对象的方式,就是让action实现com.opensymphony. xwork2.ModelDriven接口.ModelDriven让你可以直接操作应 ...
- linux内核的简单介绍
linux的版本号分为两个部分:内核(Kernel)和发行套件(distribution)版本. 内核版本是linus领导下的开发小组开发出的系统内核的版本号,而发行套件是由其他组织或者厂家将linu ...