一：动态添加data信息和methods方法/事件：
1.添加data信息：
<div id="app"> {{data1}} </div> <script type="text/javascript"> let application=new Vue({ el:"#app", data:{ data1:me, data2:you } }) </script>
给data1自动赋值me，给data2自动赋值you
2.methods方法/事件
<div id="app"> <div v-show="isShow" id="pane"> HelloVue </div> <button @click="showPane">切换显示内容</button> </div> <script type="text/javascript"> let application=new Vue({ el:"#app", data:{ isShow:true }, methods:{ showPane:function(){ application.isShow=!application.isShow; } } }) </script>
注意：这里使用方法的时候是对内部application进行isShow属性的操作与Dom无关
v-show:不显示时，就会改为display:none,但是会渲染在DOM上，反复渲染的话使用v-show，只是渲染一次的话使用v-if
3.添加多个button事件渲染：v-if使用在button不同选项上
<div id="app"> <div v-show="isShow" id="pane"> HelloVue </div> <button @click="showPane" data-id="1">上首页</button> <button @click="showPane" data-id="2">上热搜</button> <button @click="showPane" data-id="3">上新闻</button> </div> <script type="text/javascript"> let application=new Vue({ el:"#app", data:{ isShow:true }, methods:{ showPane:function(e){ //这里的e是vue本体，和this一样 console.log(e); let tabid=e.target.dataset.id; alert(tabid); } } }) </script>
4.列表渲染：v-for与v-if混合使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <div v-if="isLogin" class="login"> <h3>登录</h3> <div> 用户名： <input type="text" name="username" value=""> </div> <div> 密码： <input type="text" name="password" value="" /> </div> <button type="button">登录</button> </div> <div v-else class="register"> <h3>注册</h3> <div> 用户名： <input type="text" name="username" value=""> </div> <div> 密码： <input type="text" name="password" value="" /> </div> <button>注册</button> </div> <button @click="changePage" type="button">切换注册页</button> </div> <script> let app=new Vue({ el:"#app", data:{ isLogin:false }, methods:{ changePage:()=>{ app.isLogin=!app.isLogin; } } }) </script> </body> </html>