vue介绍

时间 2019-11-13

标签 vue 介绍繁體版

原文原文链接

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

框架和库的区别前端

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

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

目前的流行前端框架sql

Angular Vue React
流行的一些库jquery ，Zepto数据库

vue做为前端框架的特色npm

构建用户界面，只须要关系view层
易学，轻量快速
渐进式框架

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

vue优势：
响应式的数据绑定：
当数据发生改变，视图能够自动更新，能够不用关心dom的操做，专心数据操做。前端框架

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

什么是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攻击的风险

若本号内容有作得不到位的地方（好比：涉及版权或其余问题），请及时联系咱们进行整改便可，会在第一时间进行处理。

请点赞！由于大家的赞同/鼓励是我写做的最大动力！

欢迎关注达达的简书！

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

1. 1. VUE介绍
2. 介绍vue-cli
3. vue介绍
4. Vue+SpringBoot介绍
5. vue-router 介绍
6. vue----介绍
7. Vue介绍
8. VUE 介绍
9. 【Vue教程一】Vue介绍、Vue安装、项目目录介绍
10. Vue入门-Vue介绍
更多相关文章...
• 网站主机介绍 - 网站主机教程
• Spring目录结构和基础JAR包介绍 - Spring教程
• Java Agent入门实战（一）-Instrumentation介绍与使用
• 使用阿里云OSS+CDN部署前端页面与加速静态资源