2022-08-27 第六小组 瞒春 学习笔记

前言

今天进行vue的学习
Vue.js是一款流行的JavaScript前端框架,旨在更好地组织与简化Web开发。

Vue所关注的核心是MVC模式中的视图层,同时,它也能方便地获取数据更新,并通过组件内部特定的方法实现视图与模型的交互。通俗的来讲,vue就是一个已经搭建好的空屋,与单纯使用jQuery这种库比,可以更好地实现代码复用,减少工作量;

作者简介:大家好我是烫嘴的辛拉面,大家可以叫我拉面。
个人主页: weixin_49405762的博客
系列专栏: 经典算法习题集
为大推荐一款刷题神器哦 点击跳转进入网站

目录

  • 前言
  • ✏️Vue
    • ✒️Vue的创建
    • ✒️Vue2的小bug
    • ✒️事件
      • 事件里的函数执行
      • 面试题
      • 属性的绑定
      • 遍历
    • ✒️双向绑定
  • ✏️总结
  • 必看

✏️Vue

vue是JavaScript的一个框架——【JavaScript的库】

✒️Vue的创建

<div id="app">
        <!-- 插值表达式 -->
        <!-- <h1>{{msg}}</h1>{{ msg }} -->
        {{user.msg}} ---{{user.name}} --- {{user.password}}
        <hr>
        {{lists[1]}}
        <hr>
        {{users[0].name}}---{{users[0].age}}
        <hr>
        {{msg.substring(0,4)}}
    </div>
    <script src="vue.js"></script>
    <script>
        // 1.创建vue的实例
        const app = new Vue({
            // el是用来给Vue实例一个作用域
            el:"#app",
            // data是定义数据
            data:{
                // 用来给Vue定义一些相关的数据
                msg:"欢迎使用vue",
                // 用来给Vue定义对象
                user:{
                    msg:"hello vue",
                    name:"admin",
                    password:"123456"
                },
                // 用来给Vue定义数组
                lists:['北京','上海','广州','深圳','杭州'],
                // 用来给Vue定义对象的数组
                users:[{name:"小强",age:"25"},{name:"小虎",age:"18"}],
            },

        })
    </script>

✒️Vue2的小bug

插值闪烁

{{msg}}

网速较慢时可能后加载出来

解决办法

✒️事件

事件的定义——【v-on:click , @click】

年龄:{{age}}

事件里的函数执行

//定义函数
methods:{
            addage:function(){
                // this代表的是整个Vue实例
                this.age++;
            },
            subage:function(){
                if(this.age>0){
                    this.age--;
                }
            }
        }

面试题

v-if与v-show的区别

v-if直接操作DOM,底层
v-show是通过css控制DOM元素

属性的绑定

【v-bind:或者:】

<div id="ad">
    <--!获取元素-->
        <img v-bind:src="src"  alt="" :title="t" @click="ddd()">
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: "#ad",
            data: {
                src: "../2022-8-26/14.png",
                a: 1
            },
            methods: {
                ddd() {
                    if (this.a == 1) {
                        this.src="../2022-8-26/142.jpeg"
                        this.a=2
                    }else if(this.a==2){
                        this.src="../2022-8-26/18.jpeg"
                        this.a=3;
                    }else{
                        this.src="../2022-8-26/14.png"
                        this.a=1
                    }
                },
            }
        })
    </script>

遍历

v-for写在哪一个标签里,就会生成多个对应的标签

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

	
  • {{index}}---{{value}}

✒️双向绑定

双向绑定:

HTML部分发生变化,Vue实例中对应的属性也会发生变化

Vue中发生变化,HTML中同样发生变化

<div id="ad"><input type="text" v-model="message"><hr><!-- <span>{{message}}</span> --><hr><button @click="changevalue">通过改变js中message的值改变文本框的值</button><hr><input type="radio" name="gender" v-model="gender" value="m">男
       ​<input type="radio" name="gender" v-model="gender" value="w">女
       ​<hr><input type="checkbox" v-model="hobby" checked value="a">A
       ​<input type="checkbox" v-model="hobby" checked value="b">B
       ​<input type="checkbox" v-model="hobby" checked value="c">C
       ​<button @click="show"></button><hr><select v-model="address"><option value="x" >x</option><option value="y" >y</option><option value="z" >z</option></select></div><script src="vue.js"></script><script>const app = new Vue({
           ​el: "#ad",
           ​data: {
               ​message: null,
               ​gender:"w",
               ​hobby:[],
               ​address:"x"},
           ​methods: {changevalue(){this.message=prompt();},show(){alert(this.address)}}})</script>

✏️总结

Vue 和其他前端框架相比,在结构、样式、业务分离等方面更清晰彻底,更符合前端多年来的编码习惯,更符合直觉、更容易学习和维护。
入门非常容易,资料丰富,框架功能完善,加入非常多的特性,例如,if, for, async,为开发者节省很多垃圾代码。模板支持 html 和 jsx,支持自定义指令,方便操作 dom 的一致行为。

必看

算法对程序员来说及其重要,语言和开发平台不断变化,但是万变不离其宗的是那些算法和理论,刷算法最最最直白的原因就是找一个好的工作,那刷题一定是必不可少的
现在算法刷题平台还是蛮多的,给大家介绍一个我认为与大厂关联最深的平台——牛客网
在这里插入图片描述

相较于其他平台,他们的题单更和工作,大厂靠拢,不光有面试必刷的101到题目,还有大量大厂真题,内容也全程免费,相较于其它会员费结算的来说 非常的友好
在这里插入图片描述

牛客网还支持ACM模式,没有练习过的一定要提前适应!像某团、某为,都要求自己处理输入输出,如果不提前练习会很吃亏的!
牛客的题解更新迭代也很快,讨论区也有奇技淫巧的分享,能帮你把所有盲点扫清楚,整体来说还是非常推荐去练习的~
传送门:牛客网

你可能感兴趣的