vue系统指令

2019-05-31 本文已影响0人 jarbir

本文主要内容

插值表达式
v-clock
v-text
v-html
v-bind
v-on
跑马灯效果

vue初体验

新建空的html文件，插入vue.js文件

<!DOCTYPE html>
<html>
<head>
    <title>heiheihei</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{name}}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{//module层
                name:'jarbir'
            }
        })
    </script>
</body>
</html>

显示样式：

微信图片_20190531103205.png

在console中输入app.$data.name ='kkk'，页面将会自动的更新name的值，不需要去操作dom。

插值表达器{{}}

数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值。例如：

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg 属性（msg定义在data对象中）的值。

无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会自动更新。

{{}}对JavaScript 表达式支持，例如：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ name == 'smyhvae' ? 'true' : 'false' }}

{{ message.split('').reverse().join('') }}

但是有个限制就是，每个绑定都只能包含单个表达式，如下表达式无效：

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

v-cloak

v-cloak：保持和元素实例的关联，直到结束编译后自动消失。

v-cloak指令和CSS 规则一起用的时候，能够解决差值表达式闪烁的问题（即：可以隐藏未编译的标签直到实例准备完毕）。

就拿上一段代码来举例，比如说，{{name}}这个内容，在网速很慢的情况下，一开始会直接显示{{name}}这个内容，等网络加载完成了，才会显示smyhvae。那这个闪烁的问题该怎么解决呢？

解决办法是：通过v-cloak隐藏{{name}}这个内容，当加载完毕后，再显示出来。

<!DOCTYPE html>
<html>
<head>
    <title>heiheihei</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css">
        
    [v-cloak] {
      display: none;
    }
    </style>
</head>
<body>
    <div id="app">
        <span v-cloak>{{name}}</span>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{//module层
                name:'jarbir'
            }
        })
    </script>
</body>
</html>

v-text

v-text可以将一个变量的值渲染到指定的元素中。例如：

<!DOCTYPE html>
<html>
<head>
    <title>heiheihei</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css">
        
    </style>
</head>
<body>
    <div id="app">
        <span v-text="name"></span>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{//module层
                name:'jarbir'
            }
        })
    </script>
</body>
</html>

image.png

差值表达式和 v-text 的区别

<!-- 差值表达式 -->
<span>content:{{name}}</span>

<!-- v-text -->
<span v-text="name">/span>

区别

v-text 没有闪烁的问题，因为它是放在属性里的。
插值表达式只会替换自己的这个占位符，并不会把整个元素的内容清空。v-text 会覆盖元素中原本的内容。

v-html

v-text是纯文本，而v-html会被解析成html元素。

注意：使用v-html渲染数据可能会非常危险，因为它很容易导致 XSS（跨站脚本）攻击，使用的时候请谨慎，能够使用{{}}或者v-text实现的不要使用v-html。

<!DOCTYPE html>
<html>
<head>
    <title>heiheihei</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css">
        
    </style>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <p v-text="msg"></p>
         <p v-html="msg"></p>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{//module层
                msg:'<h1>1234234324</h1>'
            }
        })
    </script>
</body>
</html>

运行结果：

image.png

v-bind:属性绑定机制

v-bind:用于绑定属性

<img v-bind:src="imgsrc">

<p v-bind:style="{fontSize:size+'px'}"></div>

具体例子：

<!DOCTYPE html>
<html>
<head>
    <title>heiheihei</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css">
        
    </style>
</head>
<body>
    <div id="app">
        <!--就是value字符串 -->
        <input type="text" value="msg">
        <!--是vue中msg的值-->
        <input type="text" v-bind:value="msg">
        <!--path是vue中的值 -->
        <a v-bind="{href:'https://www.baidu.com/'+path}">链接</a>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{//module层
                msg:'value',
                path:'a.html'
            }
        })
    </script>
</body>
</html>

结果:

image.png

v-on:事件绑定机制

v-on:click:点击事件

<!DOCTYPE html>
<html>
<head>
    <title>heiheihei</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .activated {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <div @click="handleDivClick"
            :class="[activated]"
        >
            Hello world
        </div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data: {
                activated:""
            },
            methods: {
                //点击事件执行方法
                handleDivClick: function() {
                    this.activated = this.activated === "activated"?"":"activated"
                }
            }
        })
    </script>
</body>
</html>

结果：
点击文字之后变成红色

image.png

v-on的简写形式

例如:

  <button v-on:click="change">改变name的值</button>

可以简写成

  <button @click="change">改变name的值</button>

v-on的常用事件

v-on 提供了click 事件，也提供了一些其他的事件。
*v-on:click
*v-on:keydown
*v-on:keyup
*v-on:mousedown
*v-on:submit

实践案例（跑马灯效果）

文字滚动实现思路

每次拿到字符串，截取第一个字符，放到字符串的结尾，这样就实现滚动效果
实现文字的自动滚动效果，可以把步骤1放到定时器中，重复操作。
代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>heiheihei</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <input type="button" value="跑马灯走起" @click="startMarquee">
        <input type="button" value="跑马灯结束" @click="stopMarquee">
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data: {
                msg:'还要多久才能进入你的心',
                intervalId:null
            },
            methods: {
                startMarquee: function() {
                    //开启定时器之前先判断避开启多个定时器
                    if (this.intervalId != null) {return;}
                    //this指向问题
                    // var _this=this;
                    // this.intervalId = setInterval(function() {
                    //  var start = _this.msg.substring(0,1);
                    //  var end = _this.msg.substring(1);
                    //  _this.msg = end + start;
                    // },400);

                    //上面的代码中，我们发现，如果在定时器中直接使用this，这个this指向的是window。
                    //为了解决这个问题，我们是通过_this来解决了这个问题。
                    //另外，我们还可以利用箭头函数来解决this指向的问题，
                    //因为箭头函数总的this指向，会继承外层函数的this指向。

                    this.intervalId = setInterval(() => {
                    var start = this.msg.substring(0,1);
                    var end = this.msg.substring(1);
                    this.msg = end + start;
                    },400);
            
                },
                stopMarquee:function() {
                    clearInterval(this.intervalId)
                    this.intervalId = null;
                }
            }
        })
    </script>
</body>
</html>

结果示例:

image.png

具体示例总结:

在vue的实力中，如果想要获取data中的属性，methods中的方法，都要通过this来进行访问。这里的this指的是Vue的实力对象。
*vm实例中会监听自身data中所包含的数据，只要数据发生变化，就会自动刷新，减少dom的操作。

vue系统指令

本文主要内容

vue初体验

插值表达器{{}}

v-cloak

v-text

差值表达式和 v-text 的区别

区别

v-html

v-bind:属性绑定机制

v-on:事件绑定机制

v-on的简写形式

v-on的常用事件

实践案例（跑马灯效果）

文字滚动实现思路

猜你喜欢

热点阅读