Vue复习资料

最新推荐文章于 2023-08-18 22:24:36 发布

斗帝萧炎

最新推荐文章于 2023-08-18 22:24:36 发布

阅读量185

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_53716634/article/details/129296493

版权

一、Vue.js开发基础

1.什么是Vue

Vue是一套用于构建用户界面的渐进式JavaScript框架

2.什么是vue.js

Vue.js 是一套用于构建用户界面的渐进式 JavaScript 框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

【vue.js使用流程】

1.导入vue.js。

2.准备好界面。

3.实例化一个vue，并且将这个界面交给vue管理。

4.{{ vue里的变量 }}，可以输出这个变量的值。

二.插值语法

1.简单插值

字面量，number，string，boolean等
四则运算，+，-，*，/,%, （这里+可以做字符串拼接）
逻辑运算，&&，||，！
三目运算、
全局函数

2.复杂插值

对象
数组
对象数组

3.功能：用于解析标签体内容
4.写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性

1.v-text与v-html

1. v-text指令

作用：向其所在的节点中渲染文本内容
与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会

<body>
    <div id="app">
        <p v-text="info"></p>
    </div>
 
    <script>
        const obj = {
            data(){
                return{
                    info:'<input type="text" name="userName">啦啦啦'
                }
            }
        }
        Vue.createApp(obj).mount('#app')
    </script>
</body>

2. v-html指令

作用：向指定节点中渲染包含html结构的内容
与插值语法的区别：v-html会替换掉节点中所有的内容，{{xx}}则不会；v-html可以识别html结构

<body>
    <div id="app">
        <p v-html="info"></p>
    </div>
 
    <script>
        const obj = {
            data(){
                return{
                    info:'<input type="text" name="userName">啦啦啦'
                }
            }
        }
        Vue.createApp(obj).mount('#app')
    </script>
</body>

3.双向奔赴“V-model指令

Vue中有 2 种数据绑定的方式：

单向绑定(v-bind)：数据只能从data流向页面
双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

备注：

双向绑定一般都应用在表单类元素上（如：input、select等）。
v-model:value可以简写为v-model，因为v-model默认收集的就是value值。
在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。

4.V-on指令

v-on指令用于监听DOM事件，并在触发时运行一些JavaScript代码。v-on指令的表达式可以是一段JavaScript代码，也可以是一个方法的名字或方法调用语句。

<style>
    #d1 {
        width: 50px;
        height: 50px;
        background-color: pink;
    }
</style>
</head>
 
<body>
    <div id="app">
        <button type="button" v-on:click="myClick">确定</button>
        <br><br>
        <div id='d1' v-on="{click:clickDiv,mouseover:myOver}"></div>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const obj = {
            data() {
                return {
 
                }
            },
            methods: {
                myClick: function () {
                    alert('你点击了按钮！！')
                },
                clickDiv() {
                    alert('你单击了div！！！');
                },
                myOver() {
                    alter('悬停');
                }
 
            }
        }
        Vue.createApp(obj).mount('#app')
    </script>
</body>

5. v-bind指令

v-bind指令主要用于响应更新HTML元素的属性，将一个或多个属性或一个组件的prop动态绑定到表达式。

<body>
    <!-- v-bind:让行内属性不写死
    简写  : -->
    <div id="app">
        <a href="http://www.baidu.com">跳转</a>
        <a v-bind:href="url">跳转</a>
        <button @click="change" target="_blank">跳转</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                url:'http://taobao.com'
            },
            methods:{
                change(){
                    this.url='http://xiaomi.com'
                }
            }
        })
    </script>
</body>

三.生命周期函数

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染、更新、渲染到销毁等一系列过程，称为Vue的生命周期。

通俗说Vue实例从创建到销毁的过程，就是它的生命周期。

四.V-show和v-if的区别

1.v-show

1.v-show指令的作用是：根据真假值切换元素的显示状态,是响应式的。

2.v-show是通过设置DOM元素的display样式属性控制显隐。

3.v-show有更高的初始渲染消耗

4.数据改变之后呢对应的元素的显示状态也是会同步更新的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-show="display">我是由v-show控制的</div>
      <div v-if="display">我是由v-if控制的</div>
    </div>
 
<script src="../Vue/vue.js"></script>
<script>
new Vue({
    el:'#app',
    data:{
        display:true
        }
})
</script>
 
</body>
</html>

2.v-if

1.v-if是动态的向DOM树内添加或者删除DOM元素

2.v-if有更高的切换消耗

3.v-if适合运营条件不大可能改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <div id="app">
    <!--多分支-->
    <h3>看看我有多少钱，可以请客吃饭</h3>
    <div v-if="money >=1000">酒店请客</div>
    <div v-else-if="money >=500">酒楼请客</div>
    <div v-else-if="money >=100">排挡请客</div>
    <div v-else-if="money >=10">路边摊请客</div>
 
    <!--双分支使用v-if-->
    <div v-if="age >=18">成年了,可以枪毙了</div>
    <div else>未成年,可以坐牢了</div>
</div>
</body>
<script src="../Vue/vue.js"></script>
<script>
new Vue({
    el:'#app',
    data:{
        money:80,
        age:16
       
    }
})
</script>
</html>

3.v-for

遍历数组

v-for最常用的可能就是用来遍历数组，接受两个参数（item, index），item为遍历出的每组数据，index为每组数据的索引，可做唯一标识。

    <div id="app">
 <ul>
    <!-- 1.在遍历的过程中，没有使用下标值（索引值） -->
    <!-- item是数组中的每一项，没有使用下标值（索引值） -->
    <li v-for="(item,index) in list">{{index}}-{{item}}</li>
 </ul>
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
new Vue({
    el:'#app',
    data:{
        list:['刘备','关羽','张飞','赵云','黄总']
    }
})
    </script>
</body>
</html>

遍历对象

v-for遍历对象可接受三个参数（value, key, index），value为每个对象的value值，key为key值，index为索引

 let vue = new Vue({
      el: "#app",
      data: {
        list: [
          { id: 1, name: "张狗", age: 88 },
          { id: 2, name: "舔狗", age: 20 },
          { id: 3, name: "藏獒", age: 10 },
          { id: 4, name: '狼狗', age: 18 }
        ],
       }

遍历数字

<body>
    <div id="app">
        <!-- 遍历数字（指定次数的循环） -->
        <h2>以下是指定次数</h2>
        <ul>
            <!-- num是1到10 -->
            <li v-for="num in 10">{{num}}</li>
    
        </ul>
    </div>
    <script src="../Vue/vue.js"></script>
    <script>
new Vue({
    el:'#app'
    })
    </script>
</body>
</html>

给 v-for 加 key属性

使用v-for 的时候，给对应的元素或组件添加上一个:key 属性，为了更好地复用，但是要保证这个 key 的值是唯一的

<body>
    <div id="app">
        <button @click="list.splice(1,0,{id:4,name:'小明'})">添加</button>
        <ul>
            <li v-for="item in list":key="item.id">
                <input type="checkbox" >
                <span>{{item.name}}</span>
            </li>
    
        </ul>
    </div>
  
 
    <script src="../Vue/vue.js"></script>
    <script>
new Vue({
    el:'#app',
    data:{
        list:[
            {id:1,name:'小红'},
            {id:2,name:'小张'}, 
            {id:3,name:'小黑'}
        ]
    }
    })
    </script>
</body>
</html>

五.Vue侦听器

1.侦听器有什么作用

Vue侦听器是提供给开发者可以用来监测某些数据的变化，从而针对这些数据的变化进行某些操作。

2.侦听器的基本使用

    <div id="app">
        <button @click="msg='你好'">修改值</button>
        <p>{{msg}}</p>
    </div>
</body>
<script src="../Vue/vue.js"></script>
<script>
new Vue({
    el:'#app',
    data:{
        msg:'hello'
 
    },
      watch:{
        //侦听的数据变化
        //基本数据类型，这两个参数有意义。
      msg(newVal,oldVal){
        //侦听到数据变化之后，需要完成的行为。
        console.log('数据改变了',newVal,oldVal);
      }
      }
})
</script>
</html>

3.侦听器对对象进行侦听

 <div id="app"> 
        <p>{{obj.name }}---{{obj.age }}---{{obj.height}}</p>
          <button @click = "obj. name = 'rose'">修改obj的name属性</button> 
          <button @click = "obj.age = 30">修改objinage属性</button>
          <button @click = "obj = {name: 'andy', age:99} ">修改obj的指向</button> 
     </div>
<script src="../Vue/vue.js"></script>
<script>
new Vue({ 
    el:'#app', 
    data:{
         obj: {
             name:'jack',
              age:20, 
              height:185
          }
         },
          watch:{
        
             }
            })

4.侦听器的immediate用法

当未设置immediate或者immediate的值为false时，被侦听的变量在页面初次加载时第一次绑定值的时候，并不会执行监听操作；但是当设置了immediate的值为true时，则会立刻执行一次监听操作。

watch:{
	handler(newv){
		// 处理
	},
	deep:true,
	immediate:true
}

这些方法会触发数组改变, v-for会监测到并更新页面

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

这些方法不会触发v-for更新

slice()
filter()
concat()

六.存储方法

cookie特点

1.cookie保存在浏览器端。

2. 单个cookie保存的数据不能超过4KB。

3.cookie中的数据是以域名的形式进行区分的。

4.cookie中的数据是有过期时间的,超过时间数据会被浏览器自动删除。

5.cookie中的数据会随着请求被自动发送到服务器端。

SessionStorage（临时储存）
1.存储在 sessionStorage 里面的数据在页面会话结束时会被清除。
2.页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文

localStorage（永久储存）
1.localStorage也是Storage类型的一个对象。

2.localStorage会永久存储会话数据

3.localStorage为永久保存

JSON
什么是json?

1.JSON，全称是 JavaScript Object Notation，即 JavaScript对象标记法。

2.JSON是一种轻量级（Light-Meight)、基于文本的(Text-Based)、可读的(Human-Readable)格式。

JSON和JS对象的关系

JSON 是 JS 对象的字符串表示法。它使用文本表示一个 JS 对象的信息，（JSON）本质是一个字符串。

要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}');
//结果是 {a: 'Hello', b: 'World'}

要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法：

var json = JSON.stringify({a: 'Hello', b: 'World'});
//结果是 '{"a": "Hello", "b": "World"}'

七.样式绑定

1.class 属性绑定
我们可以为 v-bind:class 设置一个对象，从而动态的切换 class:

<div id="app">
        <!-- 对象语法 -->
        <p :class="{green:isGreen,big:isBig}">hanpy new Year</p> 
         <p :class="aa">hanpy new Year</p> 
        <p :class="bb">hanpy new Year</p> 
    </div>
 
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isGreen:true,
                isBig:true,
                age: 20,
                aa: {
                    "red": true,
                    "big": false
                },
                myColor_blue: "bc_blue",
                myColor_red: "red",
                myColor_green: "green",
                mySize: "big"
 
 
            },
            methods: {
 
            },
            computed: {
                bb() {
                    return {
                        "green": this.age > 18,
                        "big": true
                    }
                }
            }
        })
    </script>

2.Vue.js style(内联样式)

1.在行内属性中书写样式

<div style="color: red; font-size: 48px;">我是div</div>

2.外部增加{};属性值改造成字符串：分高改造成逗号；属性名到对象名的改变

<div v-bind:style="{color:'red' ,fontSize:'48px'}">我是div</div>

3.把属性值改成变量,第一个color是样式名；第二个color是变量名，和data中的变量保持一致.

    <div v-bind:style="{color:color,fontsize:size}">我是div</div >

七.js事件流

dom 事件流三个阶段
1.捕获阶段：

事件从根节点流向目标节点，途中流经各个DOM节点，在各个节点上触发捕获事件，直到达到目标节点。

2.目标阶段：
事件到达目标节点时，就到了目标阶段，事件在目标节点上被触发

3.冒泡阶段：
事件在目标节点上触发后，不会终止，一层层向上冒，回溯到根节点。

八.Vue修饰符

.lazy

默认情况下 v-model默认是在input事件中同步输入框的数据的
lazy可以让数据在失去焦点或者回车时才会更新

    <div id="app">
        <!-- 事件修饰符.lazy(懒惰)不会即时的将输入框的内容存放如data -->
        <input v-model.lazy="msg">
        <span>{{mag}}</span>
    </div>
</body>
<script src="../../Vue/vue.js"></script>
<script>
  new vue({
    el:'#app',
    data:{
        msg:'111'
    }
  })

.number

自动将用户的输入值转为数值类型，但如果这个值无法被parseFloat解析，则会返回原来的值

    <div id="app">
        <!-- 修饰符. -->
        <input type="number" v-model.number="age">
        <span>{{age}}</span>
    </div>
 
<script src="../../Vue/vue.js"></script>
<script>
  new vue({
    el:'#app',
    data:{
        age:''
    },
    watch:{
        age(){
            console.log(typeof(this.age));
        }
    }
  })

八.AJAX

Ajax就是让浏览器跟服务器交互的一套API。

它的作用就是让浏览器和服务器进行交互。

是向服务器请求数据的局部刷新页面的技术。

axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

get请求

//通过给定的ID来发送请求
axios.get('/user?ID=12345')
.then(function(response){
console.log(response);
}).catch(function(err){
console.log(err);
});
//以上请求也可以通过这种方式来发送
axios.get('/user',{
params:{
ID:12345
}
}).then(function(response){
console.log(response);
}).catch(function(err){
console.log(err);
});

post请求

axios.post('/user',{
firstName:'Fred',
lastName:'Flintstone'
})
.then(function(res){
console.log(res);
})
.catch(function(err){
console.log(err);
});