vue学习

原创已于 2023-02-08 17:32:40 修改 · 714 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #学习 #javascript

于 2023-02-08 00:52:31 首次发布

（一）、vue的引入

1.通过cdn链接直接引入

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

2.自行下载js文件托管

基础的使用示例：

<!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>
    <script src="./vue2.js"></script>
</head>
<body>
    <div id="box">
        {{10+30}}
        {{myname}}
    </div>

    <script>
        new Vue({
            el:"#box",
            data:{
                myname:"kerwin" //状态
            }
        })
    </script>
</body>
</html>

（二）、vue的拦截原理

vue2：
在这里插入图片描述
vue3：使用es6中的proxy

（三）、vue的模板语法

{{支持变量或运算表达式}}

    指令：
    v-on:click 绑定事件
    v-bind 动态绑定属性
    v-show  动态显示和隐藏
    v-if 动态创建和删除。更懒惰为true时才会创建
    v-for 列表渲染
    v-for 遍历
    v-model 双向绑定表单
    <ul>
        <li v-for="item(变量名) in list">{{item}}</li>
    </ul>   

    v-bind:src=> :src
    v-on:click=> @click 绑定的事件的函数要写在methods中

（四）、todolist

<!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>
    <script src="./vue2.js"></script>
</head>
<body>
    <div id="box">
        <input type="text" v-model="mytext">
        <button @click="handleAdd()">add</button>

        <ul v-show="datalist.length"> <!-- datalist.length不为0时，既为真就显示 -->  
            <li v-for="(data,index) in datalist"><!--遍历出datalist数组的内容然后展示出来 -->
                {{data}}
                <button @click="handleDel(index)">del</button>
            </li>
        </ul>
        <div v-show="!datalist.length">空空如也</div>  <!-- datalist.length为0时，取反为真就显示 -->  
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                datalist:["111","222","333"],
                mytext:""
            },
            methods:{
                handleAdd(){
                    this.datalist.push(this.mytext)//添加到datalist中
                    this.mytext=""
                },
                handleDel(index){    
                    this.datalist.splice(index,1)
                }
            }
        })
    </script>
</body>
</html>

（五）、v-html指令

在这里插入图片描述
v-html可以直接解析html
{{}}不解析html

（六）、点击变色

<!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>Doc</title>
    <script src="./vue2.js"></script>
    <style>
        ul{
            list-style:none ;
            display: flex;
        }
        li{
            flex: 1;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }
        *{
            margin: 0;
            padding: 0;
        }
        .active{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <ul>
        <li v-for="(data,index )in datalist" :class="current===index?'active':'' " @click="handleClick(index)"><!--点击时拿到index值，赋值给current，再判断是不是和当前index相等，相等就赋值类名active-->
            {{data}}
        </li>
    </ul>
    <script>
        new Vue({
            el:"#box",
            data:{
                datalist:["首页","列表","我的"],
                current:0
            },
            methods:{
                handleClick(index){
                    this.current=index
                }
            }
        })
    </script>
</body>
</html>

（七）、class和style

1.动态切换class 对象

<!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>
    <script src="./vue2.js"></script>
</head>

<body>

    <div id="box">
        <div :class="classobj"></div>
    </div>

    <script>
        new Vue({
            el: "#box",
            data: {
                classobj: {
                    aa: true,
                    bb: true,
                    cc: false
                }
            }

        })
    </script>
</body>

</html>

2.动态切换class 数组
数组支持后期直接添加，vue对数组方法进行了改变

<!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>
    <script src="./vue2.js"></script>
</head>

<body>

    <div id="box">
        <div :class="classarr"></div>
    </div>

    <script>
        new Vue({
            el: "#box",
            data: {
                classobj: {
                    aa: true,
                    bb: true,
                    cc: false
                },
                classarr:["aa","bb"]
            }

        })
    </script>
</body>

</html>

切换style与class一样
注：对象写法需要驼峰写法，如：backgroundColor:‘red’

vue2不支持动态增加属性拦截，只会拦截初始化的内容。vue3支持
解决方法：Vue.set(对象，属性，true)

vue3：初始化改变和data写法改变，其他不变

<!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>
    <script src="./vue.next.js"></script>
</head>
<body>
    <div id="box">
        {{myname}}
    </div>
    <script>
        var obj={
            data(){
                return{
                    myname:"kerwin"
                }
            },
            methods:{

            }
        }
        Vue.createApp(obj).mount("#box")
    </script>
</body>
</html>

（八）、条件渲染

使用v-if，v-else-if实现条件码改变显示不同内容。条件渲染
在这里插入图片描述
template标签作为包装不影响dom结构
可以用来控制多个元素一起出现和消失

（九）、列表渲染

of和in都可以遍历没有区别
n in 10 是从1开始遍历
在这里插入图片描述
改索引值需要另用方法：

对象的遍历：第二个值是key值

   <li v-for="(item,key) of obj">
        {{key}}--{{item}}
    </li>

2、虚拟dom缓冲
在这里插入图片描述
@input事件，内容改变一次就执行一次

（十）、事件处理器

不传参可以不加（），可以获取到事件源evt.target
在这里插入图片描述
既可以得到事件源，又可以传参。$event是固定写法

第三种：直接写表达式

（十一）、事件修饰符

.stop 阻止单击事件继续传播
.once 只触发一次
.self 只有在当前元素才会触发
.prevent 阻止默认事件
.capture 内部元素触发的事件先在此处理，然后才交由内部元素进行处理

（十二）、按键修饰符

@keyup.enter 触发提交效果
还可以加任意键值作为触发条件

（十三）、表单控件绑定

文本框绑定字符串
绑定一个布尔值可以改变checkbox的状态

多选的绑定功能：选中时将当前点击的value值赋值给checkList数组
在这里插入图片描述
多个radio绑定字符串
架构模式：mvvm（双向数据绑定）

（十四）、表单修饰符

.lazy 失去焦点再执行（懒惰的）
.number 修饰成数字类型
.trim 去首尾空格

（十五）、计算属性

    <div>
        {{mycomputedname}}
    </div>
    //计算的 写在vue里面
    computed:{
        mycomputedname(){
            return 1
        }
    }

防止模板过重，难以维护。负责逻辑放在计算属性中来写
计算属性，有缓存，基于依赖的缓存
方法，事件绑定，逻辑计算，没有缓存，可以不用return

（十六）、watch

在这里插入图片描述
重视过程，监听

  watch:{
        mytext(newval,oldval){

        }
    }

（十七）、fetch

fetch-get：获取数据，第一个then获取状态码等内容
.catch 失败才执行
在这里插入图片描述
fetch-post

两种不同的数据类型

headers是请求体

（十八）、axios库

在这里插入图片描述

（十九）、过滤器

传入过滤器： item.img | imgFilter 后面可以继续添加过滤器
定义过滤器：
在这里插入图片描述
vue3不支持

（二十）、组件定义

在这里插入图片描述
js驼峰写法，要用-连接

定义组件：

    Vue.component("navbar",{
        template:`里面写dom结构`
        methods:{}写方法
        comuted:{}
        watch:{}
        data(){} data必须是函数写法
       	components:可以在内部定义组件
    })

（二十一）、全局和局部组件

全局组件：在全局都可以使用
局内组件：只有在局内使用，无法全局使用
使用components定义内部组件

（二十二）、父传子

<!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>
    <script src="./vue2.js"></script>
</head>
<body>
    <div id="box">
        <div></div>
        <navbar myname="电影" :myright="false"></navbar>
    </div>
    <script>
        Vue.component("navbar",{
            props:["myname","myright"], //接受变量
            template:`<div>
                <button>left</button>
                <span>{{myname}}</span>
                <button v-show="myright">right</button>
                </div>`
        })//通过接受的变量改变内容
        new Vue({
            el:"#box"
        })//创建跟组件
    </script>
</body>
</html>

（二十三）、属性验证&默认属性

属性验证：验证传入的参数
在这里插入图片描述
添加默认属性

（二十四）、子传父

<!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>
    <script src="./vue2.js"></script>
</head>
<body>
    <div id="box">
        <navbar @myevent="handleEvent"></navbar>
        <sider v-show="isShow"></sider>
    </div>
    <script>
        Vue.component("navbar",{
            template:`<div>
                <button>left</button>
                <button @click="handleClick()">点击</button>
                </div>`
                ,
            methods:{
                handleClick(){
                    this.$emit("myevent")//点击触发myevent事件
                }
            }
        })//通过接受的变量改变内容
        new Vue({
            el:"#box",
            methods:{
                handleEvent(){
                    this.isShow=!isShow
                }//父组件的方法
            }
        })//创建跟组件
    </script>
</body>
</html>