Vue02- 基本指令及使用

最新推荐文章于 2024-07-12 09:18:33 发布

moc ^_^

最新推荐文章于 2024-07-12 09:18:33 发布

阅读量150

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/qq_35976650/article/details/102530188

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

1、插值表达式

类似于 Thymeleaf 模板语言的替换，{{xxx}}插值表达式方式只会替换对应的这个占位符，但在渲染时，可能会出现闪烁问题，用v-clock样式解决。

<style>
    [v-clock] {
        display: none;
    }
</style>

<!-- 使用 v-clock 解决插值表达式闪烁问题 -->
<p v-clock>++++{{ msg }}+++++</p>

2、v-text、v-html

v-text

类似于Thymeleaf中的th:text中替换标签中的所有内容，不存在闪烁问题。

v-html

替换标签的内容，保留Html标签的含义。

<div>{{msg2}}</div>
<div v-text="msg2">++</div>
<div v-html="msg2">++</div>

3、v-bind

Vue中提供的用于绑定属性与数据变量
可以简写层 :要绑定的属性
v-bind中，可以写合法的JS表达式

<input type="button" value="按钮" v-bind:title="myTitle + '哈哈'">
<input type="button" value="按钮2" :title="myTitle + '1234'">

4、v-on

Vue中提供的事件绑定机制
可以简写 @事件名

<input type="button" value="点击" :title="myTitle" v-on:click="show">
<input type="button" value="划过" v-on:mouseover="show">
<input type="button" value="缩写" @click="show">

5、演示

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        [v-clock] {
            display: none;
    }
    </style>
</head>
    
<body>
<div id="app">
    <!-- 使用 v-clock 解决插值表达式闪烁问题 -->
    <p v-clock>++++{{ msg }}+++++</p>

    <!-- v-text：1. 没有闪烁问题 2.会覆盖元素中原本的内容，{{msg}}插值表达式方式则只会替换对应的这个占位符 -->
    <h4 v-text="msg">++++++</h4>
    <hr>

    <div>{{msg2}}</div>
    <div v-text="msg2">++</div>
    <div v-html="msg2">++</div>

    <hr>
    <!-- v-bind: Vue中提供的用于绑定属性与数据变量 -->
    <!-- 注意： v-bind: 指令可以简写层 :要绑定的属性 -->
    <!-- v-bind中，可以写合法的JS表达式 -->
    <input type="button" value="按钮" v-bind:title="myTitle + '哈哈'">
    <input type="button" value="按钮2" :title="myTitle + '1234'">

    <hr>
    <!-- v-on: 事件绑定机制 -->
    <input type="button" value="点击" :title="myTitle" v-on:click="show">
    <input type="button" value="划过" v-on:mouseover="show">
    <input type="button" value="缩写" @click="show">

</div>

<script src="lib/vue-2.4.0.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '123',
            msg2: '<h2>我是一个h2标签</h2>',
            myTitle: '这个我的title'
        },
        methods: {    // methods属性中定义当前Vue实例所有可用的方法
            show:function () {
                alert("hello");
            }
        }
    });
</script>
</body>
</html>

6、跑马灯实例

定时器

原型：setInterval(code, milliseconds);

– 按照指定的周期（以毫秒计）来调用函数或计算表达式

– 会不停地调用函数，直到clearInterval()被调用或窗口被关闭

原型：setTimeout(code, milliseconds);

– 用于在指定的毫秒数后调用函数或计算表达式

– 使用clearTimeout()方法来阻止函数的执行
this

1）在Vue实例中，如果想要获取data中的数据，或者想要调用methods中的方法必须通过 this.属性名 或 this.方法名 进行访问

2）this 表示当前的Vue实例
自动绑定

1）Vue实例会监听自己data中数据的改变，只要有数据发生变化，就会自动数据更新到页面中去

2）编程时只需要考虑数据，不需要考虑页面渲染

箭头函数

语法：参数 => 函数体

要点：解决this指向问题，function函数会动态绑定this，而箭头函数内部的this永远和外部一致

用法：

// 基本用法：
var f = v => v; 
// 等价于
var f = function(a) {
 return a;
}
f(1);  //1

// 当箭头函数没有参数或者有多个参数，要用 () 括起来
var f = (a,b) => a+b;
f(6,2);  //8

// 数函数体有多行，用 {} 包裹，当只有一行且需要返回时，可省略 {} , 结果会自动返回
var f = (a,b) => {
 let result = a+b;
 return result;
}
f(6,2);  // 8

跑马灯实例代码

步骤：
1. 给【滚动】按钮，绑定一个点击事件 v-on @
2. 在按钮的处理函数中，写相关的逻辑代码：获取msg字符串，调用substring方法截取字符串，将第一个截取放在最后一个
3. 为了实现点击后，步骤2自动进行，需要将其放入一个定时器中执行
4. 避免多次点击【滚动】，需进行定时器开启检查
5. clearInterval()停止定时器，定时器ID置null

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>

<body>
<div id="app">
    <input type="button" value="滚动" @click="rolling2">
    <input type="button" value="停止" @click="stop">
    <h4>{{ msg }}</h4>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '此广告位长期招商！',
            intervalId: null   // 定时器ID
        },
        methods: {
            rolling(){
                //console.log(this.msg);
                var _this = this;
                setInterval(function () {
                    var start = _this.msg.substring(0, 1);
                    var end = _this.msg.substring(1);
                    _this.msg = end + start;
                },200)
            },
            // 箭头函数简化
            rolling2(){
                // 先检查定时器是否已经开启过
                if (this.intervalId != null)
                    return;

                this.intervalId = setInterval(() => {
                    var start = this.msg.substring(0, 1);
                    var end = this.msg.substring(1);
                    this.msg = end + start;
                },300)
            },

            // 停止定时器
            stop(){
                clearInterval(this.intervalId);
                // 每当清除了定时器，需要将定时器ID置为null
                this.intervalId = null;
            }
        }
    })
</script>
</body>
</html>