本文介绍了Vue的基本语法，包括JS类库引入、模板绑定、MVVM思想应用、数据绑定、生命周期、表单双向数据绑定以及前后端调用实战。重点讲解了变量声明、事件处理和常见组件用法。
VUE 入门案例
基本语法
- 导入js类库
- 指定vue渲染区域 标签体
- 实例化vue对象
- 数据取值
var/let/const说明
关于js中变量定义说明：
- var 没有作用域的概念，容易出现安全性问题 成员变量
- let 作用于var类似，有作用域的概念，局部变量
- const定义常量
1.{{msg}} 当页面没有渲染成功时.以原标签展现.
2.v-text 当页面没有渲染完成,则不予展现.
3.v-html 将html代码片段 渲染展现MVVM思想
Model-view-viewModel
设计思想就是关注Model的变化，通过viewModel自动去更新DOM的状态，数据驱动
事件绑定
//记得导入vue.js
<div id="app">
{{num}}
<button v-on:click="num++">++</button>
<button @click="num++">++</button>
<button v-on:click="add()">++</button>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
num:100
},
methods:{
add:function(){
this.num++
}
}
})
</script>
分支结构
1.v-if 如果判断为true 则展现元素
2.v-else-if 如果不满足v-if,检查是否满足v-else-if
3.v-else 上述都不满足 才展现.循环结构
<p v-for="value,index in userList">靠近 in userList 所以index为下标 value具体对象
<p v-for="value,index in userList">
<span v-text="index"></span>
<span v-text="value"></span>
</p>new Vue({
el:"#app",
data:{
hobby:["aa","vv","cc","dd"],
userList:[{id:100,name:"aa",age:60},{id:101,name:"aa",age:60},{id:102 ,name:"aa",age:60}]
}
})
MVC设计思想
表单双向数据绑定
VUE的点击事件中有一个属性，可以取消标签的默认行为 必须挂载渲染
@click.prevent
常用场景：
form标签 阻止action提交
a标签 阻止href属性跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单双向数据绑定</title>
</head>
<body>
<div id="app">
<!-- 问题: 表单中的哪些标签可以使用双向数据绑定
双向数据绑定说明: 用户可以录入的标签.
答案:
1.文本框 2.单选框 3.多选框 4.下拉框 5.文本域
-->
<form action="http://baidu.com">
<div>
用户名: <input type="text" v-model="username"/>
</div>
<div>
性别: <input type="radio" value="男" name="sex" v-model="sex"/>男
<input type="radio" value="女" name="sex" v-model="sex"/>女
</div>
<div>
爱好:
<input type="checkbox" name="hobby" value="敲代码" v-model="hobby"/>敲代码
<input type="checkbox" name="hobby" value="打游戏" v-model="hobby"/>打游戏
<input type="checkbox" name="hobby" value="打豆豆" v-model="hobby"/>打豆豆
</div>
<div>
<!--
VUE的点击事件中有一个属性,可以取消标签的默认行为
@click.prevent
常用场景:
1. form标签 阻止 action 提交
2. a标签 阻止 href 属性跳转
-->
<input type="submit" value="提交" @click.prevent="formBtn"/>
</div>
</form>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
username: 'aaaa',
sex: '女',
hobby: ['敲代码']
},
methods: {
formBtn(){
alert("点击按钮 ajax提交数据")
}
}
})
</script>
</body>
</html>
常用双向数据绑定属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单双向数据绑定</title>
</head>
<body>
<div id="app">
<!--1.v-model.number 将输入的内容转化为数值类型 -->
年龄: <input type="number" v-model.number="ageTest"/>
<button @click="addNum">加法</button>
<br>
<!--2.去除多余的空格 -->
用户名: <input type="text" v-model.trim="username" />
用户输入的长度 {{username.length}}
<br>
<!-- 3.懒加载方式 用户离焦触发 -->
信息: <input type="text" v-model.lazy="msg" /> {{msg}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
ageTest: '',
username: '',
msg: ''
},
methods: {
addNum(){
this.ageTest = this.ageTest + 1
}
}
})
</script>
</body>
</html>
VUE生命周期
<!-- 知识梳理:
1.生命周期函数的方法名称 必须固定.
2.生命周期函数是VUE对象特有的函数.应该放到根目录下.
3.当页面渲染成功之后, 一共执行了4个生命周期方法.
第一类: VUE对象的创建.
beforeCreate:对象创建前调用
created: VUE对象已经创建完成之后调用
第二类: VUE对象的挂载(渲染)
beforeMount: el : "#app",VUE对象在找到@APP标签之前先执行该函数.
mounted: 当挂载完成(渲染完成),用户可以看到页面数据之后调用该函数
4. 用户修改阶段:
第三类:
beforeUpdate: 当用户修改数据 点击"回车" 之后调用该函数
过渡: 数据已经被修改
updated: 数据已经被修改之后调用该函数
5. 销毁阶段:
销毁函数,VUE对象默认不会调用. 可以通过函数由用户调用
beforeDestroy: 在销毁方法执行前
destroyed: 标志着VUE对象已经销毁.
VUE 前后端调用
Ajax介绍
局部刷新，异步访问
步骤:
1. 用户发起Ajax请求, Ajax内部机制,将请求交给Ajax引擎处理.
2. Ajax引擎接收到用户的请求之后,重写发起一个新的请求.访问后端服务器.
3. 当服务器端接收到了 Ajax请求之后,完成业务处理.之后将数据响应给Ajax引擎.
4. Ajax引擎通过事先约定好的 回调函数, 将服务器数据 交还给用户.
5.用户在请求的过程中,可以完成自己的任务.
注意事项: 多个Ajax的请求 不关注顺序.
导入axios.js
1.请求类型
1. get 执行查询业务
2. post 执行form表单提交(登录/新增)
3. put 执行修改操作
4. delete 执行删除业务时.
2. axios语法
axios.get("url地址信息","参数信息")
.then(function(args){
})
3. 关于args参数说明
axios为了统筹请求状态.将所有的数据封装为
promise对象
Controller 层开启跨域机制
@CrossOrigin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>前后端调用</title>
<script src="../js/axios.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 查询id=1的用户
url：http://localhost:8080/axios/getUserById?id=1-->
<script type="text/javascript">
axios.get("http://localhost:8080/axios/getUserById?id=1").then(
promise => {
console.log(promise.data)
}
)
//查女 大于19
let sex2="女"
let age2=18
axios.get(`http://localhost:8080/axios/user/${sex2}/${age2}`).then(promise => {
console.log(promise.data)
})
// 对象传参
let user ={
name:"王昭君",
sex:"女",
age:19
}
axios.get("http://localhost:8080/axios/getUser",{params:user}).then(
promise => {
console.log(promise.data)
}
)
</script>
</body>
</html>
扫一扫
2296
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
