简单使用
导入vue.js依赖文件
<script src="/js/vue.js"></script>
VueJS对象的结构
语法格式
<body>
<!-- 正确写法{{数据键名}} -->
<!-- 会在Vue()中的data里取 -->
{{param1}} --> test1
{{param2+2}} --> 4
{{param2 == 3 ? 'yes' : 'no'}} --> yes
...
<!-- 错误写法,不存在if语句写法 -->
{{
if(num==10){
return '是'
}else{
return '否'
}
}}
</body>
简单使用
新建html文件 *.html
<html><head>
<title>VueJs入门</title>
<script src="js/vue.js"></script>
</head>
<body>
<!-- div就是 View -->
<div id="app">
{{message}}
</div>
<script>
// Vue对象 ViewModel
new Vue({
el: '#app', // el: 绑定某个id的视图,
data:{ // data对象就是 Model
message: 'VueJS入门程序'
}
})
</script>
</body></html>
调用方法
new Vue({
el: '#app',
data:{
message: 'VueJS入门程序'
},
methods:{
fun1:function(){
},
fun2:function(){
//加上this直接调用即可
this.fun1();
var _this = this;
axios.post(url,this.message).then(function (resp) {
//异步请求里通过外层接收vue对象实现
_this.fun1();
});
},
}
});
VueJS指令
括号里的为指令的简写
指令 | 作用 |
---|---|
v-on:click(@click) | 点击时执行指定函数 |
v-on:keydown(@keydown) | 键盘有按键敲下时执行指定函数 |
v-on:mouseover(@mouseover) | 鼠标移动到时执行指定函数 |
v-on:xxx.事件修饰符(@xxx.事件修饰符) | 指令后缀来调用事件修饰符 |
v-on:xxx.按键修饰符(@xxx.按键修饰符) | 指令后缀来调用按键修饰符 |
v-bind( : ) | 单向绑定数据 |
v-model | 双向绑定数据 |
v-for | 循环集合 |
v-if / v-show | 判断是否显示 |
@click
<button v-on:click="fun1('小苍')">点我</button>
<button @click="fun1('小泽')">点我</button>
new Vue({
el: '#app',
methods:{
fun1:function(name){
alert("点击了"+name)
}
}
});
@keydown
<input type="text" v-on:keydown="fun2($event)">
<input type="text" @keydown="fun2($event)">
new Vue({
el: '#app',
methods:{
fun2:function(e){
//获取输入的键
var keyCode = e.keyCode
//判断不是数字
if( keyCode<48 || keyCode>57 ){
//阻止事件默认行为,不让输入框回显输入的内容
e.preventDefault()
}
}
}
});
@mouseover
<div id="app">
<div style="background-color: pink" @mouseover="fun3">
这是一个div
<textarea cols="20" rows="3" @mouseover="fun4($event)">textarea</textarea>
</div>
</div>
new Vue({
el: '#app',
methods:{
fun3:function(){
alert("经过div")
},
fun4:function(e){
alert("经过textarea")
//阻止事件冒泡,area在div里,经过textarea屏蔽div的经过的方法
e.stopPropagation()
}
}
});
@xxx.事件修饰符
后缀修饰符 等价于调用的方法($event) 作用 @xxx.stop e.stopPropagation() 阻止事件冒泡 @xxx.prevent e.preevetDefault() 阻止事件默认行为
<!-- 没有使用事件修饰符 会跳转到百度和执行fun1-->
<div style="background-color: red" @click="fun1">
<a href="http://www.baidu.com">点我</a>
</div>
<!-- 使用事件修饰符 .stop 不会跳转到百度 -->
<div style="background-color: red" @click="fun1">
<a href="http://www.baidu.com" @click.stop >点我</a>
</div>
@xxx.按键修饰符
后缀修饰符 代表的按键 @xxx.enter Enter @xxx.tab Tab @xxx.delete Delete和Backspace @xxx.esc Esc @xxx.space 空格键 @xxx.up/.down/.right/.left 方向键 @xxx.ctrl Ctrl @xxx.alt Alt @xxx.shift Shitf
<input type="button" value="登录" @keydown.enter="login">
<!--多个键的时候在后面加.分割即可-->
<input type="button" value="登录" @keydown.enter.spcae="login">
new Vue({
el: '#app',
methods:{
login:function(){
alert("登录")
},
}
});
v-text与v-html
v-text输出:<span v-text="message"></span> ---> <h1>HelloWorld</h1>
v-html输出:<span v-html="message"></span> ---> HelloWorld
new Vue({
el: '#app',
data:{
message: '<h1>HelloWorld</h1>'
},
})
:xxx (单项绑定数据)
属性采用字符串拼接方式
<span v-bind:style="'color: '+color">小苍</span>
<span :style="'color: '+color">小苍</span>
new Vue({
el: '#app',
data:{
color: 'red'
}
})
v-model (双向绑定数据)
<input type="text" v-model="param1">
{{param1}}
<input type="text" v-model="param1">
new Vue({
el: '#app',
data:{
//必须声明键名,v-model才能用
param1: '1'
}
});
v-for
<!-- 无索引值 -->
<li v-for="city in citys">{{city}}</li>
<!-- 有索引值 -->
<li v-for="(city,index) in citys">{{city}}======={{index}}</li>
new Vue({
el: '#app',
data:{
citys:['北京','广州','深圳']
}
})
v-if / v-show
v-if : 为false时不会加载 , 可以配合v-else(不需要加条件)使用
v-show : 为false时会加载,属性加display:none被隐藏
<img src="imgs/mm.jpg" v-show="flag">
<img src="imgs/mm.jpg" v-if="flag">
<!-- 登录前和登录后效果 -->
<div v-if="flag">
你好,张三 <a href="http://www.baidu.com">【退出登录】</a>
</div>
<div v-else>
你好,请登录 <a href="http://www.baidu.com">【免费注册】</a>
</div>
new Vue({
el: '#app',
data:{
flag:'false'
}
})
VueJs的生命周期
生命周期状态 | 对应方法 | 作用 |
---|---|---|
beforeCreate | created | 一开始会执行 |
beforeMount | mounted | 加载完成时执行 |
beforeUpdate | updated | 模型有数据时更新 |
beforeDestroy | destroyed | 模型和实体处于绑定状态 模型和实体处于解绑状态 |
axios异步请求
带参数的请求get和post的区别
get : 需要加{params:{xxx:xxx}}
post不需要,直接使用{xxx:xxx}
get请求
axios.get('/user?ID=12345')
.then(function (response) {
//正常时执行(try)
})
.catch(function (error) {
//错误时执行(catch)
})
.then(function () {
//始终执行(finally)
});
axios.get('/user', {
params: {
ID: 12345
}
})
.then...
post请求
axios.post('/user', {
id: 234551,
name: 'osc'
})
.then(function (response) {
//正常时执行(try)
})
.catch(function (error) {
//错误时执行(catch)
})
.then(function () {
//始终执行(finally)
});
使用案例
new Vue({
el: '#app',
data:{
userList:[]
}
methods:{
//加载所有用户数据
findAll:function () {
//请求后台获取数据
var url = 'http://localhost:8080/vuejsDemo/user/findAll.do';
//先把外面的this存起来,axios里用this不是Vue对象
var _this = this;
axios.get(url).then(function (resp) {
//把返回的数据赋值给模型
_this.userList = resp.data;
})
}
}
});