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入门例子的更多相关文章

  1. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  2. Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  3. Vue入门(二)之数据绑定

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  4. Vue入门系列(三)之Vue列表渲染及条件渲染实战

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  5. Vue入门系列(四)之Vue事件处理

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  6. Vue入门系列(五)Vue实例详解与生命周期

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  7. Vue 入门之 Vuex 实战

    Vue 入门之 Vuex 实战 引言 Vue 组件化做的确实非常彻底,它独有的 vue 单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其 Vue 组件设计的就 ...

  8. 09Vue.js快速入门-Vue入门之Vuex实战

    9.1. 引言 Vue组件化做的确实非常彻底,它独有的vue单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其Vue组件设计的就是,父组件通过子组件的prop进 ...

  9. Vue 入门之组件化开发

    Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...

随机推荐

  1. oo_project_1

    Project 1题目要求分析: 实现多项式的加减运算,主要问题是解决输入格式的判断问题. 输入实例: {(3,0), (2,2), (12,3)} + {(3,1), (-5,3)} – {(-19 ...

  2. EasyUI 的日期控件单击文本框显示日历

    注意:可 用 ctrl+f 搜索 "_outerWidth():0" 1. jQuery.easyui.min.js1.3.2 版本   function _745(_746,_7 ...

  3. bootstrap知识点

    首先,声明本次笔记是来自biaoyansu.com表严肃老师的bootstrap课程视频. 1.基本知识:1-1.首先,Html(理解:骨骼).Css(理解:皮肤).Js(理解:神经)分工不同.1-2 ...

  4. ThinkPHP内置标签库原理(Cx标签库)

    任何一个模板引擎的功能都不可能是为你量身定制的,具有一个良好的可扩展 机制也是模板引擎的另外一个考量,Smarty采用的是插件方法来实现扩展,ThinkTemplate由于采用了标签库技术,比Smar ...

  5. 调用Consul服务(消费服务)

    调用Consul服务(消费服务) 依赖项 在spring-cloud-consul-client项目中添加依赖项,POM文件内容中添加如下依赖项: <dependency> <gro ...

  6. mysql 性能调优 参数随写

    set global innodb_buffer_pool_size = 12*1024*1024*1024;set global bulk_insert_buffer_size = 12582912 ...

  7. 【UR #5】怎样跑得更快

    题目 给定\(n,c,d\)和序列\(\{b_i\}\),求一个序列\(\{x_i\}\)满足 \[\sum_{j=1}^n\gcd(i,j)^c\times \rm{lcm(i,j)^d}\time ...

  8. c# WPF DataGrid 获取选中单元格信息

    private void Dg_SelectedCellsChanged(object sender, SelectedCellsChangedEventArgs e) { Console.Write ...

  9. struts2之ModelDriven

    在Struts 2中,提供了另外一种直接使用领域对象的方式,就是让action实现com.opensymphony. xwork2.ModelDriven接口.ModelDriven让你可以直接操作应 ...

  10. linux内核的简单介绍

    linux的版本号分为两个部分:内核(Kernel)和发行套件(distribution)版本. 内核版本是linus领导下的开发小组开发出的系统内核的版本号,而发行套件是由其他组织或者厂家将linu ...