Vue.js快速入门-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_49405762/article/details/126562537

🚩前言

🌻今天进行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

插值闪烁

    <h1>{{msg}}</h1>

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

解决办法

    <h1 v-text="msg"></h1>
   <h1 v-html="aaa"></h1>

✒️事件

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

    <input type="button" value="通过vue事件来改变年龄+1" v-on:click="addage">
   <span>年龄:{{age}}</span>
   <input type="button" value="通过vue事件来改变年龄-1" @click="subage">

📌事件里的函数执行

//定义函数
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内部提供重用和排序的唯一的值

	<ul>
        <li v-for="(value,index) in user">
            {{index}}---{{value}}
        </li>
    </ul>

✒️双向绑定

双向绑定：

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 的一致行为。