zoukankan      html  css  js  c++  java
  • vue介绍

    什么是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语句

    资源搜索网站大全 http://www.szhdn.com

    创建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>v-html渲染</span>"
                }
            })
        </script>
    </body>
    </html>

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

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

  • 相关阅读:
    1451. Rearrange Words in a Sentence
    1450. Number of Students Doing Homework at a Given Time
    1452. People Whose List of Favorite Companies Is Not a Subset of Another List
    1447. Simplified Fractions
    1446. Consecutive Characters
    1448. Count Good Nodes in Binary Tree
    709. To Lower Case
    211. Add and Search Word
    918. Maximum Sum Circular Subarray
    lua 时间戳和时间互转
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/14024978.html
Copyright © 2011-2022 走看看