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 的组件和也做的非常 ...
随机推荐
- 解决让刷新页面时不提示 "重试或取消”对话框
如果刷新一个已经提交过的页面时,系统总是会提示一个 "重试或取消”的对话框.,如果是一个普通的页面,好象也无所谓,有就有,大不了多点一下.但是当我们是在子窗体中刷新父窗体时,就显得有点多余了 ...
- 牛客 在其他数都出现k次的数组中找到出现1次的数
题目链接:https://www.nowcoder.com/practice/26e46f1f5e0d48c4b9ba13fe3e8d0ec6?tpId=101&tqId=33216& ...
- Dubbo 系列(05-1)服务发布
目录 Dubbo 系列(05-1)服务发布 Spring Cloud Alibaba 系列目录 - Dubbo 篇 1. 背景介绍 1.1 服务暴露整体机制 2. 源码分析 2.1 前置工作 2.2 ...
- javascript中数组的应用总结
最近在总结javascript的相关应用,今天对js中的数组部分进行归纳总结,以便在以后的工作中有所参考. 1.在js中数组的定义方式有两种: var a = [1,2,3,4]; var b = n ...
- Codeforces 1140C(贪心+堆)
题面 传送门 题意: 给出长度为n的序列b,t,定义一个子序列的值为\(\min\{ b_i\} \times \sum t_i\),求所有子序列中值最大的一个,输出最大值 分析 假如固定某个b[i] ...
- Resultset获取行数和列数
在Java中,获得ResultSet的总行数的方法有以下几种. 第一种:利用ResultSet的getRow方法来获得ResultSet的总行数 Statement stmt = con.create ...
- casperjs-options
The Casper class The easiest way to get a casper instance is to use the module's create() method: 最简 ...
- windows下如何使用Git上传代码
首先,在使用Git的同时,我们需要拥有码云账号,在官网注册即可(官网:https://gitee.com/). 注册结束后创建一个代码仓库,最好和要上传的文件夹名字一样: 1.首先在电脑上安装wind ...
- mysql limit 数据重复及遗漏
某天写了一段CRUD,提测给QA,后来想起来忘记按规则排序了,然后修改了代码提交,这个时候QA扔给我一条狗,不,是一个BUG. 内心一片忧伤,CRUD也有BUG啊,怎么办怎么办,赶紧看看去. BUG描 ...
- tomcat manager 禁止外网访问 只容许内网访问
参考:http://tomcat.apache.org/tomcat-7.0-doc/manager-howto.html A default Tomcat installation includes ...