Vue_初识

Posted ugfly

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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:指哪删哪

以上是关于Vue_初识的主要内容,如果未能解决你的问题,请参考以下文章

初识Vue

初识Vue

分析初识vue小案例

分析初识vue小案例

一初识Vue.js

Vue初识