2021-06-21 Vue基础

目录

一、什么是vue.js?

二、为什么学习流行框架

三、框架和库的区别

四、MVC与MVVM的区别

五、vue.js代码结构

六、插值表达式

七、v-bind、v-on

八、事件修饰符

九、v-model数据双向绑定

十、Vue中样式的使用

十一. V-for和key属性

十二. v-if与v-show区别


一、什么是vue.js?

Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex);

Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!

Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。(Vue有配套的第三方类库,可以整合起来做大型项目的开发)

前端的主要工作?主要负责MVC中的V这一层;主要工作就是和界面打交道,来制作前端页面效果;  

二、为什么学习流行框架

在Vue中,一个核心的概念,就是让用户不再操作DOM元素,解放了用户的双手,让程序员可以更多的时间去关注业务逻辑;

三、框架和库的区别

框架:是一套完整的解决方案;对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目。

库(插件):提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其它库实现需求。

四、MVC与MVVM的区别

MVC是后端的分层开发概念;

MVVM是前端视图层的概念,主要关注于视图层分离,也就是说:MVVM把前端的视图层,分为了三部分Model、View、VM ViewModel;

五、vue.js代码结构

1、引入vue.js

2、写视图层,我们要展示的内容

              //插值表达式,读取变量 

              {{     }}

//调度层

3、实例化new  Vue(){

         1)data:{}存放数据    // 参数存放数据,mvvm里的Model层

         2)el:'  '                     控制哪块视图   //控制区域

         3)methods:{}             存放的方法

       }

六、插值表达式

·  插值表达式{{  }},可以在前后插入一些内容

·  v-text:会替换掉元素里的内容,给界面元素赋值

·  v-html:可以渲染html界面,可以把字符串解析成html的内容

·  v-cloak:再开始加载vue之前就是存在,当我们设置隐藏属性时,可以实现界面防止闪烁

七、v-bind、v-on

v-bind:属性=' 变量'    :属性='变量'   界面元素属性值的绑定       

1. 括号里不加引号的都是我们data里的数据读取

2. 如果想使用字符串需要加上引号

3. 里面可以写表达式

4. 里面也可以调用定义好的方法,拿到的是方法的返回值

v-on:click=' 函数名'    @click='函数名'  进行事件的绑定,我们用的最多的是click事件绑定  

八、事件修饰符

  1. .stop 阻止冒泡
  2. .prevent 阻止默认事件
  3. .capture 添加事件侦听器时使用事件捕获模式   当有捕获事件发生时,先进行捕获事件(从外往里执行),然后在进行冒泡事件,(从里到外执行)
  4. .self 只当事件在该元素本身(比如不是子元素)触发时触发回调
  5. .once 事件只触发一次、

九、v-model数据双向绑定

v-model:数据是双向绑定,并且绑定的是表单控件     可以在data里随时修改数据

v-model:value="msg"

计算器自动计算结果:

     // let str = Number(this.num1) + this.opration + Number(this.num2);

     // this.sum = eval(str)

十、Vue中样式的使用

使用class样式:

·  数组   [ class1,class2   ]

  三木表达式[   class1,flag?class2:class3   ]

·  数组内置对象(对象的键是样式的名字,值是bool类型){blue:true}

·  直接通过对象     {'first':false,'second':true}

使用内联样式:

  1. 直接在元素上通过 :style 的形式,书写样式对象         

             

{{message}}
  • 2.    将样式对象,定义到 data 中,并直接引用到 :style 中
    1. 在data上定义样式

                 

{{message}}

                  textStyle: {

                          color: 'red',

                           'font-size': '50px'

                    },

             2.  在元素中,通过属性绑定的形式,将样式对象应用到元素中

3.   在 :style 中通过数组,引用多个 data 上的样式对象  :style="[  ,   ]"

  1. 在data上定义样式
  2. 在元素中,通过属性绑定的形式,将样式对象应用到元素中

十一. V-for和key属性

1. 便利数组,参数(item,index) in list

2. 便利对象,参数(value,key,index) in list

3. 便利数字,num in 10 (1~10)

4. key在使用v-for的时候都需要去设置key

          4.1 让界面元素和数组里的每个记录进行绑定

          4.2 key只能是字符串或者数字

           4.3 key必须是唯一的

十二. v-if与v-show区别

     区别:

        1. v-if删除dom元素

        2. v-show设置display:none

        v-if后面的条件为false时,对应的元素以及其子元素不会渲染

   <h2 v-if="score>=90">优秀</h2>
    <h2 v-else-if="score>=80">良好</h2>
    <h2 v-else-if="score>=70">一般</h2>
    <h2 v-else>及格</h2>

     应用场景:

         1. v-if只修改一次的时候可以使用v-if

          2. v-show频繁切换的时候可以使用v-show


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
oa-list-cell.vue 是一个用于在 OA(Office Automation 办公自动化)系统中展示列表项的 Vue 组件。该组件通常用于显示表格、列表或者其他类型的数据。它的主要作用是根据传入的数据,以特定的样式和布局展示列表项的内容。 oa-list-cell.vue 组件通常包含以下功能: 1. 数据展示:通过接收父组件传入的数据,oa-list-cell.vue 可以动态地展示不同类型的信息,比如文本、图片、数字等。 2. 自定义样式:开发者可以根据具体需求自定义 oa-list-cell.vue 的样式,比如文字大小、颜色、背景等。 3. 交互处理:在需要用户交互的情况下,oa-list-cell.vue 也可以添加点击事件或者其他交互处理函数,以响应用户的操作。 oa-list-cell.vue 组件在 OA 系统中具有较广泛的应用,比如在审批流程中展示审批单据的详情,或者在报表系统中展示数据列表。它的灵活性和可定制性使得开发者可以根据具体业务需求快速构建出适合的数据展示界面。 在开发和使用 oa-list-cell.vue 组件时,需要注意以下几点: 1. 数据传递:确保父组件传递给 oa-list-cell.vue 的数据格式正确,并且包含了必要的信息。 2. 样式设计:根据 OA 系统的整体风格和设计规范,统一 oa-list-cell.vue 的样式,保持界面的整体统一性。 3. 性能优化:在数据量较大的情况下,需要考虑对 oa-list-cell.vue 进行性能优化,以保证页面加载和展示的流畅性。 综上所述,oa-list-cell.vue 是一个用于在 OA 系统中展示列表项的 Vue 组件,通过它可以快速构建出符合业务需求的数据展示界面。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值