2024年最新Vue入门基本使用与事务管理【1】(1)，2024年最新阿里面试暗示

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

<标签 v-for=”(变量,索引) in 数组|集合”>

{{变量}} , {{索引}}

</标签>

<标签 v-for=”变量in 数组|集合”>

</标签>


<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 = "app">

        <h2>普通数据数据遍历</h2>

        <span v-for = "(un,index) in arr">

            {{index}} {{un}} <br>

        </span>



        <h2>对象数组数据遍历</h2>

        <table border = "1">

            <tr>

                <td>编号</td>

                <td>学号</td>

                <td>姓名</td>

                <td>年龄</td>

            </tr>

            <tr v-for="(student,index) in list">

                <td>{{index + 1}}</td>

                <td>{{student.id}}</td>

                <td>{{student.username}}</td>

                <td>{{student.age}}</td>

            </tr>

        </table>

    </div>

</body>

<script>

    new Vue({

        el : '#app',

        data : {

            arr : ['张三','李四','王五'],

            list : [

                {id : 's001',username : '张三',age : '18'},

                {id : 's002',username : '李四',age : '21'},

                {id : 's003',username : '王五',age : '25'},

            ]

        }

    })

</script>

</html>

属性绑定–普通属性：v-bind:xxx

<标签 v-bind:属性名=””></标签>

<标签 :属性名=””></标签>

1.如果需要显示data区域的数据,直接写. 例如: url

2.如果需要显示普通字符串,需要单引号. 例如: ‘?username=jack’

3.data区域的数据和普通字符串可以通过+连接


<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 = "app">

        <h2>超链接展示</h2>

        <a href="url">第1个链接</a> <br>

        <a v-bind:href="url">第2个链接</a> <br>

        <a :href="url">第3个链接</a> <br>

        <a :href="url + '?uid=' + uid">第3个链接</a> <br>



        <h2>下拉列表展示</h2>

        <select name="" id="">

            <option value="">--请选择--</option>

            <option v-for="(cls,index) in list" :value="cls.id">{{cls.name}}</option>

        </select>

    </div>

</body>

<script>

    new Vue({

        el : '#app',

        data : {

            url : 'http://www.czxy.com',

            uid : 'u001',

            list : [

                {id : 'c001',name : 'Java12班',desc : '....'},

                {id : 'c002',name : 'Java34班',desc : '....'},

                {id : 'c003',name : 'Java56班',desc : '....'},

            ]

        }

    })

</script>

</html>

属性绑定–class：v-bind:class

方式1: 字符串,必须使用单引号

<标签 v-bind:class=”’类名’”></标签>

方式2: 对象,key是类名; value是Boolean值,是否显示. (对象数据可以在data区域)

<标签 v-bind:class=”{’类名’:true , ’类名2’ : false}”></标签>

方式3: 数组,相当于’方法2’的简化版,所有都是true

<标签 v-bind:class=”[’类名’, ’类名2’]”></标签>


<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="js/vue.js"></script>

    <style>

        .myClass {

            height : 10px;                 /*高度*/

            width : 300px;                 /*宽度*/

            border: 1px solid #000;      /*边框：粗细 样式 颜色*/

            background-color: #f00;      /*背景色*/

        }

        .myClass2 {

            width : 600px;

        }



    </style>

</head>

<body>

    <div id="app">

        <h2>样式展示</h2>

        <div class="myClass"></div>

        <div v-bind:class="mc"></div>

        <div v-bind:class="'myClass'"></div>



        <div class="myClass myClass2"></div>

        <div v-bind:class="['myClass','myClass2']"></div>

        <div v-bind:class="{'myClass': true,'myClass2': true}"></div>



    </div>

</body>

</html>

<script>

    new Vue({

        el: '#app',

        data: {

            mc: 'myClass',

        }

    })

</script>

属性绑定–style属性：v-bind:style

方式1: 对象, key样式名, value样式值 .

//key和value需要使用单引号

//key可以不使用单引号,需要将含-命名的属性进行驼峰命名例如:abc-def 写成 abcDef

<标签 v-bind:style=”{’样式名’:’样式值’, ’样式名2’ : ’样式值2’}”></标签>

方式2: 数组, 运行绑定多个对象

<标签 v-bind:class=”[对象名, 对象名2]”></标签>


<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="js/vue.js"></script>

</head>

<body>

    <div id="app">

        <!-- 

            1.key和value需要使用单引号

            2.key可以不使用单引号,需要将含-命名的属性进行驼峰命名，例如:font-size 写成 fontSize

            3.value如果不使用引号，表示变量

        -->

        <div v-bind:style="{'background-color':'#f00',fontSize:'40px','text-align': align}">测试数据</div>

      

    </div>

</body>

</html>

<script>

    new Vue({

        el: '#app',

        data: {

            align : 'center'

        }

    })

</script>

控制语句：v-show&v-if

<标签 v-show=”true|false”></标签>

<标签 v-if=”true|false”></标签>


<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="js/vue.js"></script>

</head>

<body>

    <div id="app">

        变量值：{{isShow}} <br/>

        

        <!-- 通过样式display控制是否显示 -->

        <div v-show="isShow">show控制的内容</div>



        <!-- 通过html源码是否存在，控制是否显示 -->

        <div v-if="isShow">if控制的内容</div>



        <input type="button" @click="isShow=!isShow" value="切换">



    </div>

</body>

</html>

<script>

    new Vue({

        el: '#app',

        data: {

            isShow : true

        }

    })

</script>

表单数据绑定：v-model

通过 v-model 可以完成数据双向绑定.
1. 数据data区域绑定视图区域, 如果data数据区域的数据发生改变, 自动更新表单标签的显示
2. 视图区域绑定数据data区域 , 如果表单标签的数据发生改变,自动更新data区域存放的数据.

<表单元素标签 v-model=”data区域属性名”>


<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="js/vue.js"></script>

</head>

<body>

    <div id="app">

        用户名：{{username}} <br/>

        

        <input type="text" v-model="username">

    </div>

</body>

</html>

<script>

    new Vue({

        el: '#app',

        data: {

            username : 'jack'

        }

    })

</script>

事务操作

====

事件绑定：v-on：事件名

<标签 v-on:事件名=”函数名”></标签>

<标签 @事件名=”函数”></标签>

<标签 v-on:click=”函数”> </标签> //点击事件

<标签 v-on:focus=”函数”> </标签> //获得焦点事件

<标签 v-on:blur=”函数”> </标签> //失去焦点事件


<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="js/vue.js"></script>

</head>

<body>

    <div id="app">

        <input type="button" v-on:click="show" value="第1个按钮"> <br/>

        <input type="button" @click="show2" value="第2个按钮"> <br/>

        <input type="button" @click="show3" value="第3个按钮"> <br/>

     

    </div>

</body>

</html>

<script>

    new Vue({

        el: '#app',

        methods: {

            show : function() {

                alert('匿名函数')

            },

            show2 : () => {

                alert('箭头函数')

            },

            show3() {

                alert('函数简写')

            }

        },

    })

</script>

事件绑定–this关键字

在vue中,某一个成员需要使用另一个成员,需要通过”this.”进行引用



### 基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

##### 网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/f5a39888f9068109a665e16902bed725.webp?x-oss-process=image/format,png)


CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

![](https://img-blog.csdnimg.cn/img_convert/6fb70e77677ccac7fd2fbf3a80850328.webp?x-oss-process=image/format,png)


##### 动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

![](https://img-blog.csdnimg.cn/img_convert/c96cc6a75e8ca169c92e05ac0ba9bbd4.webp?x-oss-process=image/format,png)


            show3() {

                alert('函数简写')

            }

        },

    })

</script>

事件绑定–this关键字

在vue中,某一个成员需要使用另一个成员,需要通过”this.”进行引用



### 基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

##### 网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中...(img-Q3MOhjsZ-1715711303196)]


CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

[外链图片转存中...(img-7vw7rGml-1715711303197)]


##### 动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

[外链图片转存中...(img-yVmHWxYN-1715711303198)]