美文网首页
与Vue的第一次邂逅

与Vue的第一次邂逅

作者: 间歇性丶神经病患者 | 来源:发表于2018-09-16 12:35 被阅读48次

[toc]

VUE 基础篇

基础标签

v-cloak

实例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="lib/vue-2.4.0.js"></script>
    </head>
    <body>
        <div id="app">
            <p>{{msg}}</p>
        </div>
        <script>
            new Vue({
                el:'#app',
                data:{
                    msg:123,
                    
                }
            });
        </script>
    </body>
</html>

其中{{msg}}在网络情况不佳的时候会显示默认值，然后再显示真实的数据，为了解决这个问题，可以使用v-cloak

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="lib/vue-2.4.0.js"></script>
    </head>
    <body>
        <div id="app">
            <p v-cloak>{{msg}}</p>
        </div>
        <script>
            new Vue({
                el:'#app',
                data:{
                    msg:12344234,
                    
                }
            });
        </script>
    </body>
</html>

在css中要添加：

[v-cloak] {
    display: none;
}

其中不起作用的话，考察2个点：

  1. v-cloak的display属性被层级更高的给覆盖掉了，所以要提高层级：
[v-cloak] {
    display: none !important;
}
  1. 样式放在了@import引入的css文件中，可以放在link引入的css文件里或者内联样式中

v-text

作用和v-cloak相似，但是自带解决闪烁问题

区别：

  1. v-cloak需要自己解决闪烁问题，v-text不用
  2. v-cloak只会替代{{key}}的内容，而v-text会覆盖元素中所有的内容
<template>
  <div id="app">
        <p v-cloak>{{msg}}+++++++++</p>
        <p v-text="msg">+++++++++</p>
    </div>
</template>

<script>
export default{
    
    data(){
        return {
            msg:213,
        };
    }
}
</script>

结果页面：


运行结果

V-html

这个有点类似于安卓的,且也会覆盖里面原有的属性

TextView.setText(Html.fromHtml(msg))；

实例代码：

<template>
  <div id="app">    
        <p v-cloak>{{htmlMsg}}</p>
        <p v-text="htmlMsg"></p>
        <p v-html="htmlMsg"></p>
    </div>
</template>

<script>
export default{
    data(){
        return {
            msg:213,
            htmlMsg:"<h1>凌宇好帅哇~！(★ ω ★)</h1>"
        };
    }
}
</script>

运行结果：


image.png

V-bind

绑定属性，可以被简写为：：

        <input type="button" value="按钮" :title="htmlMsg"/>
        <input type="button" value="按钮" v-bind:title="htmlMsg"/>

值得注意的是：
v-bind里面可以写js表达式

v-on

事件绑定机制

<template>
  <div id="app">
        
        <p v-cloak>{{htmlMsg}}</p>
        <p v-text="htmlMsg"></p>
        <p v-html="htmlMsg"></p>
        <input type="button" value="按钮" :title="htmlMsg"/>
        <input type="button" value="按钮" v-bind:title="htmlMsg" v-on:click="showAlert(htmlMsg)"/>
        
    </div>
</template>

<script>
export default{
    
    data(){
        return {
            msg:213,
            htmlMsg:"<h1>凌宇好帅哇~！(★ ω ★)</h1>"
        };
    },
    methods:{
        showAlert:function(msg){
            alert(msg)
        }
    }
     
}
</script>

V-model

数据双向绑定的标签

总结练习：跑马灯

<template>
    <div>

        <p v-text="msg"></p>


        <input type="button" value="开始" v-on:click="startRun()" />
        <input type="button" value="结束" v-on:click="stopRun()" />

    </div>

</template>
<script>
    export default {
        data() {
            return {
                msg: "凌宇好帅哇~！(★ ω ★)",
                myInterval: null,
            };
        },
        methods: {
            startRun: function () {
                if (this.myInterval != null) return;
                this.myInterval = setInterval(() => {
                    var startStr = this.msg.substring(0, 1);
                    var endStr = this.msg.substring(1);
                    var result = endStr + startStr;
                    this.msg = result;
                }, 300);
            },
            stopRun: function () {
                clearInterval(this.myInterval);
                this.myInterval=null;
            },
        }
    }
</script>

事件修饰符

  • .stop 阻止冒泡
  • .prevent 阻止默认事件
  • .capture 添加事件监听器时使用事件捕获模式
  • .self 只当事件在该元素（比如不是子元素）触发时触发回调
  • .once 事件只触发一次

class类样式绑定的几种方法

常规方法

 <h1 class="red big">{{msg}}</h1>

v-bind 方法

  <h1 v-bind:class="['red','big']">{{msg}}</h1>

使用三元表达式

<h1 v-bind:class="['red',isBig?'big':'']">{{msg}}</h1>

在数组中使用三元表达式，提高代码可读性

 <h1 v-bind:class="['red',{'big':isBig}]">{{msg}}</h1>

直接使用类

<h1 v-bind:class="{red:true,big:isBig}">{{msg}}</h1>

完整代码为：

<template>
  <div>
    <!--// 常规方法-->
    <h1 class="red big">{{msg}}</h1>

    <!--v-bind 方法-->
    <h1 v-bind:class="['red','big']">{{msg}}</h1>

    <!--使用三元表达式-->
    <h1 v-bind:class="['red',isBig?'big':'']">{{msg}}</h1>

    <!--在数组中使用三元表达式，提高代码可读性-->
    <h1 v-bind:class="['red',{'big':isBig}]">{{msg}}</h1>

    <!--直接使用类-->
    <h1 v-bind:class="{red:true,big:isBig}">{{msg}}</h1>
  </div>

</template>

<script>
    export default {
       data(){
         return {
           msg:'凌宇是个大帅逼 (★ ω ★)',
           isBig:true
         };
       }
    }
</script>

<style scoped>
  .red{
    color: red;
  }
  .big{
    font-size: 24px;
  }
</style>

style属性绑定的几种方法

常规操作

 <!--常规操作-->
    <p :style="{color:'red'}">{{msg}}</p>

指向一个类

 <!--指向一个类-->
    <p :style="redObject">{{msg}}</p>

指向一个数组

 <!--指向一个数组-->
    <p :style="[redObject,bigObject]">{{msg}}</p>

完整代码为：

<template>


  <div>
    <!--常规操作-->
    <p :style="{color:'red'}">{{msg}}</p>
    <!--指向一个类-->
    <p :style="redObject">{{msg}}</p>
    <!--指向一个数组-->
    <p :style="[redObject,bigObject]">{{msg}}</p>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: '凌宇是个大帅逼 (★ ω ★)',
        redObject:{color:'red'},
        bigObject:{fontSize:'40px'}
      };
    }
  }
</script>

<style scoped>

</style>

v-for的几种使用方法

注意：在新版本中,v-for都需要一个key，
1. key只能是string或者number属性
2. key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值

只要item的遍历

<p v-for="item in  list">{{item}}</p>

要item和索引的遍历

 <p v-for="(item  , i ) in list">
    {{i+"===="+item}}
    </p>

遍历对象

<p v-for="(key,val,i) in Handsome">
      {{i}} =={{val}} = {{key}}
    </p>

数字迭代

<p v-for="i in 10">{{i}}</p>

完整代码为

<template>


  <div>
    <!--只要item的遍历-->
    <!--<p v-for="item in  list">{{item}}</p>-->

    <!--要item和索引的遍历-->
    <!--<p v-for="(item  , i ) in list">-->
    <!--{{i+"===="+item}}-->
    <!--</p>-->
    <!--遍历对象-->
    <!--<p v-for="(key,val,i) in Handsome">-->
      <!--{{i}} =={{val}} = {{key}}-->
    <!--</p>-->
    <!--数字迭代-->
    <!--<p v-for="i in 10">{{i}}</p>-->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list: [1, 32, 433, 234, 32, 543, 43655, 234, 4325],
        Handsome: {
          name: 'Ly',
          age: "18",
          sex: "guy"
        }
      };
    }
  }
</script>

<style scoped>

</style>

v-if 和 v-show

相同

  1. 都可以起到根据某一个flag显示隐藏控件的作用

不同点

  1. v-if 每次都会重新删除或者创建元素
  2. v-show 不会进行dom的删除创建，只是切换了disable:none样式

总结

  1. v-if 有较高的切换性能消耗
  2. v-show 有较高的初始渲染消耗
  3. 如果涉及频繁切换，最好不要用v-if,而是推荐使用v-show;如果元素可能永远也不会被显示出来被用户看到，则推荐使用v-if。（因为如果一个元素可能永远不会显示出来，使用v-show，那么它实际上会被添加到dom中，而v-if是只有显示的时候才会加入）

相关文章

  • 与Vue的第一次邂逅

    [toc] VUE 基础篇 基础标签 v-cloak 实例代码： 其中{{msg}}在网络情况不佳的时候会显示默认...

  • 原创六首【夏日倾“晴”两周年】爱情回忆录特辑作品

    我的爱情故事和七次的邂逅与相约 没有浪漫小说般的邂逅 只有平淡而朴实的偶遇 第一次 我们邂逅在鼻舒堂 一起治疗鼻炎...

  • 与书邂逅

    与书邂逅 倾听紫燕呢喃 与书邂逅 阅尽人间春色 与书邂逅 兴怀望梅止渴 与书邂逅 但得沧海一粟 与书邂逅 不为追逐...

  • 爱情，需要你再坚持一下

    “人生最美好的邂逅就是你” — 1 — 男生与女生的第一次邂逅，是在大学的饭堂里。 男生无意间的抬头，就被女生身上...

  • 来简书的第一天

    尽管夜已深，但还是沉迷于与你的第一次邂逅，好奇，期待，向往……

  • 复盘--与行动营相遇、相识、相知

    邂逅---初识行动营 第一次相遇 与行动营的邂逅发生在8月22日，不要问我为啥记得这么清楚。我当前就把这个信息告诉...

  • 子春诗笺《见章·似曾相识》

    似曾相识 第一次邂逅 是莫名的亲近 第一次邂逅 是一次浓浓热切 ...

  • 邂逅

    我与早晨， 邂逅于东方曙光。 我与黄昏， 邂逅于夜之即来。 我与白云， 邂逅于碧蓝天空。 我与小流， 邂逅于高山源...

  • 最美的遇见

    最美的遇见 文/梁子 第一次 与你邂逅 心被箭头狠狠穿透 从此 人间便是仙境

  • Vue系列(一):邂逅Vue开发

    邂逅Vue开发 遇见Vuejs1.1.为什么学习Vuejs？每个人学习Vue的目的是各不相同的。可能你的公司正要将...

网友评论

      本文标题：与Vue的第一次邂逅

      本文链接：https://www.haomeiwen.com/subject/boctnftx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|与Vue的第一次邂逅|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！