唉，之前都没有好好学习前端，最基础的都没学会，可是公司是全栈开发，只好自己暗暗学习了。第一天入门，看起来确实费力，就跟着案例一个个敲，恨啊，恨啊，当初没有在学校好好学习。
官方网址
学习网址-菜鸟教程
在使用之前， 要先引入vue.min.js。先来看一下它的使用
var vm = new Vue({
el: '#vue_det',
data: {
site: "菜鸟教程",
url: "www.runoob.com", alexa: "10000"
},
methods: {
details: function() {
return this.site + " - 学的不仅是技术，更是梦想！";
}
}
})
<div id="app">
<p>{{ value }}</p>
<p>{{ method() }}</p>
<button v-on:click="onclick">按钮</button>
<p>点击按钮后：{{ value2 }}</p>
</div>
<script>
new Vue({
el : ' #app ' ,
data : {
value : ' hello vue '
value2 : ''
},
methods : {
method : function(){
return this.value+'，这是我第一次运行的'
}，
onclick : function(){
this.value2 = this.value ；
}
}
})
</script>
下面，来一个vue的表单使用
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="js/vue.min.js"></script>
</head>
<style>
.model {
margin: 10px;
background-color: white;
}
.model-title {
background-color: white;
}
.class1 {
background: red;
color: #fff;
}
</style>
<body>
<h3 style="text-align: center;">vue 表单</h3>
<h6>v-model 会根据控件类型自动选取正确的方法来更新元素</h6>
<div id="form" style="border: thin; background-color: pink; margin: 10px; padding: 10px;">
<div class="model">
<label class="model-title">用户姓名：</label>
<input id="username" placeholder="填写用户姓名..." ref="username" v-model="username">
<p>{{username}}</p>
</div>
<div class="model">
<div id="gender">
<label class="model-title">用户性別：</label>
<label for="male">男<input type="radio"id="male" value="Male" v-model="pickedGender"></label>
<label for="fmale">女<input type="radio" id="fmale" value="Fmale" v-model="pickedGender"></label>
<p>{{pickedGender}}</p>
</div>
</div>
<div class="model">
<div id="graduate">
<label class="model-title">毕业学校：</label> <select v-model="selected"
name="school">
<option value="-"></option>
<option value="smu">三明</option>
<option value="smu1">三明1</option>
<option value="smu2">三明2</option>
</select>
<p>{{selected}}</p>
</div>
</div>
<div class="model">
<div id="interest">
<label class="model-title">兴趣爱好：</label>
<input type="checkbox" id="balls" value="Balls" v-model="checkedInterest">
<label for="balls">球类运动</label>
<input type="checkbox" id="music" value="Music" v-model="checkedInterest">
<label for="music">音乐</label>
<input type="checkbox" id="book" value="Book" v-model="checkedInterest">
<label for="book">书籍</label>
<input type="checkbox" id="play" value="Play" v-model="checkedInterest">
<label for="play">玩耍</label>
<p>{{checkedInterest}}</p>
</div>
</div>
<div class="model">
<label class="model-title">用户信息：</label>
<textarea id="userinfo" placeholder="多行文本输入……" v-model="userinfo"></textarea>
<p>{{userinfo}}</p>
</div>
<button v-on:click="submite">确定</button>
<div style="border: thin; background-color: light; margin: 10px; padding: 10px;">
<p>{{result}}</p>
</div>
</div>
<script>
new Vue({
el : '#form',
data : {
//赋初值
username : '',
pickedGender : 'Male',
selected : '-',
checkedInterest : [],
userinfo : '',
result : ''
},
methods : {
submite : function() {
/*jquery取值,通过id定位
var username=$("#username").val();
console.log(username); */
/* vue取值，通过refs定位
var username = this.$refs.username.value;
console.log(username);
*/
// 从vue直接取值
console.log("username:" + this.username);
console.log("Gender:" + this.pickedGender);
console.log("graduate:" + this.selected);
console.log("interest:" + this.checkedInterest);
console.log("userinfo:" + this.userinfo);
this.result = "姓名:" + this.username + "，性别:"
+ this.pickedGender + "，毕业学校:" + this.selected
+ "，兴趣:" + this.checkedInterest + "，其它信息:"
+ this.userinfo;
}
}
})
</script>
</body>
</html>
界面显示如下