当前位置: article > 正文

Vue前端基础知识，一文打通_前端vue知识点

作者：2023面试高手 | 2024-05-17 06:26:36

踩

前端vue知识点

一、什么是Vue

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

（说白了，vue的出现使得我们的前端开发变得更加简单快捷。懒惰才是第一生产力呀！！！）

二、MVVM思想

M：即Model也就是模型，包括了一些基础的操作
V：即视图，也就是页面渲染的结果
VM：即View-Model，模型与视图的双向操作

换而言之，框架中MVVM的M就是后端的数据，V就是节点树，VM就是new出来的那个Vue({})对象。

三、快速上手Vue

前面的铺垫已经结束，下面开始Vue的相关操作说明。

Vue的声明式渲染

声明式编程是一种编程范型，与命令式编程相对立。它描述目标性质，让计算机明白目标，而非流程。声明式编程不用告诉电脑问题领域，从而避免随之而来的副作用。而指令式编程专则需要用算法来明确的指出每一步该怎么做。

具体操作也非常的简单：

1、设置一个div标签id为app（id名字随便取一个就行）


<div id="app">
  {{ message }}  //设置一个message变量，一会说啥意思
</div>

2、使用Vue声明式渲染这个div标签，并给message赋值


var app = new Vue({
  el: '#app',     //通过id确定声明式渲染的对象（傻瓜式教学：要绑定哪个就把那个app该成其他的id）
  data: {
    message: 'Hello Vue!'     //通过这个data给什么的message变量渲染
  }
})

其实这一段代码稍微有点了解过Vue的朋友，应该都知道是啥意思。就是Vue通过id绑定了那个div标签，并把message这个变量给渲染了上去。

首先通过 new Vue() 来创建 Vue 实例，然后构造函数接收一个对象，对象中有一些属性：

el：是 element 的缩写，通过 id 选中要渲染的页面元素，本例中是一个 div
data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
message：这里我们指定了一个 name 属性
页面中的`h2`元素中，我们通过{{message}}的方式，来渲染刚刚定义的 message属性。

双向绑定


<body>
    <div id="app"> 
        <input type="text" v-model="num"> 
        <h2>
            {{name}}，非常帅！！！有{{num}}个人为他点赞。
        </h2> 
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script> 
    <script> 
        // 创建 vue 实例 
        let app = new Vue({
            el: "#app", // el 即 element，该 vue 实例要渲染的页面元素
            data: { // 渲染页面需要的数据 
                    name: "张三", 
                    num: 5 } }); 
    </script> 
</body>

我们修改表单项，num 会发生变化。我们修改 num，表单项也会发生变化。为了实时观察到这个变化，我们将 num 输出到页面。我们不需要关注他们为什么会建立起来关联，以及页面如何变化，我们只需要做好数据和视图的关联即可（MVVM）

v-text 和 v-html

v-text：将数据输出到元素内部，如果输出的数据有 HTML 代码，会作为普通文本输出
v-html：将数据输出到元素内部，如果输出的数据有 HTML 代码，会被渲染


<div id="app">
    v-text:<span v-text="hello"></span> <br /> 
    v-html:<span v-html="hello"></span> </div>
    <script src="./node_modules/vue/dist/vue.js"></script> 
    <script> 
        let vm = new Vue({ 
            el: "#app", 
            data: { 
                    hello: "<h1>大家好</h1>" 
                   } 
                }) 
     </script>

效果：

v-bind

html 属性不能使用双大括号形式绑定，我们使用 v-bind 指令给 HTML 标签属性绑定值；而且在将 `v-bind` 用于 `class` 和 `style` 时，Vue.js 做了专门的增强。

1) 使用v-bind绑定class


<div class="static" v-bind:class="{ active: isActive, 'text-danger' : hasError }"> </div> 
    <script> 
        let vm = new Vue({ 
            el: "#app", 
            data: 
                { 
                 isActive: true, 
                 hasError: false 
                } 
        }) 
    </script>

2) 使用v-bind绑定style


<div id="app" v-bind:style="{ color: activeColor, fontSize: fontSiz e + 'px' }"></div> <script> 
    let vm = new Vue({ 
             el: "#app", 
             data: { 
                  activeColor: 'red',
                  fontSize: 30 
                    } 
                 }) 
</script>

3) v-bind的缩写

可以使用：进行v-bind的缩写。


<div id="app" :style="{ color: activeColor, fontSize: fontSize + 'px' }" 
:user="userName"> 
</div>

v-model

v-text、v-html、v-bind这些指令是单向的绑定，数据影响了视图渲染，但是反过来就不行。而v-model 是双向绑定，视图（View）和模型（Model）之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前 v-model 的可使用元素有：

- input

- select

- textarea

- checkbox

- radio

- components（Vue 中的自定义组件）


<div id="app"> 
    <input type="checkbox" v-model="language" value="Java" />Java<br /> 
    <input type="checkbox" v-model="language" value="PHP" />PHP<br /> 
    <input type="checkbox" v-model="language" value="Swift" />Swift<br /> 
    <h1>你选择了：{{language.join(',')}} </h1> 
</div>
<script src="../node_modules/vue/dist/vue.js"></script> 
    <script type="text/javascript"> 
        let vm = new Vue({ 
                el: "#app", 
                data: { 
                        language: [] 
                       } 
                }) 
</script>

通过上述的代码就可以实现一个简单的v-model的效果。

多个`CheckBox`对应一个 model 时，model 的类型是一个数组，单个 checkbox 值默认是 boolean 类型。radio 对应的值是 input 的 value 值。text` 和`textarea` 默认对应的 model 是字符串。`select`单选对应字符串，多选对应也是数组。

v-on

随着事件处理器的逻辑变得愈发复杂，内联代码方式变得不够灵活。因此 v-on 也可以接受一个方法名或对某个方法的调用。

v-on 指令用于给页面元素绑定事件。语法： v-on:事件名="js 片段或函数名"


<div id="app"> 
    <!--事件中直接写 js 片段--> 
    <button v-on:click="num++">点赞</button> 
    <!--事件指定一个回调函数，必须是 Vue 实例中定义的函数--> 
    <button v-on:click="decrement">取消</button> 
    <h1>有{{num}}个赞</h1> 
</div> 
<script src="../node_modules/vue/dist/vue.js"></script> 
<script type="text/javascript"> 
    let vm = new Vue({ 
        el: "#app", 
        data: { 
            num: 100 
        },
        methods: {
        decrement() { 
            this.num--; //要使用 data 中的属性，必须 this.属性名 
        } 
    } 
}) 
</script>

另外，事件绑定可以简写，例如`v-on:click='add'`可以简写为`@click='add'`

v-for

遍历数据渲染页面是非常常用的需求，Vue 中通过 v-for 指令来实现。

语法：v-for="item in items"

items ：要遍历的数组，需要在 vue 的 data 中定义好。

item ：迭代得到的当前正在遍历的元素


<div id="app"> 
    <ul>
        <li v-for="user in users"> 
            {{user.name}} - {{user.gender}} - {{user.age}} 
        </li> 
    </ul> 
</div> 
<script src="../node_modules/vue/dist/vue.js"></script> 
<script type="text/javascript"> 
    let app = new Vue({ 
        el: "#app", 
        data: { 
            users: [ 
                { name: '柳岩', gender: '女', age: 21 }, 
                { name: '张三', gender: '男', age: 18 }, 
                { name: '范冰冰', gender: '女', age: 24 }, 
                { name: '刘亦菲', gender: '女', age: 18 }, 
                { name: '古力娜扎', gender: '女', age: 25 } 
            ] 
        },
     }) 
</script>

通过上述的代码便可实现对数组中各个元素的遍历，并将其渲染出来。

v-if 和 v-show

v-if，顾名思义，条件判断。当得到结果为 true 时，所在的元素才会被渲染。

v-show，当得到结果为 true 时，所在的元素才会被显示。

语法：v-if="布尔表达式", v-show="布尔表达式"


<div id="app"> 
    <button v-on:click="show = !show">点我呀</button> 
    <br> 
    <h1 v-if="show"> 
        看到我啦？！ 
    </h1> 
    <h1 v-show="show"> 
        看到我啦？！show 
    </h1> 
</div> 
<script src="../node_modules/vue/dist/vue.js"></script> 
<script type="text/javascript"> 
    let app = new Vue({ 
        el: "#app", 
        data: { 
            show: true 
        } 
    }) 
</script>

v-if 和 v-show的区别：v-if 是“真正”的条件渲染，而v-if 是惰性的：直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。

四、结束

本文主要是对Vue的一些基础知识，以及常见指令的介绍。如果想更加深入的学习Vue可以查看官网的教程：简介 | Vue.js

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/582353