文档章节

vue介绍

达达前端
 达达前端
发布于 2019/10/26 16:55
字数 1126
阅读 64
收藏 0

什么是vue vue是一套用于构建用户界面的渐进式框架。

框架和库的区别

库是一种插件,是一种封装好的特定方法的集合。提供给开发者使用,控制器在使用者手里。

框架是一套架构,会基于自身特定向用户提供一套相当完整的解决方案,控制权在框架本身,使用者需要按照框架所规定的某种特定规范进行开发。

目前的流行前端框架

Angular Vue React 流行的一些库jquery ,Zepto

vue作为前端框架的特点

  1. 构建用户界面,只需要关系view层
  2. 易学,轻量快速
  3. 渐进式框架

什么是渐进式? 1.声明式渲染 2.组件系统 3.客户端路由 4.大规模状态管理 5.构建工具

vue优点: 响应式的数据绑定: 当数据发生改变,视图可以自动更新,可以不用关心dom的操作,专心数据操作。

可组合的视图组件: 把视图按照功能切分成若干基本单元。

什么是MVVM

什么是MVC,MVC是后端的分层开发概念,M-modle数据层面,C-controller数据控制层,V-view前端人员的视图层。

什么是MVVM,其中M-保存每个页面中的数据,VM-是一座桥将M和V进行分割,M和V的数据交互都需要它来帮助,V-是每个页面的html。

前端

MVVM是前端视图层的分层开发思想,主要把每个页面,分成了M,V和VM,VM是MVVM的思想的核心,VM是M和V之间的调度者。

前端MVVM的思想是为了让我们开发更加方便,因为MVVM提供了数据的双向绑定,数据的双向绑定时由MV提供的。

M M保存的是每个页面中单独的数据

VM 它是一个调度者,分割了M和V。

V 是每个页面中HTML结构

app.js 项目的入口模块 一切的请求,都要先进入这里进行chuli app.js并没有路由分发的功能,需要调用router.js模块进行路由的分发处理

router.js 路由分发处理模块,只负责分发路由

controller 这是业务逻辑的处理层 在这个模块中,封装了一些具体业务逻辑处理的逻辑代码,但是,为了保证职能单一,此模块只负责处理业务,不负责处理数据的CRUD。

Model层 只负责操作数据库,执行对应sql语句

创建VUE实例

安装: 1.去官网下载指定顶vue版本包 2.使用cdn使用线上版本 3.使用npm进行安装 4.使用CLI脚手架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue cdn 的网址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
    </div>
    <script>
        var vm = new Vue({
            // 也可以绑定docuemnt.getElementById('#app')返回的app对象
            el:"#app",
            data:{
                msg:"第一个案例"
            }
        })
    </script>
</body>
</html>

v-text 能展示对应data中数据内容,也能在数据基础上做运算

v-html -- html标签渲染 容易产生xss攻击 如何防止xss攻击: 1.前端过滤 2.后台转义 3.给cookie 加上属性 http

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue cdn 的网址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-html="msg"></p>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"<span style='color:red'>v-html渲染</span>"
            }
        })
    </script>
</body>
</html>

v-cloak

'v-text' 虽然没有数据加载闪烁问题,但是会将标签中间的数据覆盖,也不能渲 染html格式数据。

'v-html' 谨慎使用会出现xss攻击的风险


若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。


请点赞!因为你们的赞同/鼓励是我写作的最大动力!

欢迎关注达达的简书!

这是一个有质量,有态度的博客

博客

© 著作权归作者所有

达达前端
粉丝 4
博文 226
码字总数 368531
作品 0
广州
程序员
私信 提问
加载中

评论(0)

2019 前端面试 | Vue.js 专题

前端一万小时” 所有,欢迎转载! 转载请注明出处,未经同意,不可修改文章内容。复制代码 🚀本文为“语雀”私有库「前端一万小时」现有文章目录及对应面试题索引, 含未公开发布和写作中的...

itsOli
2019/06/15
0
0
一本让你醍醐灌顶的小册:《Vue.js组件精讲》

三年前,我开始接触 Vue.js 框架,当时就被它的轻量、组件化和友好的 API 所吸引。与此同时,我也开源了 iView 项目。三年的磨(cǎi )砺(kēng),沉淀了不少关于 Vue.js 组件的经验,于是乎,...

Aresn
2018/12/20
0
0
vue项目如何刷新当前页面的方法_vue.js_脚本之家

vue项目如何刷新当前页面的方法 更新时间:2018年05月18日 16:41:06 作者:敲代码的小老头 我要评论 这篇文章主要介绍了vue项目如何刷新当前页面的方法,小编觉得挺不错的,现在分享给大家,...

这篇文章主要介绍了vue项目如何刷新当前页面的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
2018/07/30
0
0
你可能需要的一本前端小册:Vue 项目构建与开发入门

最近抽时间写了一本关于 Vue 的小册:《Vue 项目构建与开发入门》,前前后后断断续续花了大概两个月的时间。作为 Vue 的第一批用户,同时也作为一名专栏作者,虽然我之前写过好几篇关于 Vue ...

劳卜
2018/11/28
0
0
人人都能懂的Vue源码系列(一)—Vue源码目录结构

阅读Vue的源码,或者阅读一个框架的源码,了解它的目录结构都是很有帮助的。下面我们来看看Vue源码的目录结构。 Vue各目录简介 Vue源码各个目录的详细介绍 熟悉每个模块具体的功能,对之后深...

淼淼真人
2018/05/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

.NET Core 3 WPF MVVM框架 Prism系列之命令

原文: .NET Core 3 WPF MVVM框架 Prism系列之命令 本文将介绍如何在.NET Core3环境下使用MVVM框架Prism的命令的用法 一.创建DelegateCommand命令# 我们在上一篇.NET Core 3 WPF MVVM框架 Pr...

osc_4dady4pk
19分钟前
15
0
Asp.Net Core下的开源任务调度平台ScheduleMaster—快速上手

原文: Asp.Net Core下的开源任务调度平台ScheduleMaster—快速上手 概述 ScheduleMaster是一个开源的分布式任务调度系统,它基于Asp.Net Core平台构建,支持跨平台多节点部署运行。 它的项目...

osc_3grma05a
20分钟前
20
0
php数组转字符串 加单双引号和逗号

$Arr = array(a,b,c,d,e,f,g) #join$str = " ' " . join("','", array_values($Arr) ) . " ' "; // 使用需要的符号拼接#str_replace$str = " ' ".str_replace( ",","','", impl......

啥都不会的程序员
21分钟前
21
0
性能计数器在.NET Core中的新玩法

原文: 性能计数器在.NET Core中的新玩法 传统的.NET Framework提供的System.Diagnostics.PerformanceCounter类型可以帮助我们收集Windows操作系统下物理机或者进程的性能指标,基于Performan...

osc_dg21zk4i
22分钟前
14
0
【WPF学习】第六十三章 理解WPF中的自定义元素

原文: 【WPF学习】第六十三章 理解WPF中的自定义元素   尽管可在任意WPF项目中编写自定义元素,但通常希望在专门的类库程序集(DLL)中放置自定义元素。这样,可在多个WPF应用程序之间共享自...

osc_5h77wdgp
22分钟前
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部