vue学习笔记

wayaan

已于 2022-10-31 12:29:50 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习笔记文章标签：学习

于 2022-10-12 19:14:51 首次发布

本文链接：https://blog.youkuaiyun.com/xiaobai_learning/article/details/127270056

前端学习笔记专栏收录该内容

8 篇文章

订阅专栏

本地应用

一.内容绑定、事件绑定

二.显示切换，属性绑定

三.列表循环，表单元素绑定

一、内容绑定、事件绑定

v-clock:

作用：刷新或者加载出现闪烁(display:none)。

v-text:

        1.作用：设置标签的内容(textContent)

        2.思考： v-text 和差值表达式{{}} 都可以渲染内容,区别？

                a. v-text 会替换 全部内容 ; 差值表达式{{}}可以替换 制定内容

b.v-text 默认没有加载闪烁问题，差值表达式有闪烁

c.v-text 内部支持写表达式

v-html：

1.作用：设置元素的innerHTML

2.内容有html结构会被解析为标签,v-text只会解析为文本

v-on：

1.作用：为元素绑定事件

2.事件名不需要写on

3.指令可以简写为@

4.绑定的方法写在methods中

5.方法内部通过this关键字可以访问定义在data中的数据
<!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>
</head>
<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <input type="button" value="双击" @dblclick="doIt">

        <h2 @click="changeFood">{{food}}</h2>
    </div>

    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                food:"西蓝花"
            },
            methods:{
                doIt:function(){
                    alert("做it");
                },
                changeFood:function(){
                    // console.log(this.food);
                    this.food+="好处"
                }
            },
        })
    </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>
    <style>
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }

        #app button{
            width: 30px;
            height: 30px;
            background-color: rgb(229, 195, 216);
            border: none;
        }
        .frame{
            width: 120px;
            height: 30px;
            background-color: rgb(206, 240, 235);
            border: 1px solid;
        }

        .number{
            text-align: center;
            line-height: 30px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="app" class="frame">
        
        <div class="number">
            <button @click="sub" class="fl">-</button>
            {{num}}
            <button @click="add" class="fr">+</button>
        </div>
        
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                num:1,
            },
            methods:{
                add:function(){
                    if(this.num<10){
                        this.num++;
                    }else{
                        alert("别点了，最大了")
                    }

                },
                sub:function(){
                    if(this.num>0){
                        this.num--;
                    }else{
                        alert("别点了，最小了")
                    }
                }
            }
        })
        
    </script>
    
</body>
</html>
二.显示切换，属性绑定

v-show:

操纵display,频繁切换

        1.作用：根据真假切换元素

        2.原理：通过修改元素的display，来显示或隐藏

        3.指令后面的内容，最终解析为布尔值

        4.true显示，false隐藏

v-if:

操纵dom,不频繁切换

        1.作用：根据真假切换元素

        2.原理：通过修改元素的dom，来显示或隐藏

3.表达式值为true则元素存在于dom树中，否则从dom树中移除

v-bind:

1.作用：为元素绑定元素

2.完整写法：v-bind:属性名；简写：:属性名

        3.需要动态增删class建议使用对象方式{active:isActive}

三.列表循环，表单元素绑定

v-for:

1.根据数据生成列表结构

2.数组常和v-for一起使用

3语法是：xx(参数) in arr(数据)

4.itme和index可以结合其他指令一起使用

5.数组长度的更新会会同步到页面上，是响应式的

v-on:

1.事件绑定的方法写成函数调用的形式，可以传入自定义参数

2.定义方法时需要定义形参来接受和传入实参

3.事件后面跟上.修饰符可以对事件进行限制

4. .enter可以限制触发按键为回车

v-model:

1.v-model指令的作用是更便捷的设置和获取表单元的值

2.绑定的数据会和表单元素值相关联

        3.绑定的数据与表单元素的值双向绑定

axios

1.axios必须先导入才可以使用

2.使用get或post方法即可发送对应的请求

3.then方法中的回调函数会在请求成功或失败时触发

4.通过回调函数的形参可以获取响应内容，或错误信息

axios+vue

1.axios回调函数中的this已经改变，无法访问到数据data

2.把this保存起来，回调函数中直接使用保存的this即可

3.和本地最大的区别就是改变了数据来源

计算属性computed

作用：能够将计算结果缓存起来（将行为转化成了静态属性）

<!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>
</head>
<body>


    <div id="app">
        <p>currentTime1:{{currentTime1()}}</p>
        <p>currentTime2:{{currentTime2}}</p>
        <!-- currentTime1只能用方法做，而currentTime2可以直接调用属性 -->
        <!-- 通过内存调用速度快 -->
    </div>



    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


    <script>

        var vm = new Vue({
            el: "#app",
            data:{
                message:"hello kuangshen"
            },
            methods:{
                currentTime1:function(){
                    return Date.now();//返回一个时间戳
                }
            },
            computed:{//计算属性：mothods,computed         !方法名不能重名,重名后只会用methods
                // 计算出结果就保存在内存中
                currentTime2:function(){
                    this.message;
                    return Date.now();//返回一个时间戳
                }
            }
    })
    </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>
</head>
<body>

  <div id="root">
    <!-- 遍历数组 -->
    <h2>人员列表</h2>
    <ul>
      <li v-for="(p,index) in person" :key="index">
        {{p.name}}-{{p.age}}
      </li>
    </ul>
    <!-- 遍历对象 -->
    <h2>汽车信息</h2>
    <ul>
      <li v-for="(p,index) in car" :key="index">
        {{index}}-{{p}}
      </li>
    </ul>
    <!-- 遍历字符串 -->
    <h2>字符串</h2>
    <ul>
      <li v-for="(p,index) in String" :key="index">
        {{index}}-{{p}}
      </li>
    </ul>
    <!-- 遍历指定次数 -->
    <h2>遍历指定次数</h2>
    <ul>
      <li v-for="(number,index) in 5" :key="index">
        {{index}}-{{number}}
      </li>
    </ul>
  </div>
  
  
   <!-- 开发环境版本，包含了有帮助的命令行警告 -->
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


   <script>
    new Vue({
      el:"#root",
      data:{
        person:[
          {id:'001',name:'张三',age:'15'},
          {id:'002',name:'李四',age:'16'},
          {id:'003',name:'王五',age:'17'},  
        ],
        car:{
          name:'奥迪',
          price:'70w',
          color:'黑色'
        },
        String:'hello'
      }
    })
   </script>

</body>
</html>