Vue笔记

最新推荐文章于 2023-08-05 13:54:44 发布

戏子张

最新推荐文章于 2023-08-05 13:54:44 发布

阅读量143

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_44767162/article/details/107846746

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue笔记
1.Vue简介
Vue：渐进式JavaScript 前端框架
渐进式：
易用 html css javascript
高效开发前端页面效率高
灵活开发灵活多样性

PS：Vue 渐进式 javascript 框架：让我们操作很少的DOM，甚至不需要操作页面好任何DOM元素，就很容易完成数据和视图的绑定双向绑定 MVVM，在使用Vue的过程中
不要引入Jquery框架

2.Vue :下载和任何引入（分为两个版本）

或者：

3.Vue的入门案例：简单引入使用
Vue的hello入门

vue学习

PS：在Vue 的实例（对象）中的el属性：当前对象的作用范围在Vue的作用范围内就可以使用Vue的语法 el 属性可以使用css中的所有选择器
在Vue 的实例（对象）中的data属性：用来给Vue的实例绑定一些数据，结构类似于K/V 键值对数据类型可以是基本类型或者数组，对象，数据可以在vue的作用范围内中通过K（键）取出

Vue的data定义数据类型和数组

vue学习

Vue中使用{{}}取值时书写表达式

vue学习

PS：在取data数据的{{ }}中可以书写表达式，运算符，调用相关的方法，以及逻辑运算等。

v-test 和 v-html 的区别
v-text ：用来获取data中指定的值以数据文本的渲染到指定标签的内部类似于javascript 中的 innerText v-text中也可以进行字符串拼接

vue学习

V-text 和 {{}} 插值表达式获取值的区别在于：
使用v-text取值会将标签中的原有数据覆盖，使用插值表达式不会覆盖原有的数据
使用v-text取值可以避免在网络环境较差的情况下避免插值闪烁
插值闪烁：使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{}}，加载完毕后才显示正确数据，我们称为插值闪烁。尤其在网速比较慢的时候比较明显。

v-html：：用来获取data中指定的值并解析html渲染到指定标签的内部类似于javascript 中的 innerHTML

vue学习

4.Vue中的事件绑定（v-on）
绑定事件的基本语法

vue学习

PS：在vue中绑定事件是通过v-on：事件名绑定的如v-on:click=" "；
v-on：事件名中的赋值语句是当前事件触发调用的函数名；
在vue中事件的函数统一定义在vue实例的methods属性中
事件：发生特定的动作
事件源：事件发生的DOM元素
监听器：发生特定动作的之后的事件处理程序通常是js中的函数
在Vue定义的事件中this就是指当前的Vue实例，在Vue中可以通过this取出当前Vue的实例

Vue事件的简化语法

vue学习

使用@ 替换v-on来进行事件的绑定

Vue事件的优化

vue学习

<h3>{{ count }}</h3>
<input type="button" value="+" @click="gaibian"></inpt>

可以省略function 直接使用方法名（）{}来定义一个函数。
事件的参数传递

vue学习

<h3>{{ count }}</h3>
<input type="button" value="+" @click="gaibian(23,'zrx')"></inpt>

在使用事件时，可以直接在事件调用处，给事件进行参数传递，在事件定义处定义变量接受传递的参数并进行改变。

5.Vue中v-show v-if v-bind
v-show
v-show是控制页面中某个标签元素是否隐藏底层控制使用的还是display属性

vue学习

hello vue

在v-show中可以直接书写boolean来控制元素的显示或者隐藏，也没有通过变量来控制元素的隐藏或者显示。
在v-show中也可以书写boolean表达式来控制标签的显示或者隐藏

v-if
v-if 用来控制页面元素是否展示底层使用的是DOM元素操作DOM

vue学习

hello vue

<h3 v-if="show">hello vue</h3>

v-bind
用来绑定标签的属性，从而通过vue动态修改标签的属性

vue学习

<!--  -->
<style>
    .aa{
        border: 2px aquamarine solid;
    }
</style>

<img v-bind:title="mag" v-bind:class="css" src="../WEB-INF/images/2.jpg" height="200" width="200" alt=""/>

<img v-bind:title="mag" v-bind:class="{aa:showCss}" src="../WEB-INF/images/2.jpg" height="200" width="200" alt=""/>

6.v-for的使用
v-for：就是用来对对象进行遍历的（数组也是对象的一种）

vue学习

    <hr>
    <!-- 使用v-for 对数组进行遍历 -->
    <span v-for="(value,key,index) in user">
        {{ index+1 }}:={{ key }}:{{value}}
    </span>

    <hr>
    <!-- 使用v-for 对对象类型数组进行遍历 -->
    <span v-for="user,index in users" :key="user.id">
        {{index}}:{{user.id}}:{{user.name}}:{{user.age}}
        <hr>
    </span>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const div=new Vue({
       el:"#div",
       data:{
           user:{name:"张三",age:"23"},
           arr:[
               "徐汇区",
               "黄埔区",
               "浦东区"
           ],
           users:[
               {id:1,name:"王五",age:23},
               {id:2,name:"李四",age:22},
           ]
       },
       methods:{

       }
    });
</script>

在使用v-for的时候注意一定要注意加入 :key 用来给vue提供内部的重用和排序的唯一key

v-model 数据的双向绑定
v-model：作用用来绑定标签元素的值与vue实例对象中data数据保持一致，从而实现数据的双向绑定机制

vue学习

使用v-model 指令可以实现数据的双向绑定
双向绑定：
表单中的数据发生变化导致vue实例中data数据变化
Vue实例中的data数据的变化导致表单中的数据变化称之为双向绑定

MVVM模式：双向绑定机制
Model ：数据 vue实例中绑定的数据

VM：viewModel 监听器，监听Model和View中的数据变化

View：页面 页面展示的数据

8.记事本小实例

vue学习

使用vue中的属性模拟一个记事本做增删改查

9.事件修饰符
修饰符作用：用来和事件连用，用来决定事件的触发条件或者是阻止事件的触发机制

常用的事件修饰符：
.stop
.prevent
.capture
.self
.once
.passive

修饰符可以连用，但是使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
例：用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

stop ：用来阻止事件冒泡

Title

prevent：用来阻止标签的默认行为

vue学习

Self：针对当前标签的事件触发只触发自己标签上特定动作的事件只触发当前元素绑定的事件，不关心（监听）其他元素的事件 vue学习

Once：用来使当前事件只执行一次 vue学习

按键修饰符
作用：用来与按键中的按键事件绑定在一起，用来修饰特定的按键事件的修饰符

Vue中常见的按键修饰符：按键抬起事件 @keyup.指定的按键修饰符对按键绑定事件

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
例：Enter：回车键抬起事件
作用：用来在触发回车按键之后触发的事件

vue学习

Axios 基本使用
Axios简介
Axios：是一个异步请求技术，核心作用就是在页面中发送异步请求，并且获取对应数据在页面进行渲染局部更新技术类似与Ajax

Axios 入门小程序
Axios 中文使用说明网站：https://www.kancloud.cn/yunye/axios/234845/
在线引入：

Axios Get方式的请求方式
axios.get(’/loadAll’)
.then(function (response) {
console.log(response);
}).catch(function (err) {
console.log(err);
})
// 带参数的请求
axios.get("/loadUserById",
{
params:{
id:1,name:“里斯”
}
}).then(function (response) {
console.log(response);
}).catch(function (err) {
console.log(err);
})
Get方式需要向后台传递参数的时候
前端在地址栏加 ?属性名称=数据
后端在被请求的方法上加对于的属性名称即可得到参数

也可以在.then 成功的方法中定义一个 params{属性名称：值} 来传递参数

Axios Post方式的请求方式
axios.post(’/addUser’,{
data:{
username:“里斯”,
age:23,
sex:“男”,
address:“宣城”,
}
})
.then(function (response) {
console.log(response)
}).catch(function (err) {
console.log(err);
})

// 发送 POST 请求
axios({
method: ‘post’,
url: ‘/addUser’,
data: {
username:“里斯”,
age:23,
sex:“男”,
address:“宣城”,
}
});

Axios的并发请求
并发请求：将多个请求在同一时刻发送到后端接口，集中处理每个请求的响应结果

Vue 结合 Axios 做用户的查询案例

vue学习

<style>
    #bg{
        height: 100%;
        width: 100%;
    }
    #div{
        width: 1200px;
        height: 800px;
        background: url("/imgs/3.jpg");
        margin: 0 auto;
    }
    #search{
        position: relative;
        height: 200px;
        left: 40%;
        top: 30px;
    }
    #showDiv{
        border: 2px aquamarine solid;
        width: 1200px;
        height: 600px;
    }
</style>

<div id="search">
    <label>
        <input type="text" v-model="name" style="width: 200px" @keyup.enter="getUserByid">
    </label>
    <input type="button" value="搜索用户" @click="getUserByid">
</div>

<div id="showDiv">
    <tr v-show="showTable">
        <td>用户ID</td>
        <td>{{user.id}}</td>
        <td>用户名称</td>
        <td>{{user.username}}</td>
        <td>用户年龄</td>
        <td>{{user.age}}</td>
        <td>用户性别</td>
        <td>{{user.sex}}</td>
        <td>用户地址</td>
        <td>{{user.address}}</td>
    </tr>
</div>

Vue 生命周期
Vue生命周期也被称之为Vue生命周期钩子：生命周期函数

const div=new Vue({
el:"#div",
data:{
msg:“Hello Vue”,
},
methods:{

},
beforeCreate(){},
created(){},
beforeMount(){},
mounted(){},
beforeUpdate(){},
updated(){},
beforeDestroy(){},
destroyed(){}

})

beforeCreate( 创建前 )
在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。

created ( 创建后）
实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。然而，挂在阶段还没有开始, $el属性目前不可见，这是一个常用的生命周期，因为你可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理，也有一些童鞋喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter中完成

beforeMount
挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置：编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。

mounted
挂载完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。

beforeUpdate
在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程

updated（更新后）
在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用

beforeDestroy（销毁前）
在实例销毁之前调用，实例仍然完全可用，

这一步还可以用this来获取实例，
一般在这一步做一些重置的操作，比如清除掉组件中的定时器和监听的dom事件

destroyed（销毁后）
在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用