Vue_初识

前端三大框架:

  1. vue:开发效率相当高了。
  1. angalar:适合做后台管理系统,入手容易,但是越往后会越难受。
  2. react:虚拟dom(渲染内存中存储的dom,经过操作后,才会去渲染浏览器的真实dom)。

对浏览器来讲,view视图就是页面。即是一个dom树。

浏览器会把当前html文档当做一个dom树。

jquery:js类库。js操作dom,进行打包。

  • jquery操作dom。但是功能相对较少。
  • 但是还可以更牛逼,更简单。

bootstrap:css方向的框架。

前后端分离:(ajax)

  • 直白点说:django的render方法再也不会用了
  • 而是返回一个json数据。返回值永远都是json数据。
  • 前端人员负责html、css、js。
    • 它发ajax请求,要数据。任何数据请求要发ajax。
  • 后端就写业务逻辑,返回json数据。
  • 这样的好处:
    • 职责明确。

VUE是啥?

vue是一个自动构建用户界面的js框架。

自动生成js,css,html

vue是前端框架。

vue从官方来说是一个构建用户界面的javascript框架。

vue继承了其他俩框架的优点。

为什么用?

轻量、高效。

前端三大框架之一VUE & react & angelar

关于指令:

什么是指令:

就是带有V-前缀的特殊属性,通过属性来操作dom元素。

  1. v-text:在元素当中插入文本
  2. v-html:在元素当中不仅可以插入文本,还可以插入标签
  3. v-if:根据表达式的真假值,来动态插入或移除元素。可以单独写,但是基本都是与else一起的。  这个和show的区别,如果if为false,整个标签都没的了
  4. v-show:这个是display=none
  5. v-for:
    • 如果是对象object的话:
      • (value,key,index)
    • 如果是数组array的话:
      • (value,index)
  6. v-on:监听元素事件,并执行响应的操作   简写  @
  7. v-model:进行数据和视图的双向数据绑定

视图(dom) --> 数据(model)  # 视图就认为是一个标签元素。

数据(model)-->视图(dom)    #

数据驱动视图:

  • 不需要找到标签,我只需要关心我的数据就行
  • 找到响应的变量,修改了变量里面的值就会发生改变。

视图驱动数据:

  • 找个某个标签并赋值,然后数据也会发生改变。

  分为三个任务:

    1. 把数据和DOM(元素)的值绑定。
    1. 当输入内容时,数据同步发生变化。  --> 实现视图到数据的驱动
    2. 当改变数据时,输入内容也会发生变化。 --> 实现数据到视图的驱动
  1. v-bind:对标签属性进行操作的,简写  :
    1. 可以绑定多种属性
    2. 如果你的href是一个动态的,就可以用v-bind来绑定一下。
    3. 如果是一个静态的url,则么必要

v-show和v-if的区别:

v-show:如果为false,在前端会有属性为display:none。

v-if:如果为false,整个标签就没了。

  1. 自定义指令:

    友情链接:Vue_自定义指令

补充知识点:

  1. 只声明未赋值: Undefind
  2. 变量提升:先使用,后定义
  3. 对于浏览器来说。会把html当成一个dom树。

document-->html-->head/body

  1. shift:把数组的第一个元素删除,并且返回第一个元素的值。如果数组为空,则该方法不执行任何操作,返回undeifined
  2. push:在最前面添加一个
  3. pop:从后面删一个
  4. splice:指哪删哪

原文地址:https://www.cnblogs.com/ugfly/p/8353964.html

时间: 2024-10-26 09:54:37

Vue_初识的相关文章

初识Python,望君多多关照

在学习Python之前,我们接触过数据结构和网页制作.前者让我们学习如何把C语言运用的更加整齐规范,而后者让我们亲身学习如何运用所学,制作一个静态网页.通过这些课程的学习,让我对C语言产生了比较大的压力,以至于对编程.对这学期的Python课程都有一种如临大敌的感觉. 但是真的学习了这门课程,体会了编码过程中的一些固定运用方法和套路之后,也许过程中对这门课程隐隐约约产生了一点点朦胧的感觉,仿佛他也并没有想象中的那么困难,起码现在的学习让我认为,他可能没有C语言那么繁琐和麻烦.当然,以一个初学者的

初识数组排序!!!!

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>初识数组排序</title> <!--调试成功--> <style type="text/css"> *{ padding:0; margin: 0; } li,ul{ list-style: none; } #p

初识操作系统和linux

初识操作系统和linux 1.计算机系统由硬件系统和软件系统两大部分组成:是一种能接收和存储信息,并按照存储在其内部的程序对海量数据进行自动.高速地处理,然后把处理结果输出的现代化智能电子设备. 2.世界上第一台计算机是1946年诞生在美国宾州大学. 3.冯·诺依曼体系结构:1946年数学家冯·诺依曼于提出计算机硬件系统由运算器.控制器.存储器.输入设备.输出设备.摩根定律:当价格不变时,集成电路上可容纳的元器件的数目,约每隔18-24个月便会增加一倍,性能也将提升一倍.现在计算机技术进本很难遵

JAVA 初识类加载机制 第13节

JAVA 初识类加载机制 第13节 从这章开始,我们就进入虚拟机类加载机制的学习了.那么什么是类加载呢?当我们写完一个Java类的时候,并不是直接就可以运行的,它还要编译成.class文件,再由虚拟机解释给当前的操作系统去执行.这些过程都是我们看不见的,我们能看见的也就是一个.class文件.既然虚拟机要解释这些.class文件给当前的操作系统听,那么他怎么获得这些.class文件呢?虚拟机获得这些.class文件的过程就是类加载了. 所以,总结来说就是:虚拟机将.class文件从磁盘或者其他地

初识React

原文地址:北云软件-初识React 专注于UI 在MVC分层设计模式中,react常被拿来实现视图层(V).React不依赖于技术栈的其他部分,因此可以方便的在现有项目中尝试用它来实现一个小特性. 虚拟DOM React从DOM中抽象出来,给出一种更简洁的编程模型,且性能表现更好.能够通过NodeJS实现服务端渲染,通过React Native开发原生app. 数据流React实现单向.响应式数据流,减少boilerplate且比传统数据绑定更容易理解. 简洁的组件React的组件都实现了一个r

泛型的几种类型以及初识webform

今天学习的可以分为两类吧,但是学习的都是比较抽象的,不太容易掌握吧.首先我们大部分时间学习了泛型,泛型的委托,泛型接口以及枚举器,迭代器,扩展方法:最后简单的认识了webform,实现了一个简单的功能. 一.泛型 定义:泛型(generic)可以软糖多个类型共享一组代码,泛型允许我们声明类型参数化.可以用不同的类型进行实例化,说白了,就是可以用类型占位符,创建具体类型致命的真实概念.C#中提供了五种泛型,类,结构,接口,委托和方法.下面举例说明可能更容易理解, class MyStack<T>

最新计算机技术与管理科学应用专家——初识ERB

ERB管理系统:英文全称Enterprise Resource and Behavior,英文简称:ERB,中文名全称:企业资源与行为管理系统.ERB是由理文企业管理顾问有限公司首席管理师,现任商翼ERB企业管理系统项目总监吴志华先生,于2010年9月首先提出的.ERB不再单以供应链管理作为系统应用的基础,而是以企业行为与企业资源规划的最佳结合作为系统应用设计的核心基础,强调企业行为的规划.执行.监督与追溯,强调企业管理水平与员工素养的持续提升:提供企业行为与企业资源管理最佳结合的整体应用解决方

[OpenGL]环境搭建以及OpenGL初识

想往游戏行业发展的话,经常被提及到的就是OpenGL和DirectX,这两者听起来感觉是一门挺高深的技术,今天我也开始摸索学习OpenGL,那么OpenGL到底是什么?它和DirectX有什么区别和联系? OpenGL初识 OpenGL只是一套图形函数库 DirectX包含图形.声音.输入.网络等模块. 但就图形而论,DirectX的图形库性能不如OpenGL,OpenGL稳定,可以跨平台使用,DirectX只支持Windows平台,所以OpenGL还是有它的优势!OpenGL ES是OpenG

初识git

初识git 1 安装git 最早Git是在Linux上开发的,很长一段时间内,Git也只能在Linux和Unix系统上跑.不过,慢慢地有人把它移植到了Windows上.现在,Git可以在Linux.Unix.Mac和Windows这几大平台上正常运行了. 要使用Git,第一步当然是安装Git了.根据你当前使用的平台来阅读下面的文字: 1.1 在Linux上安装Git 首先,你可以试着输入git,看看系统有没有安装Git: ``` $ git The program 'git' is curren