02_模板语法-尚硅谷Vue笔记

Vue 模板语法插值语法和指令语法

我要学前端！

90人浏览 · 2023-03-15 12:01:13

我要学前端！ · 2023-03-15 12:01:13 发布

Vue模板语法有2大类:

1.插值语法： {{xxx}}

功能:用于解析标签体内容。

写法: {{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

2.指令语法：v-bind

功能:用于解析标签(包括: 标签属性、标签体内容、绑定事件.....>。

举例:v-bind:href="xxx”或简写为 :href="xxx"，xxx同样要写js表达式且可以直接读取到data中的所有属性。

备注: Vue中有很多的指令，且形式都是: v-????，此处我们只是拿v-bind举个例子。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>插值语法</h1>
        <h3>拜见{{name}}大人</h3>
        <hr/>
        <h1>指令语法</h1>
        <a v-bind:href="school.url">点我跳转{{school.name}}的01-初识Vue</a>
        <a :href="school.url">点我跳转{{school.name}}的01-初识Vue</a>
    </div>
    
    <script>
        // 创建一个Vue实例
        let vm = new Vue({
            el: "#root",
            data: {
                name: '朱雀',
                school: {
                    name: '小白',
                    url: 'https://blog.csdn.net/min0320/article/details/129546177'
                }
            }
        })
    </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}$/, //不连续的两位字母// /^