01-Vue:指令

最新推荐文章于 2024-09-20 11:00:29 发布

weixin_51339105

最新推荐文章于 2024-09-20 11:00:29 发布

阅读量64

点赞数

分类专栏：前端学习文章标签： vue.js javascript 前端前端框架

本文链接：https://blog.csdn.net/weixin_51339105/article/details/124990962

版权

前端学习专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1.vue基本概念

为何学习vue:更少的事件，干更多的活，开发网站速度快；

<!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="box">
        <ul>
            <li v-for="item in arr">
                {{item}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#box",
            data(){
                return {
                    arr:['aaa','bbb','ccc']
                }
            }
        })
    </script>
</body>
</html>

注意：vue的底层还是原生js

2.什么是Vue

https://cn.vuejs.org/
渐进式JavaScript框架
什么是渐进式？
逐渐进步，想用什么就用什么，不必全都使用
什么是库和框架
jquery库：封装的属性和方法；
框架：有自己的规则和元素，比库强大的多 vue React Angular

3.三大主流框架

Angular 谷歌公司
Vue 尤雨溪
React facebook脸书

4.vue

4.1vue学习方式

传统开发模式：基于html/css/js文件开发vue
工程化开发方式：webpack环境中开发vue 脚手架vue-cli

4.2vue的使用

数据驱动

<!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>
    <!-- 1-引入vue.js -->
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- 2-创建vue模板 -->
    <div id="app">
       {{str}}
    </div>
    
    <script>
        console.log(Vue);
        // 创建Vue实例
        var app = new Vue({
            el:"#app",    //Vue挂载的元素
            data:{       //定义数据
                 str:'hello',
                 flag:true,
                 num:9,
                 arr:['aaa','bbb','ccc'],
                 obj:{
                     name:'zs'
                 }    
            }
        })
    </script>
</body>
</html>

插值表达式
{{表达式}}
不能写if语句和for循环
vue的变量必须在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>
    <!-- 1-引入vue.js -->
    <script src="./js/vue.js"></script>
</head>
<body>

    <div id="app">
       <p>{{str}}</p>
       <p>{{str + '123'}}</p>
       <p>{{'我很快乐'}}</p>
       <p>{{flag?'true':'false'}}</p>
       <p>{{num*8}}</p>
       <p>{{arr[0]}}</p>
       <p>{{obj}}</p>
    </div>
    
    <script>
        console.log(Vue);
        var app = new Vue({
            el:"#app",    
            data:{      
                 str:'hello',
                 flag:true,
                 num:9,
                 arr:['aaa','bbb','ccc'],
                 obj:{
                     name:'zs'
                 }    
            }
        })
    </script>
</body>
</html>

vue指令
特殊的html标签的属性，以v-开头，每个指令都有独立的作用
1:v-html
作用:数据绑定可以解析标签
2:v-text
作用：数据绑定
注意网络不好，vue引入不进来，使用v-html和v-text在页面上不会看到内容，使用插值表达式在页面上可以看到{{str}}

<!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>
    <!-- 1-引入vue.js -->
    <script src="./js/vue.js"></script>
</head>
<body>

    <div id="app">
       <p>{{str}}</p>
       <p v-text="str"></p>
       <p v-html="str"></p>
       <hr>
       <p>{{htmlStr}}</p>
       <p v-text="htmlStr"></p>
       <p v-html="htmlStr"></p>
    </div>
    
    <script>
        console.log(Vue);
        var app = new Vue({
            el:"#app",    
            data:{      
                 str:'hello',
                 htmlStr:"<a href='#'>链接</a>"
            }
        })
    </script>
</body>
</html>

3.v-bind
属性绑定
<标签名 v-bind:属性名=“表达式”></标签名>
简写：<标签名 :属性名=“表达式”></标签名>

<!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>
    <!-- 1-引入vue.js -->
    <script src="./js/vue.js"></script>
</head>
<body>

    <div id="app">
       
        <img v-bind:src="imgurl" alt="">
        <!-- 简写 -->
        <img :src="imgurl" alt="">
    </div>
    
    <script>
        console.log(Vue);
        var app = new Vue({
            el:"#app",    
            data:{      
              imgurl:'https://cdn.jsdelivr.net/npm/@vant/assets/ipad.jpeg'
            }
        })
    </script>
</body>
</html>

4.v-on
事件绑定
<标签名 v-on:click=“事件函数”></标签名>
<标签名 @click=“事件函数”></标签名>

<!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>
    <!-- 1-引入vue.js -->
    <script src="./js/vue.js"></script>
</head>
<body>

    <div id="app">
       <button v-on:click="fn">点我</button>
       <hr>
       <button @click="fn">点我</button>
       <hr>
       <input type="text" @blur="blurFn">
     
    </div>
    
    <script>
        console.log(Vue);
        var app = new Vue({
            el:"#app",    
            data:{      
              imgurl:'https://cdn.jsdelivr.net/npm/@vant/assets/ipad.jpeg'
            },
            methods:{   //定义方法
                // fn:function(){
                //     console.log(123)
                // }

                fn(){
                    console.log(123)
                },
                blurFn(){
                    alert('失去焦点')
                }
            }
        })
    </script>
</body>
</html>

5.v-if
显示隐藏
<标签名 v-if=“条件表达式”></标签名> 表达式的值为true就显示为false就隐藏
注意：v-if和v-else的两个元素必须紧挨着

<!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>
    <!-- 1-引入vue.js -->
    <script src="./js/vue.js"></script>
</head>
<body>

    <div id="app">
        <!-- 需求点击按钮 num的值自增 -->
       {{num}}
       <!-- 1:给按钮添加点击事件 -->
       <button @click="plusFn">+</button>
       <hr>

       <div v-if="num < 10">
           hello
       </div>

       <hr>
       <button @click="isshow=true">显示</button>
       <button @click="isshow=false">隐藏</button>
       <button @click="isshow=!isshow">切换</button>
       <div v-if="isshow">
           显示
       </div>
       <div v-else>
           隐藏
       </div>

       <!-- 
        1：num < 10  div显示  num >= 10  隐藏
        2：要么显示标签出来，要么隐藏标签出来
        -->
     
    </div>
    
    <script>
        console.log(Vue);
        var app = new Vue({
            el:"#app",    
            data:{      
             num:1,
             isshow:true
            },
            methods:{   //定义方法
                // 2 定义点击的事件函数
             plusFn(){
                //  3  data 中num的值自增
                console.log(this.num);   //this指向的是vue实例
                this.num++;
          
             }
            }
        })
    </script>
</body>
</html>

6.v-show
控制显示隐藏
<标签名 v-show=“条件表达式”></标签名> 表达式的值为true就显示为false就隐藏

<div v-show="isshow">
           显示
       </div>
       <div v-show="!isshow">
           隐藏
       </div>

v-if和v-show的区别
都是用来控制元素的显示隐藏
v-if通过插入和删除节点来控制元素的显示隐藏，值为false,v-if是惰性的
v-show 通过css的display属性来控制元素的显示隐藏，频繁的显示隐藏使用v-show

7.v-for
循环渲染

<!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>
    <!-- 1-引入vue.js -->
    <script src="./js/vue.js"></script>
</head>
<body>

    <div id="app">
      <ul>
          <li v-for="(item,i) in arr">
            {{item}}---{{i+1}}
          </li>
      </ul>
      <hr>
      <ol>
          <li v-for="(item,i) in arr2">
              {{item.name}}----{{item.id}}
              <p v-for="(ite,ind) in item.colors">
                {{ite}}---{{ind}}
              </p>
          </li>
      </ol>
      <hr>

      <ul>
          <li v-for="item in arr2">
          {{item.name}}----{{item.id}}
          </li>
      </ul>


      <!-- 遍历对象 -->
      <ul>
          <li v-for="(val,key) in obj">
              {{val}}----{{key}}
          </li>
      </ul>
    </div>
    
    <script>
        console.log(Vue);
        var app = new Vue({
            el:"#app",    
            data:{      
             arr:['aaa','bbb','ccc','ddd'],
             arr1:[
                 {id:11,name:'zs'},
                 {id:22,name:'ls'},
                 {id:33,name:'ww'}
             ],
             arr2:[
                 {
                     id:1,
                     name:'hello',
                     colors:['red','blue','green']
                 },
                 {
                     id:2,
                     name:'good',
                     colors:['orange','yellow','green']
                 },
             ],
             obj:{
                 name:"张三分",
                 age:12,
                 score:90
             }
            },
            methods:{   //定义方法
                
          
             }
        })
    </script>
</body>
</html>

5.案例

<!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="./js/vue.js"></script>
</head>
<body>

    <div id="app">
      <ul>
          <li v-for="(item,i) in arr">
            <span>{{item.name}}</span>
            <!-- 给删除添加点击事件 -->
            <button @click="delOne(ind)">删除</button>
          </li>
      </ul>

      <!-- 需求：点击删除，删除这一行数据 
       删除数组中指定的一条数据  下标   数组.splice(下标，1)
    -->
      
    </div>
    
    <script>
        console.log(Vue);
        var app = new Vue({
            el:"#app",    
            data:{      
               arr:[
                   {
                       id:1,
                       name:"张三",
                       age:23
                   },
                   {
                       id:2,
                       name:"李四",
                       age:19
                   },
                   {
                       id:3,
                       name:"王五",
                       age:30
                   },
                   {
                       id:4,
                       name:"张三",
                       age:27
                   },
                   {
                       id:5,
                       name:"前期",
                       age:23
                   },
               ]
            },
            methods:{   
                delOne(ind){
                    // 数组.splice(下标,1)
                    this.arr.splice(ind,1)
                }
          
             }
        })
    </script>
</body>
</html>