前端小记——Vue3

目录

Vue介绍

Vue安装使用

Vue入门案列

插值表达式

Vue指令

v-test

v-html

v-bind

v-on

v-model

v-cloak

v-show

v-if

v-else

v-else-if

v-for

计算属性

计算属性完整写法

属性侦听

class属性的绑定

style属性的绑定

表单数据收集

事件绑定和修饰符

Vue之Axios发送Ajax请求

get方法

传递配置

生命周期函数

---

Vue介绍

Vue是一套用于构建用户界面的渐进式JavaScript框架，本质就是一个JavaScript库，Vue 的核心

库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

渐进式框架：表示我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发

整个项目。

Vue安装使用

1.通过CDN方式引入

2.下载引入

下载vue的源码，另存为新的文件，如vue.js，通过script标签引入。

Vue入门案列

    
        
        
        
        
    
    
        
        

            
{{msg}}
 //插值表达式
            
{{num}}
        
        
    

插值表达式

插值表达式支持运算符，三元表达式，调用方法，但是不建议这么做

    
        
        
        
    
    
        

            
            
 {{msg}}
            
            
 {{num + 10 * 2}}
            
 {{num + 10 * 2 > 50}}
            
            
 {{num + 10 * 2 > 50 ? '大于' : '不大于'}}
            
            
 {{msg.split('').reverse().join('')}}
            
            
        
        
    

我们一般只是把vue管理的数据展示出来，不建议进行运算和调用函数

Vue指令

vue提供的行间属性，能够完成一些功能操作

v-test

只输出文本

v-html

输出html，就是带标签属性的文本

    
        
        
        
    
    
        

            {{msg}}
            

            
        
    
    

v-bind

绑定html自带的属性

例如

    
        
        
        
    
    
        




            进入网易 //在属性前加上v-bind:   简写  :
            进入网易
        
    
    

v-bind    简写方式为     :

v-on

事件绑定

v-on:  简写  @

    
        
        
        
    
    
        

            
            一个按钮 函数括号可不写
            一个按钮
            
            一个按钮
        
        
    

案例：计数器

    
        
        
        
    
    
        

            当前计数 {{msg}}
            

            +1
            -1
        
    
    

v-model

双向绑定

视图和数据双向绑定，数据变化，视图就会变化；视图变化，数据变化

    
        
        
        
    
    
        

            
            
            {{num}}
            改变数据
        
        
    

v-cloak

用于隐藏尚未完成的DOM模板

当使用直接在 DOM 中书写的模板时，可能会出现一种叫做“未编译模板闪现”的情况：用户可能先

看到的是还没编译完成的双大括号标签，直到挂载的组件将它们替换为实际渲染的内容。

v-cloak 会保留在所绑定的元素上，直到相关组件实例被挂载后才移除。配合像 [v-cloak] {

display: none } 这样的 CSS 规则，它可以在组件编译完毕前隐藏原始模板。

v-show

根据表达式的真假，来设置元素的可见性

    
        
        
        
        
    
    
        

            
            


            
            显示
            隐藏
            开关
        
        
    

v-if

根据表达式的真假，来条件性地渲染模板元素

v-if元素被触发，其组件会被销毁和重建，如果初始条件为假，其内容不会被渲染，且组件不会被

创建，因此当需要频繁切换时，使用v-show，反之使用v-if。

  
    
    
    
    
  
  
    

      
      


      
      显示
      隐藏
      开关
    
    


  

v-else

v-if的另一种情况，可以从if--else语句理解

v-else-if

表示v-if的“else if 块”。可以进行链式调用。

    
        
        
        
    
    
        

            
            
优秀
            
良好
            
中等
            
很差
            
不及格
            
满分
            
成绩不合法
        
        
    

v-for

循环渲染，格式：（//键，值，索引）  in  数组/集合

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为

每项提供一个唯一 key

    
        
        
        
    
    
        

            

                

                    参数1-数组中的元素{{element}}参数2-元素的索引{{index}}
                
            
        
        
    

计算属性

为了避免在模板中写太多逻辑，使用计算属性computed

    
        
        
        
    
    
        

            
            
            
{{msg.split('').reverse().join('')}}
            
            
{{newStr}}
            
{{reverseStr()}}
            

            
            
{{getTime}}
            
{{getTime}}
            
{{getTime}}
            

            
            
{{getNowTime()}}
            
{{getNowTime()}}
            
{{getNowTime()}}


        
        
    

计算属性完整写法

    
        
        
        
    
    
        

            姓氏：
            
            

            名字：
            
            

            全名：
            
            


        
        
    

属性侦听

属性侦听的是属性值，当定义的值发生变化时，会执行相应的函数

计算属性不能执行异步任务，异步任务用属性侦听做

    
        
        
        
    
    
        

            姓氏：
            
            

            名字：
            
            

            全名：
            
            


        
        
    

class属性的绑定

    
        
        
        
        
    
    
        

            
ABCDEF
            
ABCDEF
            
ABCDEF
            
            
EEEEEEE
            
            
EEEEEEE
        
        
    

style属性的绑定

    
        
        
        
        
    
    
        

            
ABCEFDFDFFFFF22222
        
        
    

表单数据收集

    
        
        
        
    
    
        

            

                用户名：
                
                

                密码：
                
                
                {{password}}
                

                

                性别：
                
                男
                
                女
                

                爱好：
                
                足球
                
                蓝球
                
                排球
                

                学历：
                
                    请选择你的学历
                    小学
                    中学
                    大学
                
                

                生日：
                
                

                你有几个女朋友：
                
                

                

                
                
            
        
        
    

事件绑定和修饰符

$event

例:@click="show($event)"

.prevent   阻止元素的默认行为

.stop     阻止冒泡

.once     事件只执行一次

@keypress/down.enter="show()"    键盘按下

@mousedown.left="show"   鼠标按下

 鼠标按钮修饰符

.left
.right
.middle 

按键别名:

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

Vue之Axios发送Ajax请求

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

get方法

axios
                               .get('https://api.oioweb.cn/api/common/teladress',{
                                   params: { //参数
                                       mobile:this.phone
                                   }
                               })
                               .then((res)=>{
                                   //箭头函数，会找他上层作用域里面的this
                                   this.textData =res.data.result.name;
                               })
                               .catch(function (error) { // 请求失败处理
                                   console.log(error);
                               });

传递配置

axios({
                            method:'get',
                            url:'https://api.oioweb.cn/api/common/teladress',
                            params: {
                                mobile:'13259158562'
                            },
                            timeout:3000,
                            responseType: 'json'
                        }).then((res)=>{
                            //箭头函数，会找他上层作用域里面的this
                            this.textData =res.data.result.name;
                        }).catch(function (error) { // 请求失败处理
                            console.log(error);
                        });

生命周期函数

生命周期函数: 在某一个时刻会自动执行的函数