指令

指令 (Directives) ：是带有 v- 前缀的特殊属性。例如在入门案例中的v-model，代表双向绑定。

插值表达式

插值：使用在有需要显示vue实例数据的地方

  • 可以在插值表达式中调用实例的数据属性和函数。

花括号({})

格式：

{{表达式}}

说明：

  1. 该表达式支持JS语法，可以调用js内置函数（必须有返回值）
  2. 达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
  3. 可以直接获取Vue实例中定义的数据或函数

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="va">
        <h2>{{name}}是我！</h2><!--使用差值显示数据-->

    </div>
<script>
    var va = new Vue({//创建一个vue实例
        el:"#va",
        data:{//这些只能在上面的模板中使用(div的id等于va这个就是模板)，无法在模板外面使用
            name:"名字"
        }
    });
</script>
</body>
</html>

插值闪烁

在最新的vue中不会出现这种问题

插值闪烁：在数据未加载完成时，页面会显示出原始的 {{}} ，加载完毕后才显示正确数据，称为插值闪烁。

v-text和v-html

可以使用v-text和v-html，来代替{{}}

  1. v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出

    即只是会将该内容输入到当前位置

  2. v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

    如果内容里面有html标签，可以通过这个指令将该html标签里面的内容进行解析，出现渲染的效果

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="va">
        v-text：<span v-text="name"></span><br>
        v-html：<span v-html="html"></span><br>
    </div>
<script>
    var va = new Vue({//创建一个vue实例
        el:"#va",
        data:{//这些只能在上面的模板中使用(div的id等于va这个就是模板)，无法在模板外面使用
            name:"<h1>名字</h1>",
            html:"<h1>v-html</h1>"
        }
    });
</script>
</body>
</html>

显示结果：

image-20211020202853299

v-model(双向绑定)

v-text和v-html：单向绑定，数据只影响了视图，发过来并不会改变模型

v-model：双向绑定，视图（View）和模型（Model）之间会互相影响。

目前v-model的可使用的视图的元素类型有：

  1. input
  2. select
  3. textarea
  4. checkbox
  5. radio
  6. components（Vue中的自定义组件）

除了6，其他都是表单的输入项

  • 多个 checkbox 对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型
  • radio对应的值是input的value值
  • input 和 textarea 默认对应的model是字符串
  • select 单选对应字符串，多选对应也是数组

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="va">
        <input type="checkbox" value="语文" v-model="course">语文<br>
        <input type="checkbox" value="数学" v-model="course">数学<br>
        <input type="checkbox" value="英语" v-model="course">英语<br>
        <h2>
            你选择了：{{course.join(",")}}
        </h2>
    </div>
<script>
    var va = new Vue({//创建一个vue实例
        el:"#va",
        data:{//这些只能在上面的模板中使用(div的id等于va这个就是模板)，无法在模板外面使用
            course:[]
        }
    });
</script>
</body>
</html>

页面显示：

image-20211020203642738

image-20211020203657176

v-on(绑定事件)

基本用法

v-on指令：用于给页面元素绑定事件。

在没有使用vue之前；页面标签可以通过设置onXXX响应事件；

在vue中可以通过v-on指令响应事件。

语法：

v-on:事件名="js片段或函数名"
或
@事件名="js片段或函数名"

  • 例如 v-on:click='add'可以简写为@click='add'

  • 示例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="va">
        <!--直接写js片段-->
        <button @click="num++">增加</button>
        <!--使用函数名，该函数必须要在vue实例中定义-->
        <button @click="decrement">减少</button>
        <h2>
            num = {{num}}
        </h2>
    </div>
<script>
    var va = new Vue({//创建一个vue实例
        el:"#va",
        data:{
            num:1
        },
        methods:{
            decrement(){
                this.num--;
            }
        }
    });
</script>
</body>
</html>

  • 展示结果：

    image-20211020204731153

事件修饰符

  • .stop：阻止事件冒泡

  • .prevent ：阻止默认事件发生

  • .capture：使用事件捕获模式

  • .self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）

  • .once：只执行一次

  • 示例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="va">
        <!--直接写js片段-->
        <button @click="num++">增加</button>
        <!--使用函数名，该函数必须要在vue实例中定义-->
        <button @click="decrement">减少</button>
        <h2>
            num = {{num}}
        </h2>

        事件冒泡测试：<br>
        <div style="background-color: red;width: 100px;height: 100px"
             @click="print('你点击了div')">
            <button @click.stop="print('点击了div里面的button')">div里面的button</button>
        </div>
        <br>阻止默认事件：<br>
        <a href="http://www.baidu.cn" @click.prevent="print('点击超链接')">百度</a>
    </div>
<script>
    var va = new Vue({//创建一个vue实例
        el:"#va",
        data:{
            num:1
        },
        methods:{
            decrement(){
                this.num--;
            },
            print(msg){
                console.log(msg)
            }
        }
    });
</script>
</body>
</html>

  • 结果显示：

    1. 如果button没有设置.stop，那么包裹该button的div也是会执行的，这就是事件冒泡，设置过后就不会出现这个问题
    2. 如果a标签，里面的@click没有.prevent的话，会直接跳转到百度的页面，设置过后就不会出现这个问题

    image-20211020205813290

# vue.js # html # javascript
Logo
Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar 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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue