<!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>
浙公网安备 33010602011771号