Vue基础知识

最新推荐文章于 2022-09-14 11:14:31 发布

超级小丑_Supclown

最新推荐文章于 2022-09-14 11:14:31 发布

阅读量90

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_57860459/article/details/123331969

版权

前言#

(1) 前端技术发展历程#

纯原生 JavaScript
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 是为了克服 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> 
    <!-- vue的数据展示在#app里面 -->
    <div id="app">
        <!-- 差值表达式 -->
        <p>{{msg}}</p>
        <!-- v-text指令,用来展示文本 -->
        <p v-text="str"></p>
        <!-- v-html指令,用来展示标签 -->
        <p v-html="str"></p>
    </div> 

    <script>
        // 创建一个vue的实例
        var vm = new Vue({
            // vue实例挂载的节点
            el: '#app',
            // 数据
            data: {
                msg: 'hello world',
                str: '<button>这是个按钮</button>'
            }
        }); 

				// 数据修改了, 页面就会跟着改变, 这就是"数据驱动视图"
        // setTimeout(function() {
        //     vm.msg = '大家好';
        // },2000)
    </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"> 
        <!-- v-model指令的作用是双向数据绑定 -->
        <input type="text" v-model="username"> 
        <p>{{username}}</p>
    </div> 

    <script>
        // 创建一个vue的实例
        var vm = new Vue({
            // vue实例挂载的节点
            el: '#app',
            // 数据
            data: {
                username: '张三'
            }
        });  
    </script> 
</body>
</html>

(三) 修改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">  
        <!-- v-bind绑定属性,这里是绑定class属性 -->
        <!-- 若flag的值为true,就给p标签添加"red",否则就移除 -->
        <p v-bind:class="{red:flag}">{{username}}</p>
    </div> 

    <script>
        // 创建一个vue的实例
        var vm = new Vue({
            // vue实例挂载的节点
            el: '#app',
            // 数据
            data: {
                username: '张三',
                flag: true
            }
        });  

        setTimeout(function(){
            vm.flag = false;
        },2000)
    </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">  
        <!-- 使用三目运算符修改class -->
        <p :class="flag?'red':''">{{username}}</p>
    </div> 

    <script>
        // 创建一个vue的实例
        var vm = new Vue({
            // vue实例挂载的节点
            el: '#app',
            // 数据
            data: {
                username: '张三',
                flag: true
            }
        });   
    </script> 
</body>
</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">   
        <!-- :style 绑定样式,修改data里的相关数据,样式也跟着发生改变 -->
        <p :style="{color:color,fontSize:size+'px'}">{{username}}</p>
    </div> 

    <script>
        // 创建一个vue的实例
        var vm = new Vue({
            // vue实例挂载的节点
            el: '#app',
            // 数据
            data: {
                username: '张三', 
                color: 'red',
                size: 26
            }
        });   

        setTimeout(function() {
            vm.color = 'gold';
            vm.size  = 50;
        },2000)
    </script> 
</body>
</html>

(五) 绑定事件#

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

<!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 v-on:click="say">点我</button>
        <!-- 绑定事件简写 -->
        <button @click="say">点我</button>
    </div> 

    <script> 
        var vm = new Vue({ 
            el: '#app', 
            data: {  },
            // 方法放在methods
            methods: {
                say() {
                    alert('hahahahah')
                }
            }
        });   
    </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 @click="selectCity('广东')">广东</button>
        <button @click="selectCity('湖南')">湖南</button>
        <button @click="selectCity('江西')">江西</button>
        <button @click="selectCity('北京')">北京</button>
    </div> 

    <script> 
        var vm = new Vue({ 
            el: '#app', 
            data: {  },
            // 方法放在methods
            methods: {
                selectCity(city) {
                    alert('你选择了'+city);
                }
            }
        });   
    </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 @click="showText">{{show?'隐藏':'显示'}}</button></p>

       <div v-show="show">
           <p>ppppppppppppppppppppppppp</p>
           <p>ppppppppppppppppppppppppp</p>
           <p>ppppppppppppppppppppppppp</p>
           <p>ppppppppppppppppppppppppp</p>
           <p>ppppppppppppppppppppppppp</p>
       </div>
    </div> 

    <script> 
        var vm = new Vue({ 
            el: '#app', 
            data: { 
                show: true
             }, 
            methods: {
                showText() {
                    this.show = !this.show;
                }
            }
        });   
    </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 @click="show=!show">{{show?'隐藏':'显示'}}</button></p>

       <div v-show="show">
           <p>ppppppppppppppppppppppppp</p>
           <p>ppppppppppppppppppppppppp</p>
           <p>ppppppppppppppppppppppppp</p>
           <p>ppppppppppppppppppppppppp</p>
           <p>ppppppppppppppppppppppppp</p>
       </div>
    </div> 

    <script> 
        var vm = new Vue({ 
            el: '#app', 
            data: { 
                show: true
             }
        });   
    </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" @click="alert('div')">
            <!-- 事件修饰符.stop阻止事件冒泡 -->
            <button @click.stop="alert('button')">button</button>
        </div> 
    </div> 

    <script> 
        var vm = new Vue({ 
            el: '#app',  
        });   
    </script> 
</body>
</html>

(六) 生命周期背诵#

beforeCreate ----》实例创建之前 created ----》实例创建之后 beforeMount ----》实例挂载之前 mounted ----》实例挂载之后 beforeUpdate ----》实例更新之前 updeted ----》实例更新之后 beforeDestroy ----》实例销毁之前 destroyed ----》实例销毁之后

<!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>
        // 创建一个Vue实例
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello world'
            },

            // 实例创建之前
            beforeCreate() {
                console.log('this.msg',this.msg);
                console.log('实例创建之前');
            },
            // 实例创建完毕
            created() {
                console.log('this.msg',this.msg);
                console.log('实例创建完毕');
            },
            // 实例挂载之前  
            beforeMount() {
                console.log('实例挂载之前'); 
            },
            // 实例挂载之后
            mounted() {
                console.log('实例挂载之后');
            },
            // 实例更新之前
            beforeUpdate() {

            },
            // 实例更新之后
            updeted() {

            },
            // 实例销毁之前
            beforeDestroy() {

            },
            // 实例销毁之后
            destroyed() {

            } 
        });
    </script>
</body>

</html>

(七) 条件渲染#

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 v-if="flag">ppppppppppppppppp</p>
       <p v-else>qqqqqqqqqqqqqqqqq</p>
    </div> 

    <script> 
        var vm = new Vue({ 
            el: '#app', 
            data: { 
                flag: true
            }
        });   

        setTimeout(function() {
            vm.flag = false;
        },3000)
    </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 v-if="flag">ppppppppppppppppp</p>
       <p v-show="flag">ppppppppppppppppp</p> 
    </div>  
    <script> 
        var vm = new Vue({ 
            el: '#app', 
            data: { 
                flag: true
            }
        });   

        setTimeout(function() {
            vm.flag = false;
        },3000)
    </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 v-for="(item,index) in list" :key="index">
            {{index+1}}. 姓名:{{item.username}} 年龄:{{item.age}}
           </li> 
       </ul>
    </div>  
    <script> 
        var vm = new Vue({ 
            el: '#app', 
            data: { 
               list: [
                   {
                       username: 'liuxueshu',
                       age: 20
                   },
                   {
                       username: 'lurui',
                       age: 21
                   },
                   {
                       username: 'lurui2',
                       age: 22
                   },
                   {
                       username: 'lurui3',
                       age: 23
                   }
               ]
            }
        });    
    </script> 
</body>
</html>

(九) couputed 计算属性#

根据已知的属性得到一个新的属性

<!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.00元</span>  <input type="text" placeholder="请输入数量"></p>
        <p>合计:100元</p>
        <p>今天总共花了100元,私房钱都花没了</p>
    </div>
    <script>
        // 输入数量, 计算总价, 总价大于大于100时显示消息 
    </script>
</body> 
</html>

(十一) refs#

refs用来获取原生dom节点或者子组件实例

<!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">
      <div ref="box">这个一个div标签</div>
    </div>
    <script>
        new Vue({
          el: '#app',
          data: {
            
          },
          created() {
            console.log(this.$refs['box']);
          },
          mounted() {
            console.log(this.$refs['box']);
          }
        })
    </script>
</body> 
</html>

(十二) 请求数据#

在created生命周期里发起请求

TIP

创建vue3项目
配置简单路由

超级小丑_Supclown

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue基础知识

前言#前言 (1) 前端技术发展历程 (2) Vue介绍 (3) Vue核心思想 (4) 相关资料 (一) hello world (二) 双向绑定 (三) 修改css (四) 修改样式 (五) 绑定事件 (六) 生命周期背诵 (七) 条件渲染 (八) 渲染列表 (九) couputed 计算属性 (十) watch 侦听器 (十一) refs (十二) 请求数据项目实战(1) - 创建vue3项目项目实战(2) - 配置简单路由 (1) 安装vue
复制链接

扫一扫