vue基础

1. 什么是vue.js

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

2. 为什么学习流行框架

（1）使用框架，能够提高开发的效率；
（2）提高开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> 流行框架
（3）能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】

3. 框架和库的区别

（1）框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
（2）库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

4. MVC与MVVM的区别

MVC 是后端的分层开发概念;
M: model模型层： 与数据库做交互
V： view 视图层： 逻辑处理和数据展示
C: controller 调度层： 接收、响应返回数据

MVVM是前端视图层的概念，主要关注于视图层分离
M: Model层：逻辑处理
V: View 数据展示
VM：ViewModel 承上启下

6. v-bind

v-bind界面元素属性值的绑定【绑定元素属性】

7. v-on

(1) 进行事件的绑定，我们用的最多的是click事件绑定
(2) 简写为：@

8.事件修饰符

(1).stop 阻止冒泡
(2).prevent 阻止默认事件
(3).capture 添加事件侦听器时使用事件捕获模式
(4).self 只当事件在该元素本身（比如不是子元素）触发时触发回调
(5).once 事件只触发一次

(1).stop 阻止冒泡

<header @click="log3">
        <aside @click="log2">
            <button @click.stop="log">按钮</button>
        </aside>
    </header>

(2).prevent 阻止默认事件

<header @click="log3">
        <aside @click="log2">
            <button @click.once="log">按钮</button>
        </aside>
    </header>

(3).capture 添加事件侦听器时使用事件捕获模式

<header @click="log3">
        <aside @click.capture="log2">
            <button @click="log">按钮</button>
        </aside>
    </header>

(4).self 只当事件在该元素本身（比如不是子元素）触发时触发回调

 <header @click="log3">
        <aside @click.self="log2">
            <button @click="log">按钮</button>
        </aside>
    </header>

(5).once 事件只触发一次

  <header @click="log3">
        <aside @click.self="log2">
            <button @click="log">按钮</button>
        </aside>
    </header>

9. v-model数据双向绑定

(1)作用：数据双向绑定
(2)注意：绑定的是表单控件
(3)实现了计算器功能

双向绑定的原理

数据双向绑定原理： 是采用数据劫持结合发布者-订阅者模式的方式， 通过Object.defineProperty()来劫持各个属性的setter，getter， 在数据变动时发布消息给订阅者，触发相应的监听回调

计算器的实现（记得引入vue）

html代码片段

<div id="app">
        <!-- <input type="text" :value="value1"> -->
        <input type="text" v-model:value="value1">
        <select name="" id="" v-model="value">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model:value="value2">
        <button @click="add">=</button>
        <input type="text" v-model:value="value3">
    </div>

js部分代码

<script>
    // 实例Vue
    var vm = new Vue({
        el: '#app',
        data: {
            value1: '',
            value2: '',
            value3: '',
            value: '+'
        },
        methods: {
            add() {
                switch (this.value) {
                    case '+':
                        this.value3 = Number(this.value1) + Number(this.value2)
                        break;
                    case '-':
                        this.value3 = Number(this.value1) - Number(this.value2)
                        break;
                    case '*':
                        this.value3 = Number(this.value1) * Number(this.value2)
                        break;
                    case '/':
                        this.value3 = Number(this.value1) / Number(this.value2)
                        break;
                }
            }
        }
    })
</script>

最后

以上就是默默白猫为你收集整理的vue基础的全部内容，希望文章能够帮你解决vue基础所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。