首先使用idea新建一个静态项目
初始化项目
打开终端执行 npm init -y
然后安装vue npm install vue --save
vue也可以使用cdn引入即可
新建一个html文件
引入本地的vue.js
demo案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="name"><br>
<input type="button" v-on:click="age++" value="点击我每次加1"><br>
<input type="button" v-on:click="add" value="点击我每次加3"><br>
<input type="button" @click="reduce" value="点击我每次减1"><br>
<input v-on:keyup.enter="reduce" placeholder="点击enter"><br>
<input @keyup.enter="reduce" placeholder="点击enter"><br>
<input @keyup.alt.67="reduce" placeholder="alt+"><br>
<div @click.ctrl="reduce">ctrl+点击</div>
<input type="checkbox" v-model="language" value="java">java<br>
<input type="checkbox" v-model="language" value="python">python<br>
<input type="checkbox" v-model="language" value="php">php<br>
<input type="checkbox" v-model="language" value="c++">c++<br>
<h2>
自我介绍：<span v-html="desc"></span><br><!--避免出现插值闪烁-->
{{name}}真的好帅，尽管他已经{{age}}岁了
</h2>
<h2>
你选择了{{language.join(",")}}语言
</h2>
<ul >
<li v-for="(user,index) in users">
{{index+1}}-{{user.username}}-{{user.gender}}
</li>
</ul>
<input type="button" @click="show=!show" value="点我显示">
<h1 v-if="show">我显示出来了</h1>
<h1 v-show="show">hello</h1>
<ul>
<li v-for="user in users" v-if="user.gender=='女'">
{{user.username}}-{{user.gender}}
</li>
</ul>
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data:{
name: "刘德华",
age: 20,
language:[],
desc:"我叫刘德华",
users:[{username:"刘备",gender:"男"},{username:"关羽",gender:"男"},
{username:"张飞",gender:"男"},{username:"曹操",gender:"男"},{username:"赵云",gender:"男"},
{username:"貂蝉",gender:"女"},{username:"嫦娥",gender:"女"},{username:"王昭君",gender:"女"}
],
show:false
},
methods:{
add: function () {
this.age+=3;
},
reduce:function () {
this.age--;
},
}
});
</script>
</html>
总结
vue是一种MVVM框架,实现了模型和视图的双向绑定。模型简单来说就是数据，视图就是你所看到的网页。