Vue基础知识

最新推荐文章于 2024-08-09 15:29:32 发布

牛马小先锋

最新推荐文章于 2024-08-09 15:29:32 发布

阅读量695

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45838066/article/details/123171618

版权

1) 前端技术发展历程#

纯原生 JavaScript (原生js)
jQuery（仅仅是提高了 DOM 操作的效率）
框架时代
框架发展: 纯原生js -> prototype.js -> jQuery.js -> backbone.js+knockout.js -> angular.js -> vue.js+react.js

(2) Vue介绍#

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

一款非常优秀的前端渐进式 JavaScript 框架
- Vue 本身只是一个用于数据驱动视图更新的库
- 随着生态的慢慢发展，如今已经有了 Vue Router、Vuex、Vue CLI、Vue Server Renderer 等功能库，所以当 Vue 和这些核心功能库结合到一起的时候，我们称之为一个框架
- 这些技术一般也称之为 Vue 全家桶，所以学习 Vue 实际上就是要学习 Vue 全家桶才能发挥出 Vue 的威力
由尤雨溪开发并于 2014 年 2 月开源于 Github(14w+ ⭐️)
可以轻松构建 SPA(单页应用) 应用程序
通过指令扩展了 HTML，通过表达式绑定数据到 HTML,通过组件化开发极大的提高了开发的效率和可维护性
最大程度上解放了 DOM 操作

(3) Vue核心思想#

vue是一个mvvm框架

Vue 是为了克服 HTML 在构建应用上的不足而设计的。Vue 有着诸多特性，最为核心的是：

数据驱动
- DOM 是数据的一种自然映射
- 数据改变自动驱动视图更新
组件化

(4) 相关资料#

Vue.js 官网
介绍 | Vue CLI vue脚手架

(一) hello world#

el 实例挂载元素节点
data 可以在模板上展示的数据
插值表达式, 用来展示data里的数据
v-text和v-html指令可以展示文本和标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>
<body>  
    <div id="app">  
        
    </div> 

    <script> 
        // 定义msg变量并展示
        // 定义str变量(含标签)并展示
        // 修改msg变量, 查看其变量
        
    </script> 
</body>
</html>

(二) 双向数据绑定#

使用v-model指令对数据进行双向数据绑定 指令: 我们给计算机的命令

修改了data里的username的值, 页面的username会跟着变化
在页面上修改username的值, data里的username也会跟着变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>
<body>  
    <div id="app"> 
      
    </div> 

    <script>
        // 定义username变量, 实现双向数据绑定
    </script> 
</body>
</html>

(三) 修改css#

绑定css: 通过修改变量来决定添加或者删除css

v-bind:calss
简写 :class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <style>
        .red {color:red}
    </style>
</head>
<body>  
    <div id="app">   
        <p>所谓天才,其实是99%的汗水+1%的运气</p>
    </div> 

    <script>
        // 定义flag状态(变量),实现: flag为tue时添加类'red', 为false时移除类'red'
        
    </script> 
</body>
</html>


// 使用三目运算符绑定class
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <style>
        .red {color:red}
    </style>
</head>
<body>  
    <div id="app">   
        <p>{{username}}</p>
    </div> 

    <script>
       // 显示上面需求, 改用三目运算符来实现
    </script> 
</body>
</html>

(四) 修改样式#

修改样式 v-bind:style, 缩写为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script> 
</head>
<body>  
    <div id="app">   
        <!-- :style 绑定样式,修改data里的相关数据,样式也跟着发生改变 -->
        <p>必你聪明的人比你还努力, 你怎么办</p>
    </div> 

    <script>
        // 定义变量color和fontSize,给p标签绑定color和font-size 
    </script> 
</body>
</html>

(五) 绑定事件#

绑定事件(不传参)
- v-on:事件类型
- 简写: @事件类型

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <style>
        .red {color:red}
    </style>
</head>
<body>  
    <div id="app">  
        <button>点我</button> 
        <button>点我</button>
    </div> 

    <script> 
        // 给button绑定点击事件, 后一个button才用简写的绑定方式
    </script> 
</body>
</html>

绑定事件(传参)

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script> 
</head>
<body>  
    <div id="app">  
        <p>请选择省份</p>
        <button>广东</button>
        <button>湖南</button>
        <button>江西</button>
        <button>北京</button>
    </div> 

    <script> 
        // 给以上button绑定点击事件, 点击button弹出button的内容
    </script> 
</body>
</html>

绑定事件之表达式

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script> 
</head>
<body>  
    <div id="app">  
       <p><button>隐藏</button></p> 
       <div>
           <p>ppppppppppppppppppppppppp</p>
           <p>ppppppppppppppppppppppppp</p>
           <p>ppppppppppppppppppppppppp</p>
           <p>ppppppppppppppppppppppppp</p>
           <p>ppppppppppppppppppppppppp</p>
       </div>
    </div> 

    <script> 
        // 点击按钮隐藏内容(按钮文字改为显示),再点击按钮显示内容(按钮文字改为隐藏)
       
    </script> 
</body>
</html>

// 简化以上例子
<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script> 
</head>
<body>  
    <!-- 模板 -->
    <div id="app">  
       <p><button>隐藏</button></p>

       <div>
           <p>ppppppppppppppppppppppppp</p>
           <p>ppppppppppppppppppppppppp</p>
           <p>ppppppppppppppppppppppppp</p>
           <p>ppppppppppppppppppppppppp</p>
           <p>ppppppppppppppppppppppppp</p>
       </div>
    </div> 

    <script> 
        
    </script> 
</body>
</html>

绑定事件(事件修饰符)
1. 阻止事件冒泡event.stopPropagation() vue使用.stop
2. 阻止默认事件event.preventDefault() vue使用.prevent

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script> 
    <style>
         div.box { height: 400px; width: 400px; border: 1px solid; padding: 50px; }
    </style>
</head>
<body>   
    <div id="app">  
        <div class="box"> 
            <button>button</button>
        </div> 
    </div> 

    <script> 
       // 给button和.box绑定点击事件, 同时点击button时阻止事件冒泡 
    </script> 
</body>
</html>

(六) 生命周期(背诵)#

创建实例
- beforeCreate() 实例创建之前调用
- created() 实例创建之后调用
挂载节点
- beforeMount() 节点挂载之前调用
- mounted() 节点挂载之后调用
更新状态
- beforeUpdate() 状态更新之前调用
- updeted() 状态更新之后调用
实例销毁
- beforeDestroy() 实例销毁之前
- destroyed() 实例销毁之后

实例从创建到挂载分析

创建实例
处理data里的数据, 让数据具备"响应式"的特性
解析模板, 用来data里的变量替代模板里的指定符号
把解析后的模板挂载到指定节点

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>

<body>
    <!-- 模板 -->
    <div id="app">
        <p>{{msg}}</p>
    </div>
    <script>
        // 查看实例创建前后访问data里的数据
        // 查看挂载前后的dom节点
        
    </script>
</body>

</html>

(七) 条件渲染#

使用v-if和v-show执行实现条件渲染

v-if和v-show的区别**(背诵)**

使用v-if, 取值为false时, 元素会被删除
使用v-show, 取值为false时, 元素不会被删除, 只是被隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script> 
</head>
<body>  
    <div id="app">  
       <p>ppppppppppppppppp</p>
       <p>qqqqqqqqqqqqqqqqq</p>
    </div> 

    <script> 
       // 使用v-if和v-else指令实现显示与隐藏
    </script> 
</body>
</html>


// v-if和v-show的区别
<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script> 
</head>
<body>  
    <div id="app">  
       <p>ppppppppppppppppp</p>
       <p>ppppppppppppppppp</p> 
    </div>  
    <script> 
        // 对两个p标签分别使用v-if和v-show, 修改状态查看区别
    </script> 
</body>
</html>

(八) 渲染列表#

v-for指令渲染列表
:key="index" 添加key可以优化渲染效率(速度)

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script> 
    <style>
        ul,li{list-style: none;}
        li{margin-top: 10px;}
    </style>
</head>
<body>  
    <div id="app">  
       <ul>
           <li>
            1. 姓名:张某某 年龄:18
           </li> 
           <li>
            2. 姓名:张某某 年龄:18
           </li>
  	       <li>
            3. 姓名:张某某 年龄:18
           </li>
       </ul>
    </div>  
    <script> 
        // 按指定格式渲染一下数组
          
    </script> 
</body>
</html>

(九) couputed 计算属性#

根据已知的属性 (1个或多个) 得到一个新的属性

<!DOCTYPE html>
<html lang="en"> 
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head> 
<body> 
    <div id="app">
        <p>
            <span>单价20</span>  
            <input type="text" v-model="num" placeholder="请输入数量">
        </p>
        <p>合计:100元</p>
    </div>
    
    <script>
        // 根据单价和数量计算总价
    </script>
</body> 
</html>

(十) watch 监听器#

监听已知状态(属性), 状态发生改变, 根据需求做响应操作

总结：

同一个功能 computed 和 watch 都能实现，能用 computed 的时候一般都用 computed，更简洁
computed擅长根据一个或多个属性得到一个新的属性, watch擅长监听某个属性, 然后去修改一个或者多个属性

<!DOCTYPE html>
<html lang="en"> 
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head> 
<body> 
    <div id="app">
        <p><span>单价20</span>  <input type="text" v-model="num" placeholder="请输入数量"></p>
        <p>合计:100元</p>
        <p></p>
    </div>
    <script>
        // 
        new Vue({
          el: '#app',
          data: {
            price: 20,
            num: 0,
            total: 0,
            msg: ''
          }, 
        })
    </script>
</body> 
</html>