VUE框架知识基础

最新推荐文章于 2024-04-22 01:22:13 发布

努力找工作的小白

最新推荐文章于 2024-04-22 01:22:13 发布

阅读量292

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44482951/article/details/127412047

版权

本文简要介绍了前端的MVC和MVVM设计模式，重点讲解了VUE框架，它是基于MVVM模式的流行前端框架。通过引入Vue.js文件，可以开始在项目中使用。文中还提及了Vue的基本格式、运行原理以及常用的指令，如插值、v-text、v-model等。

摘要由CSDN通过智能技术生成

VUE框架知识点基础

VUE框架

在说VUE框架之前那先简单介绍一下MVC和MVVM的设计模式：

前端MVC设计模式：

MVC设计模式是将实现一个业务的所有代码划分为三部分
M: Model 模型,指数据模型, 前端数据一般都来自于服务器
V: View 视图, 指页面相关代码
C: Controller 控制器, 指将数据展示到页面中的过程代码
MVC设计模式中的C控制器部分将数据展示到页面中的过程中需要频繁进行DOM相关操作(遍历查找元素),频繁进行DOM操作浪费资源, MVVM设计模式就是为了解决此问题而诞生的

前端MVVM设计模式：

M: Model 模式,指数据模型, 前端数据一般都来自于服务器
V: View 视图, 指页面相关代码
VM: ViewModel 视图模型, 视图模型将页面中可能发生改变的元素和某个变量在内存中进行绑定,当需要改变页面中的元素的之后只需要从内存中找到对应的元素即可, 不需要频繁的遍历查找,从而提高了执行效率

VUE框架

VUE框架是目前最流行的前端框架之一, 是基于MVVM设计模式的框架，现在只是简单介绍，需要引入一个js文件，将文件下载好加入自己的项目页面中即可，之后学习VUE脚手架后会方便很多。

引入VUE的框架地址：建议引入第一个，不行时也可以使用其他的
1. Staticfile CDN(国内): https://cdn.staticfile.org/vue/2.2.2/vue.min.js
2. unpkg：https://unpkg.com/vue@2.6.14/dist/vue.min.js
3. cdnjs：https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

基本格式：

<body>
  <div>
    <!--绑定页面的变量-->
  <h1>{
  {info}}</h1>
</div>
</body>
<!--从CDN引入VUE的框架文件-->
<script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
  let v = new Vue({
     
    el:"body>div",//设定管理范围
    data:{
     
      info:"Hello"//设置变量
    }
  })
</script>

VUE框架的运行原理:

Vue对象相当于是MVVM设计模式的VM(视图模型),负责将页面中可能发生改变的元素和某个变量进行绑定, 同时会不断的监听变量值的改变,当变量的值发生改变时Vue对象会从绑定关系中找到变量所对应的页面元素并将元素内容进行改动

VUE相关指令

注：下面的测试仅显示代码，自己测试时须引入vue框架

{ {变量}}: 插值, 让此处的文本内容和变量进行绑定

<div>
    <h1>{
    {info}}</h1>
</div>

<script>
  let v = new Vue({
       
    el:"body>div",//设定管理范围
    data:{
       
      info:"Hello"//设置变量
    }
  })
</script>

v-text=“变量”: 让元素的文本内容和变量进行绑定

v-html=“变量”: 让元素的标签内容和变量进行绑定

<div id="top">
  {
    {info}}
  <p v-text="info"></p>
  <p v-html="info"></p>
<!--两种操作方式区别是如果变量中添加标签时，text会正常显示所有内容，不会发生改变
     而html则会将标签处理后进行显示-->
</div>

<script>