vue介绍

更新日期: 2019-09-25 阅读: 2.4k 标签: 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语句


创建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攻击的风险


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/6142

相关推荐

基于vue移动端UI框架有哪些?vue移动端UI框架总汇

vue现在使用的人越来越多了,这篇文章主要整理一些比较优秀的移动端ui框架,推荐给大家,例如:mint UI、vux、vonic、vant、cube-ui、Muse-ui、Vue-Carbon、YDUI等

vue watch监听对象的使用_实现首次不触发、深度监听

vue中的watch是一个对象,所以一定要当成对象来用,它有键-值组成,其中键就是你要监控的那个数据。这篇文章介绍:vue如何实现首次不触发watch,vue如何实现数据的深度监听?

组件化的概念/特性/优点,Vue组件的使用

Web 中的组件其实就是页面组成的一部分,具有高内聚性,低耦合度,互冲突等特点,有利于提高开发效率,方便重复使用,简化调试步骤等。vue 中的组件是一个自定义标签形式,扩展原生的html元素,封装可重用的代码。

vue扩展——使用vue插件添加全局方法属性

在使用vue构建一些大型项目的时候,会发现许多组件会共用到一些函数或常量,我们需要把它提取出来,每次需要的时候调用一次就可以了,避免每个组件都重新写再一篇的麻烦。

Vue的href动态拼接绑定

:href前面要加“:”或者v-bind: 字符串要用单引号包住 加上了冒号是为了动态绑定数据,等号后面可以写变量。 如果不使用冒号,等号后面就可以写字符串等原始类型数据。这是就无法进行动态绑定数据了

vue引用js文件的多种方式

vue引用js文件的多种方式,这里以为引入jquery为例。js引入文件方式包括: vue-cli webpack全局引入jquery、vue组件引用外部js的方法、单vue页面引用内部js方法

Vue的理解:Vue.js新手入门指南

从一个从未接触过除HTML+CSS+JavaScript+JQuery以外的前端技术的人到现在可以独立使用Vue.js以及各种附属的UI库来开发项目,我总结了一些知识和经验想与大家分享。

vue与后台交互ajax数据

Vue.js是一套构建用户界面的渐进式的前端框架。 vueJS与后台交互数据的方法我所了解的有以下几种

Vue.js最佳实践:五招让你成为Vue.js大师

本文面向对象是有一定Vue.js编程经验的开发者。如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给你们写。对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站

Vuejs讲解之:响应式、过渡效果、过渡状态

Vue是一套构建用户界面的JS渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。讲解js高级之响应式、过渡效果、过渡状态。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!