Vue基础

1、Vue的概念

vue是用于构建用户界面的渐进式框架，采用自底向上增量开发的设计，也是单页面应用程序

2、Vue的核心理念

数据驱动视图，组件化开发

3、Vue框架的特点

1、轻量级框架
2、简单易学
3、虚拟的DOM
4、数据 视图 结构分离

4、框架和库的区别

1、框架：是一套完整的解决方案，对项目的侵入性较大，如果要更换框架，则需要重新架构整个项目
2、库：提供的一个小功能，对项目的入侵性较小，如果这个库无法满足需求，更换一个库即可

5、MVC和MVVM的区别

1、MVC是后端分层开发的概念，MVVM是前端视图层的概念
2、在MVC中V是视图层view，用来展示数据，发送请求；C是调度层Controller，用来接收数据、响应数据、返回数据；M是模型层model，用来处理数据，与数据库打交道。
3、在MVVM中，V是视图层view，用来展示数据；VM是视图模型层viewModel，用来连接view和model，承上启下的作用，M是模型层model，用来处理逻辑关系

6、Vue的基础语法

6.1、插值表达式 {{}}

6.2、v-text和v-html

v-text和v-html的异同点：

• 相同点：都会替换标签中原有的内容
• 不同点：v-text不能解析富文本，v-html能解析富文本

6.3、v-bind

v-bind：用来元素属性的绑定，简写为：

  <img v-bind:src="imgSrc" alt="">
  <img :src="imgSrc" alt="">

6.4、v-on

v-on：用来事件的绑定，简写为@

  <button v-on:click="log">按钮</button>
  <button @click="changeImg">修改图片</button>

6.5、v-model

v-model：用来绑定表单控件，数据双向绑定

原理：通过数据劫持结合发布订阅模式的方式来实现，通过Object.defineProperty()来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发相应的监听调来渲染视图。

  <input type="text" v-model:value="userName">
  <!-- 简写 -->
  <input type="text" v-model="passWord">

6.6、v-for

v-for：用来遍历

key: 必须要添加
必须是唯一值
必须是数字或者字符串
作用：提高重排效率， 就地复用 （diff算法）

1. 遍历数组
2. 遍历对象
3. 遍历数字

        <!-- 1、遍历数组 -->
        <div v-for="(item,index) in list" :key="index">
            {{item}}==={{index}}
        </div>
        <!-- 2、遍历对象 -->
        <div v-for="(value,key,index) in obj" :key="index">
            {{key}}===={{value}}===={{index}}
        </div>
         <!-- 3、遍历数字 -->
        <div>
            <div v-for="num in 5">
                <div>标题</div>
                <div>免费</div>
            </div>
        </div>

        <script>
        const vm = new Vue({
            el: '#app',
            data: {
                list: [1, 2, 3, 4, 1],
                obj: {
                    name: 'zs',
                    age: 18
                },
            },
            methods: {
            }
        })
    </script>

6.7、v-if和v-show

v-if和v-show的异同点：

• 相同点：都可以进行元素的隐藏
• 不同点：v-if通过删除DOM元素进行隐藏，v-show通过display:none进行隐藏

应用场景：

• v-if用于少次的切换
• v-show应用于频繁切换

7、事件修饰符

7.1、.stop 阻止冒泡事件

  <div class="parent" @click="log3">
    <div class="child" @click.stop="log2">
      <button @click="log1">按钮</button>
    </div>
   </div>

7.2、.capture 添加事件捕获模式

  <div class="parent" @click="log3">
    <div class="child" @click.capture="log2">
      <button @click="log1">按钮</button>
    </div>
   </div>

7.3、.self 当事件作用于本身的时候

  <div class="parent" @click="log3">
    <div class="child" @click.self.stop="log2">
      <button @click="log1">按钮</button>
    </div>
   </div>

7.4、.once 事件只触发一次

  <div class="parent" @click="log3">
    <div class="child" @click="log2">
      <button @click.once="log1">按钮</button>
    </div>
   </div>

7.5、.prevent 阻止默认事件

 <a href="http://www.baidu.com" @click.once.prevent="log">跳转</a>

javascript代码

 <script>
        const vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
                log() {
                    console.log('我是a标签');
                },
                log1() {
                    console.log(1111111);
                },
                log2() {
                    console.log(22222222);
                },
                log3() {
                    console.log(3333333);
                }
            }
        })
    </script>

8、样式的使用

8.1、class

1. 数组

<div :class="className">数组</div>

 <script>
       const vm = new Vue({
           el: '#app',
           data: {
               className: ['box'],
           },
           methods: {
           }
       })
   </script>

2. 三目表达式

<div :class="flag ? 'box' : 'fs40'">三目表达式</div>

 <script>
       const vm = new Vue({
           el: '#app',
           data: {
               flag:false,
           },
           methods: {
           }
       })
   </script>

3. 对象

属性名：类名
属性值：布尔类型的值

<div :class="className">对象</div>

 <script>
       const vm = new Vue({
           el: '#app',
           data: {
               className: { 'box': true, 'fs40': true },
           },
           methods: {
           }
       })
   </script>

4. 数组内置对象

<div :class="className">数组内置对象</div>

 <script>
       const vm = new Vue({
           el: '#app',
           data: {
               className: [{ 'box': false, 'fs40': true }],
           },
           methods: {
           }
       })
   </script>

8.2、style

1. 对象

<div :style="style1">对象</div>

 <script>
       const vm = new Vue({
           el: '#app',
           data: {
               style1: {
                  color: 'red',
                  fontSize: '30px' 
                },
           },
           methods: {
           }
       })
   </script>

2. 数组内置对象

<div :style="style1">对象</div>

 <script>
       const vm = new Vue({
           el: '#app',
           data: {
                style1: [{ color: 'red' }],
           },
           methods: {
           }
       })
   </script>

3. 函数返回值

<div :style="getStyle(2)">函数返回值</div>

 <script>
       const vm = new Vue({
           el: '#app',
           data: {
           },
            methods: {
               getStyle(n) {
                   if (n == 1) {
                       return {
                           color: 'red'
                       }
                   } else {
                       return {
                           color: 'green'
                       }
                   }
               }
           }
       })
 </script>