对于一个java开发（后端开发）而言，虽然我们比较少的涉及到前端的知识，即使没让你写,你得会看，即使没让你看，你也得知道前端是怎么去对接你的接口的,在工作的时候我们也需要经常跟前端商讨接口参数与返回数据格式问题，我是按作为一个java开发，第一次接触学习vue.js来说明。我个人的学习习惯就是，先看一遍教程，再跟着做一遍demo，再去看看api，概念什么加深或者扩展。
在学习vue.js前，我们必须对html，css，js有一定的使用经验，要不然就是文盲看文章，这不弄死你。
一、搭建项目
首先我们需要搭建一个基本的项目体系，我使用idea新建一个项目,采用maven+webapp骨架
然后补充java文件和资源，放入vue.js,新建多个html文件
这个时候，我们还需要设置一个tomcat服务器来启动我们的项目
到这里我们的项目搭建就完成了，其实跟搭建一个后台差不多,运行一下：
二、vue的语法
接下来，我们可以开始试下vue.js到底是个什么东西，实现的都有些什么，我们可以通过多个demo进行测试的形式来说明
demo1：
数据绑定最常见的形式就是使用
“Mustache”
语法
(
双大括号
)
的文本插值，
Mustache
标签将会被替代为对应数据对
象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。Vue.js
都提供了完全的
JavaScript
表达式支持。包括以下的插值表达式。同时，每个绑定只能包含单个表达式，也就是说像流程控制是不能生效的，例如：
｛｛ if(ok) {return message｝ ｝}
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>快速入门</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> {{message}} {{true? "OK" : "false"}} //插值表达式 {{number+1}} //插值表达式 </div> </body> <script> //view model new Vue({ el:'#app', //表示当前vue对象接管了div区域 data:{ message:"hello vue", number:100 //注意不要写分号结尾 } }) </script> </html>
结果：
demo2:
v-on:click=onclick 点击事件
v-on:可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-on:click</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> {{message}} <button v-on:click="fun1('Vue-on')">vue的onclick</button> </div> </body> <script> //view model new Vue({ el:"#app", data:{ message:"hello vue" }, methods:{ fun1:function (msg) { alert("我被点击了"); this.message= msg; } } }) </script> </html>
结果：
demo3:
v-on:keydown=onkeydown :键盘按下触发事件
模拟一个输入框只能输入数字，对比传统js和vue区别，使用event对象获取Unicode码进行判断。vue的event对象需要手动传入函数中作为参数使用（可以参照jquery）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-on:keydown</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> Vue:<input type="text" v-on:keydown="fun1($event)"> 传统:<input type="text" onkeydown="fun2()"> </div> </body> <script> //view model new Vue({ el:"#app", methods:{ /** $event它是vue中的事件对象，和我们传统的js的event对象是一样的**/ fun1:function (event) { var keyCode=event.keyCode; //只让数字和删除键起作用 if (keyCode!=8&&(keyCode<48 ||keyCode>57)){ //不让键盘起作用 event.preventDefault(); alert("请输入数字！") } } } }) //js按下键盘事件 function fun2() { //event对象和我们的window对象以及document对象是一样的，可以不用定义直接使用 var keyCode=event.keyCode; //只让数字和删除键起作用 if (keyCode!=8&&(keyCode<48 ||keyCode>57)){ //不让键盘起作用 event.preventDefault(); alert("请输入数字！") } } </script> </html>
结果：
demo4:
@mouseover是鼠标悬停触发事件
模拟鼠标悬停弹框提示：使用event.stopPropagation()防止事件传播（防止悬停在textarea上出现2次弹框包括div弹框）
@=v-on,@是其v-on:的简写，
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-on:mouseover</title> <style> #div { background-color: red; } </style> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <div @mouseover="fun1" id="div"> <textarea @mouseover="fun2($event)">这是一个文件域</textarea> </div> </div> </body> <script> //view model /** * @事件名称就是v-on:的简写 * @mouseover相当于v-on:mouseover */ new Vue({ el:"#app", methods:{ fun1:function () { alert("鼠标悬停在div上"); }, fun2:function (event) { alert("鼠标悬停在textarea上了"); //禁止事件传播 event.stopPropagation(); } } }) </script> </html>
结果：
demo5:
事件修饰符：Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。 Vue.js通过由点(.)表示的指令后缀来调用修饰符。 .stop(event.stopPropagation()) .prevent(event.preventDefault() ) 从这里是不是开始发现vue对比js的方便之处了呢
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:事件修饰符</title>
<style>
#div {
background-color: red;
}
</style>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<form @submit.prevent action="https://blog.csdn.net/weixin_42736075" method="post" >
<input type="submit" value="提交">
</form>
<div @mouseover="fun1" id="div">
<!-- 阻止事件传播 -->
<textarea @mouseover.stop="fun2($event)">这是一个文件域</textarea>
</div>
<!--传统实现阻止提交 -->
<!--<form action="https://blog.csdn.net/weixin_42736075" method="post" οnsubmit="return checkForm()">-->
<!--<input type="submit" value="提交">-->
<!--</form>-->
</div>
</body>
<script>
//view model
//即使使用.事件也需要创建Vue管理制定区域
new Vue({
el:"#app",
methods:{
fun1:function () {
alert("鼠标悬停在div上");
},
fun2:function (event) {
alert("鼠标悬停在textarea上了");
}
}
})
传统js
function checkForm() {
alert("!");
return false;
}
</script>
</html>
demo6:
按键修饰符：
Vue
允许为
v-on
在监听键盘事件时添加按键修饰符
全部的按键别名：
.enter
.tab
.delete
(
捕获
"
删除
"
和
"
退格
"
键
)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
其他写法：可以组合多个按键使用
<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
同时按住ctrl并且点击
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:按键修饰符</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-on:keyup.enter="fun1">
</div>
</body>
<script>
//view model
new Vue({
el:'#app', //表示当前vue对象接管了div区域
methods:{
fun1:function()
{
alert("你按了回车");
}
}
});
</script>
</html>
demo7:
v-text和v-html的使用，对比传统js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-text与v-html</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<div v-text="message"></div>
<div v-html="message"></div>
<!--<div id="div1"></div>-->
<!--<div id="div2"></div>-->
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
message:"<h1>hello</h1>"
}
})
//传统js的innerText和innerHTML
window.οnlοad=function () {
document.getElementById("div1").innerText="<h1>Hello</h1>";
document.getElementById("div2").innerHTML="<h1>Hello</h1>";
}
</script>
</html>
结果
demo8:
v-bind的使用
插值表达式不能用于html标签的属性值,不能使用{{c1}},而是使用v-bind:进行绑定赋值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-bind</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<font size="5" v-bind:color="c1">Vue</font>
<font size="5" :color="c2">Js</font>
</div>
</body>
<script>
//view model
//插值表达式不能用于html标签的属性值,不能使用{{c1}}
// 要想给html标签的属性设置变量的值，需要使用v-bind
//v-bind: 可以简写成 ：
new Vue({
el:"#app",
data:{
c1:"red",
c2:"green"
}
})
</script>
</html>
结果：
demo9:
v-for的使用
v-for可以实现我们的数组遍历，对象打印，对象数组的遍历，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-text与v-html在v-bind上的使用</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<!-- 遍历数组 -->
<ul>
<li v-for="(item,index) in arr">{{item}}={{index}}</li>
</ul>
<!-- 获取json格式对象key and value -->
<ul>
<li v-for="(key,value) in product ">{{value}}={{key}}</li>
</ul>
<!-- 对象数组的遍历 -->
<table border="1">
<tr>
<td>序号</td>
<td>编号</td>
<td>名称</td>
<td>价格</td>
</tr>
<tr v-for="(fruit,index) in fruits">
<td>{{index}}</td>
<td>{{fruit.id}}</td>
<td>{{fruit.name}}</td>
<td>{{fruit.price}}</td>
</tr>
</table>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5],
product:{
id:"1",
name:"vue",
value:"组件"
},
fruits:[
{
id:"1",
name:"苹果",
price:"10.0"
},
{
id:"2",
name:"香蕉",
price:"8.0"
},
{
id:"3",
name:"西瓜",
price:"13.0"
},
{
id:"4",
name:"草莓",
price:"20.0"
}
]
}
})
</script>
</html>
结果：
demo10:
v-model代替input中的value使用，直接使用value是失效的，需要用v-model绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-model</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
姓名:<input type="text" id="username" v-model="user.username"><br>
密码:<input type="password" id="password" v-model="user.password"><br>
<input type="button" @click="fun" value="获取"> </div>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
user:{
username:"root",
password:"123456"
}
},
method:{
fun:function () {
alert(this.user.username+"===="+thos.user.password);
}
}
})
</script>
</html>
结果：
demo11:
v-if和v-show的使用
v-if
是根据表达式的值来决定是否渲染元素
v-show
是根据表达式的值来切换元素的
display css
属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-if和v-show</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<span v-if="flag">Vue</span>
<span v-show="flag">Js</span>
<button @click="toggle">切换</button> </div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
flag:false
},
methods:{
toggle:function () {
this.flag=!this.flag;
}
}
})
</script>
</html>
结果：
点击切换
三、总结
从多个demo的实践后，我们可以熟悉vue的基本用法以及其语法，同时我们也发现，我们每次都需要去new Vue来绑定一块区域然后再进行逻辑处理，赋值，构造函数等，同时我们也发现，使用Vue的一个特点是将html和逻辑处理完全分开，也就是说，所有的处理都在new Vue中的。
1008
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
