收藏闪存小组博问

努力的小L

园龄：1年10个月粉丝：2关注：0

Vue

Vue

概述

​ Vue是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其他大型框架不同的是，Vue被设计为可以自底层向上逐层应用。Vue的核心只关注视图层，不仅易于上手，还便于第三方库。（如：vue-router,跳转，vue-resource,通信，vuex：管理）或既有项目整合。

官网：https://cn.vuejs.org/v2/guide/

前端知识体系

前端三要素

  • HTML（结构层）：超文本标记语言。决定网页的结构和内容。
  • CSS（表现层）：层叠样式，设定网页表现样式。
  • JavaScript（行为层）：是一种弱类型脚本语言，其源码不需要经过编译，而是由浏览器解释运行，用于控制网页的行为。

CSS

CSS 层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它主要缺陷如下:

  • 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器;
  • 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护;

这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为【CSS预处理器】的工具，提供 CSS缺失的样式层复用机制，减少冗余代码，提高样式代码的可维护性。大大提高了前端在样式上的开发效率。

行为层JavaScript

三端统一

混合开发（Hybrid App）

​ 主要的目的是实现一套代码三端统一（PC,Android:.apk,IOS:.ipa）并能够调用到设备底层硬件（如：传感器，GPS，摄像头等），打包方式主要有以下两种：

  • 云打包：HBuild->HBuildX,DCloud出品；API Cloud
  • 本地打包：Cordova(前身是PhoneGap)

微信小程序

方便微信小程序UI开发的框架：WeUI

后端技术

​ 前端人员为了方便开发也需要掌握一定的后端技术，但我们Java后台人员知道后台知识体系极其庞大复杂，所以为了方便前端人员开发后台应用，就出现了 NodeJS这样的技术。
​ NodeJS的作者已经声称放弃NodeJS(说是架构做的不好再加上笨重的node modules，可能让作者不爽了吧)，开始开发全新架构的 Deno。
​ 既然是后台技术，那肯定也需要框架和项目管理工具，NodeJS框架及项目管理工具如下:

  • Express: NodeJS 框架
  • Koa:Express简化版
  • NPM:项目综合管理工具，类似于 Maven
  • YARN:NPM 的替代方案，类似于 Maven 和 Gradle的关系

主流前端框架

iView,ElementUI,ICE,VantUI,AtUI,CubeUI,

第一个Vue程序

安装vue插件（安装后若在新建项目中找不到）：点击settings->editor->file and code templates->点击vue single file component点击上方copy temlpate即可。

下载地址

View

View是视图层，也就是用户界面。前端主要由HTML 和css来构建，为了更方便地展现 ViewModel 或者 Model 层的数据，已经产生了各种各样的前后端模板语言，比如 FreeMarker、Thymeleaf等等，各大MVVM 框架如Vuejs，AngularJS，EJS等也都有自己用来构建用户界面的内置模板语言。

Model

Model 是指数据模型泛指后端进行的各种业务逻辑外理和数据操控，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则。

ViewModel

ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。
需要注意的是ViewModel所封装出来的数据模型包括视图的状态和行为两部分，而Model层的数据模型是只包含状态的。

  • 比如页面的这一块展示什么，那一块展示什么这些都属于视图状态(展示)。

  • 页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为(交互)

    视图状态和行为都封装在了ViewModel里。这样的封装使得ViewModel可以完整地去描述View 层。由于实现了双向绑定，ViewModel的内容会实时展现在 View 层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵DOM去更新视图。
    MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护ViewModel，更新数据视图就会自动得到相应更新，真正实现事件驱动编程。
    View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model层交互，这就完全解耦了View层和Model层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

MVVM 模式的实现者

  • Model:模型层，在这里表示JavaScript对象
  • View:视图层，在这里表示 DOM(HTML操作的元素)
  • ViewModel:连接视图和数据的中间件，Vuejs就是MVVM中的ViewModel层的实现者
    在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel 来通信，而ViewModel就是定义了一个Observer观察者。ViewModel能够观察到数据的变化，并对视图对应的内容进行更新。ViewModel 能够监听到视图的变化，并能够通知数据发生改变。
    至此，我们就明白了，Vue.is就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定。

为什么要使用 Vue.js

  • 轻量级，体积小是一个重要指标。Vue.js 压缩后有只有 20多kb (Angular压缩后56kb+，React压缩后44kb+)
  • 移动优先。更适合移动端，比如移动端的 Touch事件。易上手，学习曲线平稳，文档齐全
  • 吸取了 Angular(模块化)和React(虚拟DOM)的长处，并拥有自己独特的功能，如:计算属性
  • 开源，社区活跃度高

第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    {{message}}
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    let vm=new Vue({
        el:"#app",
        //Model:数据
        data:{
            message:"hello,vue!"
        }
    });
</script>
</body>
</html>

V-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
   <span v-bind:title="message">鼠标悬停几秒种查看此处动态绑定的提示信息</span>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    let vm=new Vue({
        el:"#app",
        //Model:数据
        data:{
            message:"hello,vue!"
        }
    });
</script>
</body>
</html>

​ 你看到的v-bind等被称为指令。指令带有前缀v-，以表示它们是Vue提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是:“将这个元素节点的title特性和Vue实例的message属性保持一致”。如果你再次打开浏览器的JavaScript控制台，输入appmessage='新消息，就会再一次看到这个绑定了title特性的HTML 已经进行了更新。

判断-循环

v-if,v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else="ok">No</h1>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    let vm=new Vue({
        el:"#app",
      data:{
            ok: true
      }
    });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else-if="type==='D'">D</h1>
    <h1 v-else>C</h1>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    let vm=new Vue({
        el:"#app",
      data:{
            type: 'A'
      }
    });
</script>
</body>
</html>

V-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    let vm=new Vue({
        el:"#app",
       data:{
            items:[
                {message: '狂神说java'},
                {message: '狂神说前端'},
            ]
       }
    });
</script>
</body>
</html>

事件

v-on监听事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
  <button v-on:click="sayhi">click</button>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  let vm=new Vue({
    el:"#app",
    data: {message:"狂神说java"},
    methods:{
        //方法必须定义在vue的Method中,v-on：事件
        sayhi:function (event){
            alert(this.message);
        }
    }
  });
</script>
</body>
</html>

表单双绑、组件

什么是双向数据绑定

Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精之处了。
值得注意的是，我们所说的数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用 vuex ，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

为什么要实现数据的双向绑定

在 Vue.js 中，如果使用 vuex ，实际上数据还是单向的，之所以说是数据双向绑定，这是用的Ul 控件来说，对于我们处理表单，Vue.js 的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪:局部性数据流使用双向，简单易操作。

在表单中使用双向数据绑定

你可以用 v-model 指令在表单 、

本文作者：努力的小L

本文链接：https://www.cnblogs.com/sx-xiaoL/p/17589926.html

版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   努力的小L  阅读(62)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示
AI IDE Trae
评论
收藏
关注
推荐
深色
回顶
展开