vue每日进阶--vue新手入门

最新推荐文章于 2021-10-31 23:22:22 发布

图解前端

最新推荐文章于 2021-10-31 23:22:22 发布

阅读量1.2k

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/webofrxy/article/details/80821334

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

vue.js 是什么

vue是一套用于构建用户界面的渐进式框架，vue被设计为自底向上逐层应用。vue的核心库只关注视图层，也就是平时所说的view层，这样便于开发人员快速上手，还有利于和第三方库或者既有项目整合。

vue和react相比哪个更好呢

核心架构比较

vue和react有许多相似之处，例如：
1. 使用了Virtual DOM
2. 提供了了响应式（Reactive）和组件化（ComPosable）的视图组件
3. 将注意力集中保持在核心库，将其他功能交给其他相关的库，例如：路由（vue-router）和全局状态管理（vuex）

性能比较

直接看图比较直观：
这里写图片描述

优化

在React应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件树。
如要避免不必要的子组件的重渲染，你需要在所有可能的地方使用 PureComponent，或是手动实现 shouldComponentUpdate 方法。同时你可能会需要使用不可变的数据结构来使得你的组件更容易被优化。
在 Vue 应用中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重渲染。你可以理解为每一个组件都已经自动获得了 shouldComponentUpdate，并且没有上述的子树问题限制。
Vue 的这个特点使得开发者不再需要考虑此类优化，从而能够更好地专注于应用本身。

HTML和CSS

HTML

在 React 中，一切都是 JavaScript。不仅仅是 HTML 可以用 JSX 来表达，现在的潮流也越来越多地将 CSS 也纳入到 JavaScript 中来处理。
在 React 中，所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖。

使用 JSX 的渲染函数有下面这些优势：

你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。比如你可以使用临时变量、JS 自带的流程控制、以及直接引用当前 JS 作用域中的值等等。

开发工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的 (比如，linting、类型检查、编辑器的自动完成)。
事实上 Vue 也提供了渲染函数，甚至支持 JSX。然而，vue官方默认推荐的还是模板。任何合乎规范的 HTML 都是合法的 Vue 模板，这也带来了一些特有的优势：

对于很多习惯了 HTML 的开发者来说，模板比起 JSX 读写起来更自然。这里当然有主观偏好的成分，但如果这种区别会导致开发效率的提升，那么它就有客观的价值存在。

基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易。

这也使得设计师和新人开发者更容易理解和参与到项目中。

你甚至可以使用其他模板预处理器，比如 Pug 来书写 Vue 的模板。

组件作用域内的 CSS

除非你把组件分布在多个文件上 (例如 CSS Modules)，CSS 作用域在 React 中是通过 CSS-in-JS 的方案实现的 (比如 styled-components、glamorous 和 emotion)。这引入了一个新的面向组件的样式范例，它和普通的 CSS 撰写过程是有区别的。另外，虽然在构建时将 CSS 提取到一个单独的样式表是支持的，但 bundle 里通常还是需要一个运行时程序来让这些样式生效。当你能够利用 JavaScript 灵活处理样式的同时，也需要权衡 bundle 的尺寸和运行时的开销。

安装

接下来我们学习如何安装vue：

直接用

方法一：
<script src="./assets/js/vue@2.5.16/dist/vue.js"></script>
方法二：
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
方法三：
打开cmd，执行npm install vue

使用

下面是一个入门的简单例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 每日进阶</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/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>

在浏览中运行结果：
这里写图片描述

图解前端

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
vue每日进阶--vue新手入门

vue.js 是什么vue是一套用于构建用户界面的渐进式框架，vue被设计为自底向上逐层应用。vue的核心库只关注视图层，也就是平时所说的view层，这样便于开发人员快速上手，还有利于和第三方库或者既有项目整合。vue和react相比哪个更好呢核心架构比较vue和react有许多相似之处，例如： 1. 使用了Virtual DOM 2. 提供了了响应式（Reactive...
复制链接

扫一扫

专栏目录