<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>vue初识(前后端分离)</title> </head> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <style type="text/css"> </style> <body> <div id="app"><!--//所有代码写在div里--> <div v-html="name"></div> {{name}} <hr /> <div v-show="show">出现</div> <!--if else 判断--> <div v-if="isok"><!--为真出现-->欢迎进入我的主页</div> <div v-else><!--为否出现-->请先登录</div> <hr /> <button v-on:click="res">-</button>{{count}}<button @click="add">+</button> <!--v开头的是指令--> <hr /> <!--循环输出--> <ul > <li v-for="(item,index) in stus"> <!--in 数组名称--> {{index}}------{{item}} </li> </ul> <hr /> <span v-bind:title="messa"> 鼠标悬停几秒后显示页面信息 </span> <hr /> <!--双向绑定--> {{message}} <br /> 请输入<input type="text" v-model="message" /> <hr /> </div> <script type="text/javascript"> //vue进入 var vue=new Vue({//new一个Vue对象 必须找id el:"#app", //固定格式 data:{ name:"<h2>hello world</h2>", isok:true, count:0, show:true, stus:["一","二","三"], messa: '页面加载于 ' + new Date().toLocaleString(), message:"",//初始值 }, //f方法，事件 methods:{ add:function(){ this.count++; }, res:function(){ this.count--; } } }); </script> </body> </html>