00.vue代码架构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <!-- 【注意】：MVVM(Model-View- Controller)指：即模型-视图-视图模型； 【模型】指的是后端传递的数据； 【视图】指的是所看到的页面； 【视图模型】mvvm模式的核心，它是连接view和model的桥梁。 --> <!-- 表示此div要用vue框架 --> <!-- {{}}里面是模板变量 --> <div id="app"><!-- 这里就是视图部分VIEW--> {{title}} </div> <script type="text/javascript"> // 实例化上面的对象 var app=new Vue({ // 配置参数 // el表示在那个元素上使用vue框架 el:"#app", // 下面的data就是模型部分Model；VM相当于vue.js，用于将视图和模型关联起来 data:{ title:"hello vue!" } }) </script> </body> </html>
01.v-if（条件语句）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-if</title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> v-if:控制切换一个元素是否显示; v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别; v-if与v-else之间不能有其他元素 <div id="app"> <h1>用户名：{{username}}</h1> <h3 v-if="isVip">用户类型：VIP</h3> <h3 v-else>用户类型：普通用户</h3> <hr/> <h1>用户允许登陆时间</h1> <h3 v-if="age>24">允许登录12小时</h3> <h3 v-else-if="age>12">允许登录8小时</h3> <h3 v-else>允许登录4小时</h3> </div> <script> var app=new Vue({ el:'#app', data:{ username:"小明", isVip:true, age:24 } }) </script> </body> </html>
02.v-show(条件展示元素)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-show</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <style type="text/css"> #pana{ width:100px; height:100px; background:red; } </style> </head> <body> <div id="app"> <div v-show="isShow" id="pana"> nihao </div> <button @click="showPana">切换</button> </div> <script> var app=new Vue({ el:"#app", data:{ isShow:true }, methods:{//方法 showPana:function(){ app.isShow=!app.isShow; } } }) </script> </body> </html> <!--v-show:简单地切换元素的cssdiaplay属性--> v-show与v-if的区别: v-if:不显示时，第一次就直接不渲染，如果时内容已经显示将其改为不显示，将内容直接从Dom去除 v-show:不显时，就会改为display:none,但是会渲染在Dom上,反复需要切换的内容，使用v-show