创建vuejs-demo.html
<html>
<head>
<meta charset="utf-8" />
<title>快速入门title>
head>
<body>
<div id="app">
div>
<script>
<!-- 第二步:初始化vuejs对象 -->
script>
body>
html>
引入vue.js文件
<script src="js/vuejs-2.5.16.js"></script>
定义Vuejs对象和数据
var app = new Vue({
el:'#app', //表示当前vue对象接管了div区域
data:{
message:'hello world' //注意不要写分号结尾
}
});
定义视图渲染数据
<div id="app">
{{message}}
div>
注:{{}} 插值表达式是不能直接作用在属性上的。需要使用v-bind进行数据绑定
指令名称 | 描述 | 用法 |
---|---|---|
v-on | 事件绑定 | v-on:事件 = “事件名” 缩写:@事件 = “事件名” 点击事件:click,dblclick,change,blur 键盘事件:keydown/keyupkeypress 鼠标事件:mousedown,mouseover,mousemove,mouseout |
v-text/v-html | 文本取值 | 或者 两者的区别是:v-text不支持标签解析,v-html支持标签解析。 |
v-bind | 属性取值 | v-bind:属性 = “属性值” 缩写::属性 = “属性值” 解决在标签的属性上如何获取动态的数据值的问题。 比如: 或者 |
v-model | 获取form控件值 | 用于form表单控制元素值的相关获取和同步。 |
v-for | 循环迭代 | 一般用于循环数组,对象和对象数组。 |
v-show/v-if/v-else | 隐藏/显示 | v-show:是控制元素display:none/block的切换。v-if:是逻辑判断,控制元素的存在与不存在。 |
v-pre | 原样输出不解析 | 如果你不想解析插值表达式,原样输入可以使用v-pre |
v-once | 渲染一次 | 如果你想渲染一次,后面改变数据不会影响视图的变化,可以使用v-once。 |
v-cloak | 解决网络延迟 | 往往在真实的场景中,插值表达式渲染会很慢, 而造成插件表达式的外漏,可以借助v-cloak和[v-cloak]{display:none;}来解决这个问题 |
注:v-model 取值是双向的,即v-model的值发生改变,data中的数据也会发生改变,data中的数据发生改变,则v-model的值也会发生改变,而v-bind 属性取值是单向的,即v-bind的值发生改变,data中的数据不会发生改变
如果不想渲染任何动态的部分或者插值部分,可以使用v-pre指令:
<html>
<head>
<meta charset="utf-8" />
<title>v-if与v-showtitle>
<script src="js/vuejs-2.5.16.js">script>
head>
<body>
<div id="app">
<input type="text" v-model="flag">
<span v-pre>
<span v-if="flag < 1">我是大帅哥1span>
<span v-else-if="flag >= 1 && flag < 4">我是大帅哥2span>
<span v-else-if="flag >= 4 && flag <10">我是大帅哥3span>
<span v-else>我是普通人span>
{{flag}}
span>
div>
<script>
new Vue({
el : '#app', //表示当前vue对象接管了div区域
data : {
flag : 1
}
});
script>
body>
html>
只渲染元素和组件一次。随后的重新渲染或者数据改变都不会在渲染和发生改变。
<html>
<head>
<meta charset="utf-8" />
<title>v-if与v-showtitle>
<script src="js/vuejs-2.5.16.js">script>
head>
<body>
<div id="app">
<input type="text" v-model="flag">
<span v-once>
<span v-if="flag < 1">我是大帅哥1span>
<span v-else-if="flag >= 1 && flag < 4">我是大帅哥2span>
<span v-else-if="flag >= 4 && flag <10">我是大帅哥3span>
<span v-else>我是普通人span>
{{flag}}
span>
div>
<script>
var app = new Vue({
el : '#app', //表示当前vue对象接管了div区域
data : {
flag : 1
}
});
script>
body>
html>
实际开发中,对元素操作和控制样式或者class也是非常频繁的操作。vue对齐样式和class操作是通过v-bind来完成的。
class操作如下
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07-vue-class-style.htmltitle>
<style>
.ctitle{color:red;}
.active{background:#eee;padding:20px;margin-top:10px;}
.text-danger{font-weight: bold}
style>
head>
<body>
<div id="app">
<div class="ctitle" v-bind:class="'active'">{{title}}div>
<div class="ctitle" v-bind:class="{'active':isActive}">{{title}}div>
<div class="ctitle" v-bind:class="{'active':isActive,'text-danger': hasError}">{{title}}div>
<div class="ctitle" v-bind:class="[activeClass,errorClass]">{{title}}div>
<div class="ctitle" v-bind:class="[isActive?activeClass:'',errorClass]">{{title}}div>
div>
<script src="js/vuejs-2.5.16.js">script>
<script>
// 第三步:定义vuejs对象,开始进行视图和数据的渲染
var app = new Vue({
el:"#app",
data:{
title:"Hello world!",
activeClass: 'active',
errorClass: 'text-danger',
hasError:true,
isActive:true //我来控制样式是否加或者不加
}
}) ;
script>
body>
html>
style操作如下
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>07-vue-class-style.htmltitle>
<style>
.ctitle{background:#eee;
padding: 20px;}
style>
head>
<body>
<div id="app">
<div class="ctitle" v-bind:style="{'color':activeColor,'fontSize':fontSize+'px'}">{{title}}div>
<div v-bind:style="[baseStyles, overridingStyles]">{{title}}div>
div>
<script src="js/vuejs-2.5.16.js">script>
<script>
// 第三步:定义vuejs对象,开始进行视图和数据的渲染
var app = new Vue({
el:"#app",
data:{
baseStyles:{
fontSize:"30px",
color:"green"
},
overridingStyles:{
background:"#eee",
marginTop:"10px",
padding:"20px"
},
title:"Hello world!",
activeColor: 'red',
fontSize: 30
}
}) ;
script>
body>
html>
vue在生命周期中有这些状态:
beforeCreate,
created,
beforeMount,
mounted,
beforeUpdate,
updated,
beforeDestroy,
destroyed。
Vue在实例化的过程中,会调用这些生命周期的钩子,给我们提供了执行自定义逻辑的机会。那么,在这些vue钩子中,vue实例到底执行了那些操作。
例子
<html>
<head>
<meta charset="utf-8" />
<title>生命周期title>
head>
<body>
<div id="app">{{message}}div>
<script src="js/vuejs-2.5.16.js">script>
<script>
var vm = new Vue({
el : "#app",
data : {
message : 'hello world'
},
beforeCreate : function() {
console.log(this);
showData('创建vue实例前-beforeCreate', this);
},
created : function() {
showData('创建vue实例后-created', this);
},
beforeMount : function() {
showData('挂载到dom前-beforeMount', this);
},
mounted : function() {
showData('挂载到dom后-mounted', this);
},
beforeUpdate : function() {
showData('数据变化更新前-beforeUpdate', this);
},
updated : function() {
showData('数据变化更新后-updated', this);
},
beforeDestroy : function() {
vm.test = "3333";
showData('vue实例销毁前-beforeDestroy', this);
},
destroyed : function() {
showData('vue实例销毁后-destroyed', this);
}
});
function realDom() {
console.log('真实dom结构:' + document.getElementById('app').innerHTML);
}
function showData(process, obj) {
console.log(process);
console.log('data 数据:' + obj.message)
console.log('挂载的对象:')
console.log(obj.$el)
realDom();
console.log('------------------')
console.log('------------------')
}
vm.message = "good...";
vm.$destroy();
script>
body>
html>
<script src="/js/pagination.js">script>
// 创建vue对象
var vue = new Vue({
el: "#app",
data: {
ids: [],
entity: {},
searchEntity: {}
}
// 分页查询全部品牌
search: function (page) {
axios.get("/brand/findByPage?page=" + page, {params: this.searchEntity}).then(function (res) {
console.log(res.data)
}).catch(function (err) {
console.log(err.data)
});
}
axios.post("/brand/" + url, this.entity).then(function (res) {
if (res.data) {
vue.search(1);
} else {
alert("操作失败!");
}
});
axios.get("/brand/del?ids=" + this.ids).then(function (res) {
if (res.data) {
var page = vue.checked ? vue.page - 1 : vue.page;
if (page < 1) {
page = 1;
}
// 删除成功
vue.search(page);
}
}).catch(function (err) {
alert("操作失败!")
})
注意:
如果前端的content-type请求头使用application/json或者是application/xml,不加@RequestBody就无法映射到对应的bean中,默认的application/x-www-form-urlcoded就没有问题.
axios.post请求默认使用的Content-Type请求头是: application/json;charset=UTF-8(是一个json字符串)类型;
axios.get使用的是默认的Content-Type请求头是:application/x-www-form-urlcoded(也就是对象);
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<div id="app">
<h1>
{{date}}
h1>
{{date | formatDate('yyyy-MM-dd')}}
{{date | formatDate('yyyy/MM/dd')}}
{{date | formatDate('MM-yyyy-dd')}}
<span :title="date | formatDate('MM-yyyy-dd')">span>
div>
<script type="text/javascript" src="js/vuejs-2.5.16.js">script>
<script>
Vue.filter("formatDate",function(value,fmt){
return formatDate(value,fmt);
});
Vue.filter("formatDate",function(value,fmt){
return formatDate(value,fmt);
});
Vue.filter("formatDate",function(value,fmt){
return formatDate(value,fmt);
});
var vue = new Vue({
el:"#app",
data:{date:"2100-12-12 12:12:12"},
mounted:function(){
}
})
function formatDate(date,fmt){
var date = new Date(date.replace(/-/g,"/"));
var o = {
"M+": date.getMonth() + 1, //月份
"d+": date.getDate(), //日
"H+": date.getHours(), //小时
"m+": date.getMinutes(), //分
"s+": date.getSeconds(), //秒
"q+": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
console.log(formatDate("2100-12-12 12:12:12","yyyy-MM-dd"))
console.log(formatDate("2100-12-12 12:12:12","MM/yyyy/dd"))
console.log(formatDate("2100-12-12 12:12:12","MM/yyyy/dd HH:mm"))
script>
body>
html>