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

---