Vue.js

前端 / 2020-03-10

Vue.js

[toc]

<body>
    <div id="app">
        {{message}}
    </div>
    <!--引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app =new Vue({
            el:"#app",
            data:{
                message:"hello vue !"
            }
        });
    </script>
</body>

1. vue 对象

app = new vue();

2. 模板语法

2.1 v-text

v-text设置标签内容(textContent)

  • 默认写法会替换==全部==内容
  • 差值表达会替换==指定内容==
  • 内部支持写表达式
  • 仅 支持 内部
<body>
    <div id="app">
        <!-- 差值表达式 支持拼接 -->
        <h2>{{message}}(test)</h2>
        <!-- 全部覆盖 -->
        <h2 v-text="info">(test)</h2>
    </div>
    <!--引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app =new Vue({
            el:"#app",
            data:{
                message:"hello vue !",
                info:"你好,世界!",
            }
        });
    </script>
</body>

2.2 v-html

v-html设置标签innerHTML

  • 内容中由html 结构i会被==解析为标签==

  • 需要解析html时用

 <body>
     <div id="app">
         <p v-html="content"></p>
         <h2 v-text="content">(test)</h2>
     </div>
     <!--引入vue -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app =new Vue({
             el:"#app",
             data:{
                 content:"<a href='www.baidu.com'>百度一下</a> ",
             }
         });
     </script>
 </body>

2.3 v-on

v-on为元素绑定事件

  • 事件名不需要写on
  • 指令可以简写为@
  • 绑定的方法定义在==methods==属性中
  • 方法内部可以用==this==关键字访问定义在data中的数据
  • 支持自定义参数
  • 支持事件修饰符(@keyup.enter="xxx”)
  <body>
      <div id="app">
          <!-- 正常写法-->
          <input type="button" value="v-on指令" v-on:click="doIt">
          <!-- 简写 @method=xxxx -->
          <input type="button" value="v-on简写" @click="doIt">
          <input type="button" value="v-on简写" @dblclick="doIt">
      
          <h2 @click="getFoodName">{{food}}</h2>
      </div>
      <!--引入vue -->
      <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");
  
                  },
                  // 获取食物名字
                  getFoodName:function(){
                      // console.log(this.food);
                      this.food+="老好吃!";
                  }
              },
          });
      </script>
  </body>

2.4 v-show

v-show 根据表达式真假切换==元素==的显示和隐藏


<body>
    <div id="app">
        <input type="button" value="切换状态" v-on:click="changeState">
        <div id="div1" v-show="isShow">
    
        </div>
    
    </div>
    
    <!-- 引入 vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false,
            },
            methods: {
                // 切换状态
                changeState: function () {
                    console.log(this.isShow);
                    this.isShow = !this.isShow;
                }
            },
        });
    </script>
</body>

2.5 v-if

v-if 根据表达式真假切换元素的显示和隐藏

本质: 通过操作dom 元素来切换显示状态

  • 当表达式值为 true,元素存在于dom树中,为false 从dom树中移除.
  • ==在多次 高频率使用时 不推荐 使用==

<body>
    <div id="app">
        <input type="button" value="切换状态" v-on:click="changeState">
        <!-- 性能开销相对较大 高频率操作不建议使用-->
        <div id="div1" v-if="isShow">
    
        </div>
    
    </div>
    
    <!-- 引入 vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false,
            },
            methods: {
                // 切换状态
                changeState: function () {
                    console.log(this.isShow);
                    this.isShow = !this.isShow;
                }
            },
        });
    </script>
</body>

2.6 v-bind

v-bind 为元素==绑定==属性

  • 完整写法 v-bind:属性名
  • 简写可以忽略v-bind 只保留 :属性名
<body>
    <div id="app">
        <input type="button" value="打开图片"  v-on:click="changeActive">
        <img v-bind:src="imgSrc" v-bind:title="imgTitle" v-show="isActive">

    </div>
    
    <!-- 引入 vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        var app =new Vue({
            el:"#app",
            data:{
                imgSrc:"https://www.baidu.com/img/bd_logo1.png?where=super",
                imgTitle:"百度一下",
                isActive:false,
            },
            methods:{
                changeActive:function(){
                    this.isActive=!this.isActive;
                }

            },
        });

    </script>
</body>

2.7 v-for

v-for 根据数据生成==列表==结构

  • 数组经常和 v-for 结合使用
  • 语法:(item,index) in 数据
  • item 和 index 可以结合 其他指令一起使用
  • 数组长度更新回同步到页面上(==响应式==)
<body>
    <div id="app">
        <ul>
            <!--没有索引的-->
            <li v-for="item in arrFruit">
                {{item}}
            </li>
        </ul>

        <ul>
            <!--带索引的-->
            <li v-for="(item,index) in arrFruit">
                {{index+1}}{{item}}
            </li>

        </ul>
    </div>

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

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                arrFruit: ["香蕉", "苹果", "梨", "葡萄"],
            },
        });
    </script>
</body>

2.8 v-model

v-model 获取和设置表单元素的值 ==双向数据绑定==

3. vue实例

  • el 挂载点
  • data数据
  • methods方法
    • this关键字可以获取data 中 数据
  • v-text设置文本
  • v-html设置innerHTML
  • v-on 事件 || @xxx
  • v-show 元素是否可见
  • v-if 元素是否存在
  • v-bind绑定元素属性

3.1 计数器

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>

        #app{
            width: 60%;
            margin: 150px auto ;
            text-align: center;
        }

        [type="button"] {
            background-color: gainsboro;
            width:120px;
            height: 60px;
       
            font-size: 40px;
            color: brown;
            outline: none;
            margin: 0;
        }
        #app [type="button"]:first-child{
            border-radius: 20px 0  0 20px;
        }
        #app [type="button"]:last-child{
            border-radius: 0 20px 20px 0;
        }
        #app span{
            display: inline-block;
            width: 100px;
            height: 60px;
            
            background-color: white;
            border:1px solid #ccc;
            font-size: 40px;
            text-align: center;
            margin: 0 ;
        }
    </style>
</head>
<div id="app">
    <input type="button" value="-" @click="sub">
    <span>{{num}}</span>
    <input type="button" value="+" @click="add">
</div>

<body>
    <!-- 引入 vue-->
    <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 () {
                    console.log("add");
                    if (this.num < 10) {
                        this.num++;
                    } else {
                        alert("别点了最大了!");
                    }
                },
                sub: function () {
                    console.log("sub");
                    if (this.num > 0) {
                        this.num--;
                    } else {
                        alert("别点了最小了!");
                    }
                }
            }
        });
    </script>
</body>

</html>

3.2 图片切换

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        #wrapper {
            background-color: #ccc;
            width: 700px;
            height: 500px;
            margin: 100px auto;
            border-radius: 30px;
        }

        #wrapper img {
            position: relative;
            top: 60px;
            left: 100px;
            width: 500px;
            height: 300px;
        }

        #prev-btn {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 100px;
            background-color: black;
            opacity: 30;
            z-index: 10;
            left: -480px;
            top:-120px;
        
        }

        #next-btn {
            position: relative ;
            display: inline-block;
            width: 60px;
            height: 100px;
            background-color: black;
            opacity: 30;
            z-index: 3;
            top:-120px;
            left: 0px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="wrapper">

            <img v-bind:src="imgArr[index]" alt="提示">

            <a id="prev-btn" href="javascript:void(0)" @click="prev" v-show="index!=0">上一页</a>
            <a id="next-btn" href="javascript:void(0)" v-on:click="next" v-show="index<imgArr.length-1">下一页</a>

        </div>

    </div>

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

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgArr: ["http://img2.imgtn.bdimg.com/it/u=4140681179,1746829921&fm=26&gp=0.jpg",
                    "http://img3.imgtn.bdimg.com/it/u=3544763245,2194193016&fm=26&gp=0.jpg",
                    "http://img3.imgtn.bdimg.com/it/u=1891113743,2129264950&fm=26&gp=0.jpg",
                    "http://img2.imgtn.bdimg.com/it/u=31907179,2274252007&fm=11&gp=0.jpg",
                    "http://img5.imgtn.bdimg.com/it/u=1408543846,479797183&fm=26&gp=0.jpg",
                    "http://img0.imgtn.bdimg.com/it/u=1326892186,836646254&fm=26&gp=0.jpg",
                    "http://img4.imgtn.bdimg.com/it/u=1768870710,2903267606&fm=26&gp=0.jpg",
                    "http://img0.imgtn.bdimg.com/it/u=1295891434,1066665956&fm=26&gp=0.jpg",
                    "http://img3.imgtn.bdimg.com/it/u=2071263204,1441252515&fm=26&gp=0.jpg",
                    "http://img2.imgtn.bdimg.com/it/u=4072638143,818724319&fm=26&gp=0.jpg",
                    "http://img4.imgtn.bdimg.com/it/u=1761250919,1896060533&fm=26&gp=0.jpg",
                    "http://img5.imgtn.bdimg.com/it/u=1859447979,3566605488&fm=26&gp=0.jpg",
                    "http://img3.imgtn.bdimg.com/it/u=2622342178,3635393673&fm=26&gp=0.jpg",
                    "http://img2.imgtn.bdimg.com/it/u=1260288850,1826522086&fm=26&gp=0.jpg",
                ],
                index: 0,
            },
            methods: {
                // 上一张
                prev: function () {
                    this.index--;
                },
                // 下一张
                next: function () {
                    this.index++;
                },
            },
        });
    </script>
</body>

</html>
vue html

文章目录

最新评论

最新文章