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>