学习笔记-Vue 基础使用

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生命周期

四个阶段，八个钩子函数

创建前后

挂载前后

更新前后

销毁前后