Vue.js的核心特性之一是它的响应式系统。当你修改Vue实例的数据时,视图会自动更新以反映这些变化。这种双向数据绑定减少了手动操作DOM的需要
引入 vue.js
创建一个Vue实例
插值表达式
vue 语法格式
<script>
//创建一个vue 实例,接管页面中 id 为app 的元素
new Vue({
el:"#app",
data:{ //data 是一个对象,用于存放数据
msg:"hello",
},
methods: {}, //methods 是一个对象,用于存放方法
computed:{}, //计算属性的值
watch:{}, //监听属性的变化
})
</script>
常用命令
v-for
用途:循环遍历数组或对象
这里 items 是一个数组,v-for 会为数组中的每个 item 渲染一个 <div>
<div v-for="item in items" >
{{ item.name }}
</div>
v-bind:属性名
简写为 :
用途:动态绑定属性到表达式的值
v-if
用途:v-if
指令用于条件性地渲染一块内容。这块内容只会在指令的表达式为真时才被渲染。
<p v-if="true">welcome</p>
v-else
用途:与 v-if 配合使用,表示当 v-if 的条件不满足时渲染的内容
<p v-if="false">welcome</p>
<p v-else>this is else </p>
v-show
用途:类似于 v-if,但是总是会渲染并保留在 DOM 中,只是简单地切换元素的 CSS display 属性来控制显示或隐藏。
<p v-show="seen">现在你看到我了。</p>
v-on:事件名
简写为 @
用途:监听 DOM 事件,并在触发时执行方法
<button v-on:click="doSomething">点击</button>
数据绑定
单项数据绑定
vue 里面的 data 的数据变了,视图层会发生变化
双向数据绑定
vue 里面的 data 的数据变了,视图层会发生变化
视图层里的内容变了,vue 里的data 数据也会发生改变
对象拷贝
/* 把 item 对象的属性和值拷贝到 adminInfo 对象中 */
this.adminInfo = Object.assign({},item);
axios
1. GET 请求方式
2. POST 请求方式
请求参数格式
login(){
axios.post(
"http://localhost:8080/Admin/Login",{
account:this.username,
password:this.password
}).then(function(data){
alert(JSON.stringify(data))
})
}
后端接收方式
参数是放在请求体,需要使用 VO 接收参数
Vue生命周期
四个阶段,八个钩子函数
创建前后
挂载前后
更新前后
销毁前后