Vue学习总结

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

java—explore

5953人浏览 · 2019-08-07 10:52:15

java—explore · 2019-08-07 10:52:15 发布

Vue 基础

指令：

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

特点：
当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>

来看下运行效果：（这里只展示静态效果）
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^