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

前言

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

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

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

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