Vue.js入门及技术指南

最新推荐文章于 2023-08-31 07:47:52 发布

云焰

最新推荐文章于 2023-08-31 07:47:52 发布

阅读量208

点赞数

分类专栏： Web开发文章标签： vue.js 前端前端框架

本文链接：https://blog.csdn.net/yan_dk/article/details/104135161

版权

Web开发专栏收录该内容

65 篇文章 2 订阅

订阅专栏

初识Vue.js

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

Vue 只关注视图层，采用自底向上增量开发的设计。

本人认为，Vue是一个前端框架，有自己的模板语法，我们知道，传统的视图层是使用后端的模板标签来实现前端的展现逻辑，而Vue是有自己的模板语法，可以不依赖于后端来展现在前端页面，它有自己的模板语法、还有计算函数、事件监听处理、表单处理、路由、其他组件等。这也要求使用该框架开发人员需要更多的编程经验，原本传统开发前端人员对编程不太熟悉，不过这对于前后端分离开发是一种不错的方案。

参考地址：Vue.js 教程 | 菜鸟教程

安装

下载地址：https://vuejs.org/js/vue.min.js

示例应用

目录结构

文件test_vue.html代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - </title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

运行结果：

vue语法注意点

点击事件使用 @click，如：<input type="button" class="btn " value="搜索" @click='to_sele'>
页面显示值需要使用{{ }} ，如：<td>{{item.name}}</td>
输入值使用:value，如：<input type="radio" name="rd_sele" :value="item.id">。如果使用{{item.id}}，则会解析不出来

缩写的用法小结

v-on: 缩写为: @

V-bind:可缩写为：冒号:

@代表vue源码目录路径，在项目中一般为src目录

vm.$data === data // => true

vm.$el === document.getElementById('example') // => true

v-model原理

vue 中v-model原理及应用

https://blog.csdn.net/yun_hou/article/details/86313212

v-model用于表单数据的双向绑定，相当于v-bind,v-on综合功能指令。

vue生命周期原理

超详细vue生命周期解析(详解)

https://blog.csdn.net/weixin_42707287/article/details/111641286?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link

Vue生命周期(11个钩子函数)

https://blog.csdn.net/Sheng_zhenzhen/article/details/104623260?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link

vue生命周期是从创建、更新、渲染、销毁。vue是通过构建数据的一个框架，周期是起点到终点的一个过程的进程，生命周期是生命从出生到结束的过程。

VUE组件通信原理

Vue组件间通信6种方式

https://www.cnblogs.com/fundebug/p/10884896.html

父子通信：
父向子传递数据是通过 props，子向父是通过 events（$emit）；通过父链 / 子链也可以通信（$parent / $children）；ref 也可以访问组件实例；provide / inject API；$attrs/$listeners
兄弟通信：
Bus；Vuex
跨级通信：
Bus；Vuex；provide / inject API、$attrs/$listeners

vue 组件间通信的几种方式，如 props、$emit/$on、vuex、$parent / $children、$attrs/$listeners和 provide/inject。

Vue渲染页面原理

Vue是如何渲染页面的，渲染过程以及原理代码

https://www.cnblogs.com/ypinchina/p/7238402.html

渲染逻辑并不是特别复杂，核心关键的几步流程还是非常清晰的：

new Vue，执行初始化
挂载$mount方法，通过自定义Render方法、template、el等生成Render函数
通过Watcher监听数据的变化
当数据发生变化时，Render函数执行生成VNode对象
通过patch方法，对比新旧VNode对象，通过DOM Diff算法，添加、修改、删除真正的DOM元素

其他-Promise

大白话讲解Promise（一）

https://www.cnblogs.com/lvdabao/p/es6-promise-1.html

前端基础进阶（十五）：透彻掌握Promise的使用

https://www.jianshu.com/p/fe5f173276bd

Promise async/await

https://www.jianshu.com/p/3a8e36dbc752