文档章节

Vue核心概念及特性 (一)

前端优选
 前端优选
发布于 10/18 22:24
字数 1057
阅读 30
收藏 1

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。

> 特点: 易用,灵活,高效,渐进式框架。

前端优选

> 可以随意组合需要用到的模块 vue + components + vue-router + vuex + vue-cli

一.Vue的概念和特性

1.什么是库,什么是框架?

  • 库是将代码集合成一个产品,我们可以调用库中的方法实现自己的功能。
  • 框架则是为解决一类问题而开发的产品,我们在指定的位置编写好代码,使用时框架帮我们调用。

框架与库之间最本质区别在于控制权:you call libs, frameworks call you.

> Vue属于框架

2.MVC模型 && MVVM模型

前端优选

在传统的mvc中除了model和view以外的逻辑都放在了controller中,导致controller逻辑复杂难以维护,在mvvm中view和model没有直接的关系,全部通过viewModel进行交互

> Vue是MVVM模式

3.声明式和命令式

  • 自己写for循环就是命令式 (命令其按照自己的方式得到结果)
  • 声明式就是利用数组的方法forEach (我们想要的是循环,内部帮我们去做)

二.Vue的基本使用

1.mustache语法

允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。在使用数据前需要先声明:

  • 编写三元表达式
  • 获取返回值
  • JavaScript 表达式
<div id="app">
    {{ 1+1 }}
    {{ msg == 'hello'?'yes':'no' }}
    {{ {name:1} }}
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
    el:'#app',
    data:{
        msg:'hello'
    }
})
</script>

2.响应式数据变化

Vue中使用Object.defineProperty重新将对象中的属性定义,如果是数组的话需要重写数组原型上的方法

function notify() {
    console.log('视图更新')
}
let data = {
    name: 'youxuan',
    age: 18,
    arr: [1,2,3]
}
// 重写数组的方法
let oldProtoMehtods = Array.prototype;
let proto = Object.create(oldProtoMehtods);
['push', 'pop', 'shift', 'unshift'].forEach(method =&gt; {
    proto[method] = function (...args) {
        let inserted;
        switch (method) {
            case 'push':
            case 'unshift':
                inserted = args;
                break;
        }
        observerArray(inserted)
        notify();
        oldProtoMehtods[method].call(this, ...args)
    }
})
function observerArray(obj) { // 观察数组中的每一项
    for (let i = 0; i &lt; obj.length; i++) {
        observer(obj[i]);
    }
}
function observer(obj) {
    if(typeof obj !== 'object'){
        return obj
    }
    if (Array.isArray(obj)) {
        obj.__proto__ = proto
        observerArray(obj);
    }else{
        for (let key in obj) {
            defineReactive(obj, key, obj[key]);
        }
    }
}
function defineReactive(obj, key, value) {
    observer(value); // 再一次循环value
    Object.defineProperty(obj, key, { // 不支持数组
        get() {
            return value;
        },
        set(val) {
            notify();
            observer(val);
            value = val;
        }
    });
}
observer(data);
data.arr.push({name:'jw'})
console.log(data.arr);

· 缺陷

  • 不能通过通过长度、索引改变数组
  • 不能给对象新增属性
  • 需要通过vm.$setvm.$delete方法强制添加/删除响应式数据

3.Vue实例上的方法

  • vm.$el;
  • vm.$data;
  • vm.$options;
  • vm.$nextTick();
  • vm.$mount();
  • vm.$watch();
  • vm.$set();

三.Vue中的指令

在vue中 指令 (Directives) 是带有 v- 前缀的特殊特性,主要的功能就是操作DOM

1.v-once

<div v-once>{{state.count}} </div>

2.v-html

永远不要对用户输入使用v-html,可能会导致xss攻击

<div v-html="text"></div>

3.v-bind

动态绑定属性需要使用v-bind进行绑定

<img v-bind:src="src" src="">

> 可以使用:来简写 v-bind

4.v-for

<template v-for="(fruit,index) in fruits">
    <li :key="`item_${index}`">{{fruit}}</li>
    <li :key="`fruit_${index}`">{{fruit}}</li>
</template>

> 多个元素循环时外层需要增加template标签,需要给真实元素增加key,而且key不能重复,尽量不要采用索引作为key的值

举个key值的例子:

前端优选

5.v-if/v-else/v-show

v-if可以切换DOM元素是否存在,并且v-iffalse时内部指令不会被执行
v-show可以控制元素的显示及隐藏,主要控制的是元素样式

6.v-on

  • 事件的绑定 v-on绑定事件
  • 事件修饰符 (.stop .prevent) .capture .self .once .passive

7.v-model

双向数据绑定

<input type="text" :value="value" @input="input">
<input type="text" v-model="value">

四.面试题环节

  • 请说下对于MVVM的理解
  • Vue实现数据双向绑定的原理
  • Vue常用的指令有哪些
  • v-model的原理
  • v-if 和 v-show 区别
  • Vue中 key 值的作用

> 欢迎关注 [ 前端优选 ] 精彩文章,等你来看! > webyouxuan

© 著作权归作者所有

前端优选
粉丝 1
博文 8
码字总数 14008
作品 0
海淀
高级程序员
私信 提问
Vue.js 新手入门教程之环境搭建(一)

本文相关引用来自Vue官网 https://cn.vuejs.org/ 作为一个Java后端程序员觉得有必要了解一下当前流行的Vue框架(PS:公司目前后台管理系统前端用的是老掉牙的easyui~囧),是时候更新换代了。...

青小城
2018/10/19
0
0
Vue新手向:14篇教程带你从零撸一个Todo应用

欢迎来到 Vue2.x Todo 系列教程,这个教程将手把手教你从零开始使用 Vue 搭建一个 Todo(待办事项)应用。 书写此教程的动机 Vue 作者尤雨溪在 新手向:Vue 2.0 的建议学习顺序 中给出了中肯...

追梦人物
01/16
0
0
vue.js快速入门。

什么是Vue.js   Vue.js是一个构建数据驱动的web界面的库。技术上,它重点集中在MVVM模式的ViewModel层,因此它非常容易学习,非常容易与其它库或已有项目整合。   Vue.js的目标是通过尽可...

笔阁
2015/12/23
10.3K
2
Vue 3.0 和 Vue 2.0的对比以及Vue 2.0精讲以及Vue全家桶精讲

前言 最近在整理Vue的一些内容,包括Vue 3.0新特性,Vue 2.0的一些特性以及实现方法,还有Vue全家桶的内容,涉及到的内容较多所以找个机会发篇文章,把要点全部讲出来.综合整理下这样看着也舒服,...

大湿兄
07/27
0
0
我为什么放弃 React 而使用 Vue?

现在,Vue.js 在 Github 上得到的星星数已经超过了 React。这个框架的流行度在不断增长,由于它并没有像 Facebok(React)或 Google(Angular)那样的大公司支持,这种增长让人非常惊讶。 我...

程序师
2018/07/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

BigDecimal 去后面无用的0的方法

BigDecimal a=new BigDecimal("0.1000"); System.out.println(a.stripTrailingZeros().toPlainString());...

xiaodong16
26分钟前
5
0
JAVA--高级基础开发

[集合版双色球] 十二、双色球规则:双色球每注投注号码由6个红色球号码和1个蓝色球号码组成。红色球号码从1—33中选择;蓝色球号码从1—16中选择;请随机生成一注双色球号码。(要求同色号码...

李文杰-yaya
昨天
16
0
聊聊rocketmq broker的CONSUMER_SEND_MSG_BACK

序 本文主要研究一下rocketmq broker的CONSUMER_SEND_MSG_BACK CONSUMER_SEND_MSG_BACK rocketmq/common/src/main/java/org/apache/rocketmq/common/protocol/RequestCode.java public class......

go4it
昨天
3
0
API常见接口(下)

system类 StringBuilder和StringBuffer 包装类 1.System类 (java.lang包中) 提供了大量的静态方法,可以获取与系统相关的信息或系统级操作。 常用方法: public static long currentTimeMi...

Firefly-
昨天
4
0
MySQL系列:一句SQL,MySQL是怎么工作的?

对于MySQL而言,其实分为客户端与服务端。 服务端,就是MySQL应用,当我们使用net start mysql命令启动的服务,其实就是启动了MySQL的服务端。 客户端,负责发送请求到服务端并从服务端获取数...

杨小格子
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部