HTML+JS框架下开发与VUE框架下开发最基础的区

HTML+JS框架下开发与VUE框架下开发最基础的区别

天我来谈谈我对传统HTML与VUE的区别理解(不谈太深的区别，查了一下网上那些说的都一样，我只谈很多人最关心的不一样的，说不对请理解,对不太了解或想了解VUE的人)。

1、什么是vue

官网介绍：vue是一套构建用户界面的渐进式框架。它与其他重量级框架不同的是，vue采用自下而上增量开发的设计。Vue的核心库只关注视图层，非常容易学习，非常容易与其他库或已有项目整合。

Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图层组件。

2、什么是HTML(HTML5)

HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。

总结：它们相同的地方就一句话:用途和结果都是一样的，不管是VUE还是HTML，最终都是将数据使用各种UI及方式展现给用户，也就是都是视图层页面的。

有人会说使用HTML和VUE开发有什么区别呢？许多人觉得结果都是视图层表达，而且VUE打包发布后不还是HTML+一堆JS文件，而且还要引入导入编译感觉特麻烦，感觉VUE好难，为什么要学VUE？

1、开发和部署

VUE 开发过程确实挺麻烦的，要安装依赖，要npm一堆包(还经常失败)。而HTML就简单多了，直接就拿来主意，下载下来，改改就用。

部署的话都差不多，都是在任何服务上都可以直接使用，而且都没有什么依赖。

但是我觉得VUE的开发类似于开发一个APP，所以他的打包结果是比纯HTML+JS更安全的，相当于做过混淆，因而他发布后的体积更小。

2、数据通讯

HTML+JS 数据POST,GET 等基本访问方式，但是如果直接在HTML中使用数据判断，或数据循环输出必须借助js,jquery等通过前端处理然后对id进行赋值操作，所以一般只能借助动态语言如php,java,.net等语言环境进行转化，但这样使得web对动态语言环境依赖性过强，造成后端迁移时太过于复杂，而且这样的Web一般要求前端和后端部署在一起。

VUE则不依赖于动态语言输出环境，只要是双方约定了数据传输接口，服务器放在哪里，不管使用什么后台语言都没关系，因而他的灵活性更强。

3、安全性

有些产品有些公司对语言是有选择的，主要是不想让代码暴露太多，而HTML+JS的方式往往是达不到要求的，因而现在许多企业还是在使用桌面软件的形式，又或者是要你使用对方的云服务，而私有云部署则要贵的很多，而且比较贵的软件还要安装秘钥软件，加密狗等方式，无非就是防止你将软件转移或无限使用或获取他的核心算法（虽然js也是有混淆方法的，但很少有人会这么做，我也没试过但是很影响效率）。

以前我在一个公司就是加班写了一个WEB程序里边有一个算法是分析公司产品结构的（那时VUE还不盛行），正好呢又遇到一个懂点的老板(居然会用F12)，结果看到核心代码了，当时就否定了，改用了WinForm 重写，那个辛苦你懂的。

VUE的打包的话，其实就是根据在页面中所使用到的组件然后根据你的逻辑关系等进行混淆打包，然后在用户加载时按需进行加载解析，从某种意义上来说做WEB是一种保护。我觉得这与桌面程序及APP打包效果是一样的(软件和APP也是可以反编译嘛，反编译后的结果就是混淆)，当然不说加密混淆了。

现在国内出现了像DCloud、APICloud（虽然这二家经常打架，毕竟相似度很高，我不做评论，但不可否认对一个只会写HTML+JS的人转写APP是一个不错的选择）这些由HTML5开始的跨平台软件也开始支持VUE了。

最后附上VUE打包后的调试预览图，纯HTML的就不多说了，自己F12吧。

者 | 红颜祸水nvn

责编 | 唐小引

出品 | CSDN 原力计划

1. 什么是 MVVM？

MVVM 是 Model-View-ViewModel 的缩写，MVVM 是一种设计思想。Model 层代表数据模式，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化为 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。

2. 父组件向子组件传值的方法？

父组件传递的数据子组件用 props 方法接收。

子组件通过两种方式接收：可以传递任何类型（数组，对象，各种数据类型等等）

props:[‘title’,‘likes’,‘isPublished’,‘author’]；
props:{title:String,likes:Number}

详细介绍看这篇：Vue 父组件向子组件传值

https://blog.csdn.net/qq_34928693/article/details/80539350

3. 子组件向父组件传值的方法？

子组件向父组件传值用 this.$emit(key,value) ，父组件接收的时候需要在父组件中创建的子组件的标签中绑定 Key，格式:@Key=“方法名”，父组件声明这个方法，方法带参数，这个参数就是子组件传递的 Value。

详细介绍看这篇：Vue子组件向父组件传值

https://blog.csdn.net/sisi_chen/article/details/81635216

4. Vuex 是什么？哪种功能场景使用它？

Vuex 是专门为 Vue.js 设计的状态管理模式，它采用集中式储存管理 Vue 应用中所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

当项目庞大的时候使用它：

需要动态的注册响应式数据；
需要命名空间 namespace 来管理组织我们的数据；
希望通过插件，来更改记录；方便测试；以上这些需要和希望，都是我们 vuex 需要做的一些事情。

5. Vuex 有哪几种属性？

state：基本数据
getters：从基本数据派生的数据
mutations：提交更改数据的方法，同步！
actions：像一个装饰器，包裹 mutations，使之可以异步。
modules：模块化 Vuex。

6. 如何让 CSS 旨在当前组件中起作用？

当前组件的 < style>标签修改为< style scoped>

7. 请列举出3个 Vue 中常见的生命周期钩子函数。

beforeCreate：Vue 实例的挂载元素 $el 和数据对象 data 都为未定义，还未初始化。
created：vue 实例的数据对象 data 有值了，$el 没有。
beforeMount：vue 实例的 $el 和 data 都初始化了，但还是虚拟的 dom 节点，具体的 data.filter 还未替换掉。
mounted：vue 实例挂载完成，data.filter 成功渲染
beforeUpdate：data 更新时触发。
updated：data 更新时触发。
beforeDestroy：组件销毁时触发。
destroyed：组件销毁时触发，vue 实例解除了事件监听以及 dom 的绑定（无响应了），但 DOM 节点依旧存在。

8. Vue 生命周期总共有几个阶段？

beforeCreate 创建前
created 创建后
beforeMount 载入前
mounted 载入后
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后

9. 说出至少 4 种 Vue 当中的指令和它的用法？

v-html：渲染文本（能解析 HTML 标签）
v-text：渲染文本（统统解析成文本）
v-bing：绑定数据
v-once：只绑定一次
v-model：绑定模型
v-on：绑定事件
v-if v-shou：条件渲染

10. vue-cli 工程中常用的 npm 命令有哪些？

npm install：下载 node_modules 资源包的命令
npm run dev：启动 vue-cli 开发环境的 npm 命令
npm run build：vue-cli 生成生产环境部署资源的 npm 命令

11. 请说出 vue-cli 工程中每个文件夹和文件的用处。

build 文件夹：存放 webpack 的相关配置以及脚本文件，在实际开发过程中只会偶尔用到 webpack.base.conf.js，配置 less、babel 等。
config 文件夹：常用到此文件夹下的 config.js (index.js) 配置开发环境的端口号，是否开启热加载或者设置生产环境的静态资源相对路径、是否开启 gzip 压缩、npm run build 命令打包生成静态资源的名称和路径等。
node_modules：存放 npm install 命令下载的开发环境和生产环境的各种依赖。
src文件夹：工程项目的源码以及资源、包括页面图片、路由组件、路由配置、vuex、入口文件等。
其他文件：定义的一些项目信息，说明等等。

12. vue-router 路由的两种模式。

hash 模式：

# 后面的 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新浏览器，每次 hash 值的变化会触发 hashchange 事件。

history 模式：

利用了 HTML5 中新增的 pushState 和 replaceState 方法。这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

13. 如何解决 Vue 中的 ajax 跨域问题？

找到 config 文件夹中的 index.js 文件：

修改 proxyTable: {
'/api':{ //使用 /api 来代替 "http://localhost:8082"
target:'http://localhost:8082', //源地址
changeOrigin:true, //改变源
pathRewrite:{
'^/api':'http://localhost:8082' //路径重写
}
}
},

修改完之后的跨越请求就可以直接写成 /api/login 等等了。

14. Vue 打包命令是什么？Vue 打包后会生成哪些文件？

npm run build ：Vue 打包命令
Vue 打包后会在当前工作目录下生成一个 dist 文件夹，文件夹中会有 static 静态文件以及 index.html 初始页面。

15. Vue 如何优化首屏加载速度？

异步路由加载
不打包库文件
关闭 sourcemap
开启 gzip 压缩

16. scss 是什么？

SCSS 是 Sass 3 引入的新语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能，唯一不同之处是 SCSS 需要使用分号和花括号而不是换行和缩进，SCSS 对空白符号不敏感。

17. axios 是什么？怎么使用？

axios 是一个基于 promise 的 HTTP 库，可以发送 get，post 请求，正是由于 Vue、React 的出现，促使了 axios 轻量级库的出现

特定：

可以在浏览器中发送 XMLHttpRequest 请求
可以在 node.js 发送 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应
转换请求数据和响应数据
能够取消请求
自动转化 JSON 格式
客户端支持保护安全免受 XSRF 攻击

如何使用：

npm install --save axios 安装axios
在入口 main.js 中导入 axios

import Axios from 'axios'

Vue.propertype.$axios=Axios;

使用 axios 发送 get 请求

this.$axios.get('/user?stu_id=1002').then(function(resp) {
console.log(resp);
}).catch(function(err) {
console.log(err);
});

使用 axios 发送 post 请求 post原生请求在后端是接收不到参数的，所有有两种解决方案，这里只写一种！第二种解决方案是用 QS。

var params=new URLSearchParams;
params.append('name','孙悟空');
params.append('age',22);
let that=this;
this.$axios.post('http://localhost:8082/user',params).then(function(resp) {
console.log(resp.data.users);
that.ausers=data.data.users;
}).catch(function(err) {
console.log(err);
});

18. vue-router 是什么？它有哪些组件？

vue-router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由、是图标
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过度系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的连接
HTML 5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

vue-router 组件：

< router-link to=""> 路由的路径
< router-link :to="{name:’‘l路由名’}"> 命名路由
< router-view> 路由的显示

19. 怎么定义 vue-router 的动态路由？怎么获取传递过来的动态参数？

在 router 目录下的 index.js 文件中，对 path 属性加上 /:id。使用 router 对象的 params.id，例如：this.$route.params.id。

20. MVVM 和其他框架（jQuery）的区别是什么？哪些场景适合？

Vue 是数据驱动，通过数据来显示视图层而不是节点操作。
处理数据交互的时候挺适合 MVVM 设计模式的。

本文为CSDN博主「红颜祸水nvn」的原创文章，CSDN 官方经授权发布。

原文链接：https://blog.csdn.net/qq_43647359/article/details/104774302

欢迎更多的开发者朋友加入 CSDN 原力计划！我们将用全新的方式来释放更多的流量，让优质、有深度、丰富有趣的内容得到精准的流量扶持，同时也帮助创作者和粉丝有更多互动和交流。点击下方图片了解详情。

?比尔·盖茨退出微软公司董事会；苹果 WWDC、微软 Build 大会均改为线上举办；Rust 1.42.0 发布| 极客头条

?11 国股市熔断，“祸及”程序员？！

?2.2版本发布！TensorFlow推出开发者技能证书

?Soul App 高管被捕，恶意举报导致竞品被下架

?2020 年最新版 68 道Redis面试题，20000 字干货，赶紧收藏起来备用！

?最近一个名为 BTCU 的比特币分叉，准备用新分叉解决比特币网络的旧问题

天是2021.7.14,是个好日子.好久没发布文章了.今天发布下如何在在html页面中使用vue3.义县游学电子科技一直以技术文章为主.以下是h5的页面源码:

<html>
<script src="https://unpkg.com/vue@next"></script>

<body>
<div id="vue">
<div v-html="rhtml"></div>
<props-demo-simple></props-demo-simple>

</div>

</body>
<script>
const htmls={
data(){
return{
rhtml:"<h1>html页面中引用VUE3的演示页面</h1>",
}
}
}

const app=Vue.createApp(htmls)

// 简单语法注册或获取全局组件.注册还会自动使用给定的 id 设置组件的名称
app.component('props-demo-simple', { data() {
return {
count: 0
}
},
props: ['size', 'myMessage'],template: `
<button v-on:click="count++">
You clicked me {{ count }} times.
</button>`
}

)
app.mount("#vue")
</script>
</html>

分析下:首先<script src="https://unpkg.com/vue@next"></script>,引入vue3的脚本地址. 然后在body下的<script>中书写vue3的代码即可. 下图是运行的结果效果

在线咨询

上一篇：原本，一键去除文件图片灰底，轻松还原文档本来模样
下一篇：CSS 伪元素基础知识：first-line、fir

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML+JS框架下开发与VUE框架下开发最基础的区

您的项目需求