Vue简述

然燃
573 阅读3分钟

这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战

一.vue 是什么？

  • vue 的官方网站介绍：
    • 是一套用于构建用户界面的 框架
    • Vue 的核心库只关注视图层
  • vue 是一种 MVVM 模式 框架，理解这点非常重要。学习一个框架最重要的就是了解其思想，其他都只是其思想的扩展。MVVM 模式已有很多介绍，此处不再赘述，在vue中的体现主要是
graph LR
view --> viewModel --> Model
DOM --> VirtualDom --> data,vuex...

二.如何去使用它

主要分为两步，先安装，然后使用

1.安装

(1). 可以通过script标签的方式去引入，参考官网

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 --> 
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

(2). 通过npm的方式使用

npm i vue -S

2.vue的基本结构

(1) 最基础的使用

// hellovue.html
<body>
    <div id="app">
        {{ message }}
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
  • 用浏览器打开这个html

image.png

  • el: 需要挂载到的页面元素，也可以使用$mount进行挂载
  • data：页面展示的数据

(2) 用render函数添加虚拟DOM


// render.html

<body>
    <div id="app">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    new Vue({
        data: {
            person: {
                name: 'Tom',
                address: 'earth'
            },
        },
        render(h) {
            return h('div', [
                h('p', '名称:' + this.person.name),
                h('p', '地址:' + this.person.address)
            ])
        },
    }).$mount("#app")
</script>
  • 用浏览器打开这个html

image.png

  • h函数创建虚拟DOM，第一个参数是创建的标签名，第二参数个是创建标签的内容。至于为什么叫h函数，是因为vue2.x的virtual DOM是在snabbdom的基础上进行修改的，后续我们可以看看snabbdom库
  • $mount通过传入标签的id，挂载到指定的DOM节点上。

三.vue的的生命周期

  • init: 初始化，初始化生命周期的成员，事件，方法
  • beforeCreate
  • init: props，data，methods注册到Vue的实例上
  • create: 可以访问到上一步创建的props，data，methods等成员，Vue实例创建完毕
  • 将模板编译成render函数：看是否有el选项，没有就执行$mount
  • 将template编译到render函数中，render渲染函数会生成虚拟DOM。这里会判断有没有写template，有就执行编译成render，没有就将el外部的html当成template
  • beforeMount: 挂载之前的函数，在这里，无法获取新元素的内容
  • 把新的元素渲染到页面上，触发mounted函数，mounted中可以访问到新的元素内容
  • 当data改变，首先触发beforeUpdate函数，进行新旧虚拟DOM对比，将新内容重新渲染
  • update: 在beforeUpdate中，还是上一次的页面结构，想获取最新一次的内容，需要在update中访问
  • beforeDestory: 调用vm.$destroy()函数时触发，执行一些清理的操作，最后触发destory钩子函数

四.常用语法和概念

  • 差值表达式：可以用{{}}把data中的成员，显示在模板中。如果内容中有任何html的内容，会转义成文本。如果需要输出成html，可以使用v-html指令
  • 计算属性：当模板中有太多的数据需要处理的时候，推荐使用计算属性，计算属性的值会被缓存，下次再访问的时候，会从缓存中获取结果。
  • 侦听器：监听数据的变化去做一些操作。
  • 条件渲染： v-if和v-show可以控制元素的显示和隐藏，当两个都为false时，页面都不会显示元素。但不同的是，v-if不会输出相应的元素，v-show会渲染到页面，通过样式进行隐藏。
  • 列表渲染: v-for，Vue推荐每个循环项都设置一个key，跟踪每个节点的身份，让每个节点能最大程度的被重用，提高性能。
  • 表单输入绑定：使用v-model绑定表单元素，负责去监听用户的输入事件以及更新数据，也就是双向绑定。
  • 组件：组件是可复用的Vue实例，一个组件封装了html，css，js。可以实现页面上的一个功能区域，可以无限次的被重用。
  • 插槽： 在自定义组件中进行占位，表示可以插入的位置，使用的时候进行传入。比如vue-router-link中的文本。
  • 插件：vue-router和vuex都是插件，通过插件扩展Vue的功能，需要遵循Vue的插件规则。
  • 混入mixin： 如果不同的组件都有相同的选项，那就可以使用混入，把相同的选项进行合并。让组件重用的一种方式。
  • 响应式原理：（待填）
avatar
文章
阅读
粉丝