Vue 基础

指令:

插值表达式:
语法:{{要插入的值}},此时相当于占位符,到时候{{关键字}}会被替换成
Model中的数据
bug点:
当网速较慢时,Vue初始化未完成时,插值表达式不能被解析,会直接显示
出来,加载完毕之后又会被替换成真实结果,造成闪烁(Vue的加载代码写在
HTML元素之后时会出现该bug)
1.v-cloak指令:
语法:把它当作HTML元素的一个属性使用
示例:

{{msg1}}


特点:
当Vue加载完毕后,v-cloak属性会自动消失
使用:
添加如下CSS样式:让所有带v-cloak属性的元素隐藏,Vue加载完成后显示
实现,解决插值表达式闪烁的问题
[v-cloak]{
display: none;
}

2.v-text:
语法:


作用:和插值表达式一样,用于给HTML元素添加文本
区别:
1.v-text不会存在闪烁问题
2.v-text会将Model中的数据完全替换到HTML元素中(覆盖)
3.插值表达式只会将Model中的数据替换到插值表达式中(占位符内容的替换)
相同点:
1.插值表达式和v-text都可以给HTML元素显示文本
2.插值表达式和v-text都不会解析要添加文本中的HTML标签(原样显示)

3.v-html:
和v-text的唯一区别:给HTML添加内容时会解析内容中的HTML

代码测试:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础表达式</title>
</head>
<body>
<h1>v-cloak、v-text、v-html指令以及插值表达式的学习</h1>
<div id="aaa">
    <p v-cloak>{{msg1}}</p>

    <p>{{msg1}}</p>

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

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

    <p>{{msg2}}</p>

    <p v-html="msg2"></p>
</div>

<script src="../lib/vue.js" type="text/javascript"></script>
<script type="text/javascript">
       var vm = new Vue({
           el:"#aaa",
           data:{
               msg1:"hello",
               msg2:"<p style='color:red'>我是一个p标签</p>"
           }

           })
</script>
</body>
</html>

运行结果:
在这里插入图片描述
4. v-bind:
语法:在HTML元素的属性目前加上绑定标识,此时HTML的该属性的值就会根据属性值的名字从Model中获取数据
示例:

var vm = new Vue({
el:"#app",
data:{
msg:“吾名”,
name:“超强”
}
});
注意:
1.【v-bind:】用于绑定HTML元素属性的值
2.【v-bind:】可以简写为:
3.Vue框架会把使用了v-bind:标识的HTML的属性的值当作一个Javascript表达式来使用
只要表达式合法,就能执行(当然,数据必须时字面量或来自于Model中)
如:
:value=“msg+‘你好’”
:value=“msg+name”

5. v-on:
语法:在HTML的事件属性(不带on)前加上绑定标识,此时HTML触发此事件时,会执行事件中绑定的代码
示例:
点击下显示你好
<button @click=“sayHello(name)”>点击下显示你好
var vm = new Vue({
el:"#app",
data:{
msg:“吾名”,
name:“超强”
},
methods:{
sayHello:function (name) {
alert(“你好!”+name);
}
}
});
注意:
1.常见的web网页的事件都支持绑定
2.事件名字不带on
3.事件触发的方法必须在methods中定义
4.v-on标识的属性会被Vue解析为特定JavaScript,只要内容符合JavaScript规范
都能正确执行(比如传入参数)
4.【v-on:】等价于【@】

代码测试:

<!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">
    <title>v-bind,v-on指令的学习</title>
    <script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>
<h1>  </h1>

<div id="app">
    <h2><label>用户名:<input type="text" name="username" v-bind:value="msg" /></label></h2><br>
    <h2>      用户名: <input type="text" name="aa0" :value="msg+name" ></h2><br>

    <button v-on:click=" sayHello(name)"> 点击显示你好</button><br>
    <button @click="sayHello(name)"> 点我</button><br>



</div>

<script type="text/javascript">

    var vm = new Vue({
        el:"#app",
        data:{
            msg:"吾名",
           name:"超强"
        },
        methods:{
            sayHello:function (name) {
                alert("你好!"+name);
            }
        }
    });
</script>
</body>
</html>

运行结果:

在这里插入图片描述

接下来我们做一个小练习

用Vue做一个跑马灯效果

直接上代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯</title>
    <script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>

<div id="app">

    <button @click="light()">开始</button>
    <button @click="stop()">停止</button>
    <h3 v-html="info" style="color: aqua" ></h3>

</div>
<script type="text/javascript">

    var vm = new Vue({
        el:"#app",
        data:{
            info:" 嘿,姑娘,我想我是真的想你了,你是否也会想起我。",
            lightIntervalID:null


        },
        methods: {
            light() {
                if (this.lightIntervalID !== null) {
                    return;
                }
                var _this = this;
                this.lightIntervalID = setInterval(function () {
                        _this.info = _this.info.substring(1).concat(_this.info.charAt(0));

                    }, 200
                )},
            stop() {
                clearInterval(this.lightIntervalID);
                this.lightIntervalID = null;
            }}
    });
</script>
</body>
</html>

来看下运行效果:(这里只展示静态效果)
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐