Vue简介：
IDEA中安装vue插件
demo.html（cdn引入vue.js）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{message}} <br>
<span v-bind:title="message">
鼠标悬浮查看效果
</span>
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
<li v-for="(item,index) in items">
{{item.msg}}--{{index}}
</li>
<button v-on:click="sayhi">按钮</button>
</div>
<!--导入vue-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>-->
<script src="https://cdn.staticfile.org/vue/2.5.21/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
message:"hello,vue",
ok: true,
items: [
{msg:'苹果'},
{msg:'香蕉'}
]
},
methods:{
sayhi:function () {
alert(this.message);
}
}
});
</script>
</body>
</html>效果：
数据绑定：{{}}和data中的数据绑定
v-bind指令，也可以绑定数据
v-bind可缩写为：
v-if和v-else指令
v-for指令
v-on指令： 绑定事件
3313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
