Vue的简单语法（一）

最新推荐文章于 2022-09-12 20:32:16 发布

我一定要成为架构师

最新推荐文章于 2022-09-12 20:32:16 发布

阅读量212

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43907332/article/details/99689160

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

Vue的基本指令
- `插值表达式`、`v-cloak`、`v-text`、`v-html`
- `v-bind`的三种用法
例子跑马灯
遇到的错误
总结

Vue的基本指令

`插值表达式`、`v-cloak`、`v-text`、`v-html`

<!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>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div class="app">
        <!-- 使用v-cloak能够解决插值表达式闪烁的问题 -->
        <span v-cloak>++++++ {{msg}}    ---</span>
        <h4 v-text="msg">qwewqds</h4>
        <!-- 默认v-text没有闪烁问题 -->
        <!-- v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空 -->

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

        <!-- v-bind:是Vue中，提供用于绑定属性的指令 -->
        <input type="button" value="old按钮" v-bind:title="mytitle + '哈哈'" id="btn">
        <!-- 注意：v-bind：指令可以被简写为：要绑定的属性 -->
        <!-- v-bind中，可以写合法的JS表达式 -->
        <input type="button" value="new按钮" :title="mytitle + '哈哈'" v-on:click="show" v-on:mouseover="show">
        <input type="button" value="new按钮" :title="mytitle + '哈哈'" @click="show" @mouseover="show">
    </div>
    
    <script src="./lib/vue-2.4.0.js"></script>
    <script>
        var vm = new Vue({
            el:'.app',
            data:{
                msg:'0123',
                msg2: '<h1>哈哈哈，我大我骄傲</h1>',
                mytitle: '这是一个自己定义 的title'
            },
            methods: {//这个methods属性中定义了当前Vue实例中所有可用的方法
                show:function () {
                    alert('hello')
                }
            }
        })

        document.getElementById('btn').onclick = function(){
            alert('hello')
        }
    </script>

</body>
</html>


<!-- 1. 如何定义一个基本的额Vue代码结构
     2. 插值表达式和v-text
     3. v-clock
     4. v-html
     5. v-bind Vue提供的属性绑定机制 缩写是：
     6. v-on Vue提供的事件绑定机制 缩写是@-->

`v-bind`的三种用法

直接使用指令v-bind
使用简化指令:
在绑定的时候，拼接绑定内容：:title="btnTitle + ', 这是追加的内容'"

<!-- v-bind:是Vue中，提供用于绑定属性的指令 -->
<input type="button" value="按钮" v-bind:title="mytitle + '哈哈'">
<!-- 注意：v-bind：指令可以被简写为：要绑定的属性 -->
<!-- v-bind中，可以写合法的JS表达式 -->
<input type="button" value="按钮" :title="mytitle + '哈哈'">

例子跑马灯

<!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 class="fd-app">
        <!-- 需要注意，如果你点击按钮没有翻译，但是控制台可以输出，你应该看一看你是否翻译了这个网页，如果你翻译了这个网页就无法滚动 -->
        <button @click="move">浪起来~~</button>
        <button @click="stop">猥琐发育</button>
        <h3>{{msg}}</h3>
    </div>
    <script>
        // 分析：
        // 1. 给浪起来按钮绑定一个点击事件v-on ,@
        // 2. 给按钮事件处理函数中，写相关的业务逻辑代码：拿到msg字符串，然后调用字符串的subString来进行字符串的截取操作，把第一个字符放到最后
        // 3. 为了实现点击一下按钮，自动截取的功能，需要把2步骤的代码，放到定时器中
        var vm = new Vue({
            el:".fd-app",
            data:{
                msg:'猥琐发育~~~别浪！',
                intervalid:null //在data上定义定时器ID
            },
            methods: {
                // 注意：在VM实例中，如果想要获取data上的数据，或者想要调用methods中的方法，必须通过this。数据属性名或this。方法名来访问，这里的this
                //就包是我们new出来的VM实例对象
                move:function(){
                    //防止开启多个定时器
                    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;
                    },400);
                    
                    //注意：Vm实例，会监听自己身上data中所有数据的改变，只要数据一发生改变，就会自动把最新的数据，从data上同步到页面中去；
                    // 好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面
                },
                stop(){
                    clearInterval(this.intervalid);
                    //每当清楚了定时器之后，需要重新把intervalid设为null
                    this.intervalid = null;
                }
            }
        })
    </script>
</body>
</html>

遇到的错误

1.第一个v-cloak是css样式不是js脚本

这段代码式css样式，不能放在script标签中，否则会报错
<style>
        [v-cloak] {
            display: none;
        }
</style>

如果你翻译了这个网页将不能够出现跑马灯效果！！！一定要显示原网页

总结

v-text、v-html等属性会覆盖掉原本标签中的内容，包括插值表达式。
v-cloak能够解决插值表达式闪烁的问题
v-bind缩写是：
v-on缩写是@

我一定要成为架构师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的简单语法（一）

文章目录Vue的基本指令`插值表达式`、`v-cloak`、`v-text`、`v-html``v-bind`的三种用法例子跑马灯遇到的错误总结Vue的基本指令插值表达式、v-cloak、v-text、v-html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&gt...
复制链接

扫一扫