Vue基础复习

最新推荐文章于 2024-11-17 21:03:46 发布

寻_欢

最新推荐文章于 2024-11-17 21:03:46 发布

阅读量214

点赞数

分类专栏： Vue基础文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_51510783/article/details/128759862

版权

Vue基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文使用与Vue学完，为之后项目所用知识点做准备

Vue基础

插入值{{}}，主要代码

<h2>hi，{{name}}住在{{adress}}</h2>
    <script>
        Vue.config.productionTip=false; // 以阻止 vue 在启动时生成生产提示。
        new Vue({
            el:'h2',  //实例与容器一对一
            data:{
                name:'哎呀妈耶',
                adress:'万柳书院'
            }
        })
    </script>

绑定事件：

@click="函数"，
@keyup.enter按回车出事件

绑定数据

双向绑定：v-model="？？" ，data里面必须要有相应的属性。此种绑定方式，页面和数据本身都会发生对应变化（常用于表单）

单项绑定：v-bind=" ??",此种绑定方式只有数据---》页面变化

<div id="root">
        <h1>插值语法</h1>
        <h3>你好，{{name}}</h3>
        <hr>
        <h1>指令语法</h1>
        <a v-bind:href="school.url.toUpperCase()">去哔哩哔哩首页,身份为{{school.name}}</a>
        <a :href="school.url">去哔哩哔哩首页</a>
    </div>
    <script>
        Vue.config.productionTip=false;
        new Vue({
            el:'#root',
            data:{
                name:'妈耶',
                //可套娃
                school:{
                    name:'检察官',
                    url:'//www.bilibili.com/'
                }
            }
        })
    </script>

过滤器（filters属性）

<!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="../js/vue.js"></script>
    <script src="../js/dayjs.min.js"></script>
</head>
<body>
    <div id="root">
        <h1>显示格式化后的时间</h1>
        <!-- 计算属性 -->
        <h2>现在是：{{timeFRM}} </h2>
        <h2>现在是：{{time | timeForm('YYYY_MM_DD') | myscile}} </h2>
    </div>
    <script>
        Vue.config.productionTip = false;
        Vue.filter('myscile',function(value){
            return value.slice(0,4)
        })
        new Vue({
            el:'#root',
            data:{
                time:1673768417565
            },
            computed:{
                timeFRM(){
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            filters:{
                timeForm(value,str='YYYY-MM-DD HH:mm:ss'){
                    return dayjs(value).format(str)
                },
                
            }
        })
    </script>
</body>
</html>

内置指令

v-text:插入

v-html:可插入html结构，但存在安全问题

v-once:只可使用一次

<!-- 不支持结构解析 -->
<div v-text="name"></div>
<!-- v-html有安全问题 -->
<div v-html="str"></div>
<!-- v-clock网速慢用 -->
<div v-once>初始值为 {{n}}</div>

生命周期

全称生命周期函数，一共八组，原理图如下

事件处理（$event）

<!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="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>{{name}}是只猫哦</h2>
        <button @click="showinfo1">点我有惊喜1</button>
        <button @click="showinfo2(4,$event)">点我有惊喜2</button>
    </div>
    <script>
        Vue.config.productionTip=false;
        const vm=new Vue({
            el:'#root',
            data:{
                name:'妈耶'
            },
            methods:{
                showinfo1(event){
                    alert('可不咋地')
                },
                showinfo2(number,$event){
                    alert('它'+number+'岁了')
                }
            }
        })
    </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="../../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>人员列表</h2>
        <ul>
            <li v-for="p in persons" :key="p.id">{{p.name}}---{{p.age}}</li>
        </ul>
        <h2>汽车列表</h2>
        <ul>
            <li v-for="(c,index) in car" :key="index">{{index}}--- {{c}}</li>
        </ul>
        <h2>字符遍历</h2>
        <ul>
            <li v-for="(s,index) in str" :key="index">{{index}} ---{{s}} </li>
        </ul>
        <h2>数字</h2>
        <ul>
            <li v-for="(n1,index) in n" :key="index">
                {{index}}---{{n1}}
            </li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: '#root',
            data: {
                persons: [
                    {id: '01',name: '里斯',age: 18},
                    {id: '02',name: '张氏',age: 19},
                    {id: '03',name: '王五',age: 20},
                ],
                car:{
                    name:'劳斯莱斯',
                    price:'800w',
                    number:28
                },
                str:'gdhsbju',
                n:5
            }
        })
    </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="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" @keyup.enter="shaixuan" v-model="name">
        <button @click="sortType=1">升序</button>
        <button @click="sortType=2">降序</button>
        <ul v-for="p in fullPerson" :key="p.id">
            {{p.name}}----{{p.age}}
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el:'#root',
            data:{
                name:'',
                sortType:"0",
                persons:[
                    {id:'001',name:'马冬梅',age:18},
                    {id:'002',name:'周冬雨',age:19},
                    {id:'003',name:'周杰伦',age:23},
                    {id:'004',name:'温兆伦',age:20},
                ]
            },
            computed:{
                fullPerson(){
                    let arr=this.persons.filter((p)=>{
                        return p.name.indexOf(this.name)!=-1
                    })
                    // 排序
                    if(this.sortType!=0){
                        arr.sort((p1,p2)=>{
                            return this.sortType!=1 ? p2.age-p1.age :p1.age-p2.age
                        })
                    }
                    return arr
                }
            }
        })
    </script>
</body>
</html>