VUE的模板语法&数据绑定

florachy

3080人浏览 · 2022-04-19 18:42:05

florachy · 2022-04-19 18:42:05 发布

模板语法

在这里插入图片描述

插值语法

功能：用于解析标签体内容。
写法：{{xxx}}， xxx是js表达式，且可以直接读取data中所有属性。

指令语法

功能：用于解析标签（包括标签属性，标签体内容，绑定事件…）
举例：v-bind:href=“xxx” 或者简写为 :href=“xxx”；xxx同样要写js表达式且可以直接读取到data中的所有属性。
备注：Vue中有很多指令，且形式都是：v-???。此处我们只是拿v-bind举个例子。

代码示例

新建文件【模板语法.html】

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>模板语法</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="root">
           <h1>插值语法</h1>
           <h3>你好，{{info.name}}</h3>
           <h3>当前时间：{{time}}</h3>
           <h1>指令语法</h1>
           <a v-bind:href="info.url">点我打开GitLink</a>
           <!-- v-bind: 可以简写为 : -->
           <a :href="info.url">点我打开GitLink</a>
        </div>
        <!--阻止vue在启动时生成生产提示 -->
        <script type="text/javascript">
        Vue.config.productionTip=false
         // 创建Vue实例
         new Vue({
             el:"#root",  
             data:{
                 time: "20220402",
                 info: {
                    name: "World",
                    url: "https://wwww.gitlink.org.cn"
                 },
                 
             }
         })
        </script>
       
    </body>
</html>

数据绑定

在这里插入图片描述

单向数据绑定

语法：v-bind:href =“xxx” 或简写为 :href
特点：数据只能从 data 流向页

双向数据绑定

语法：v-mode:value=“xxx” 或简写为 v-model=“xxx”
特点：数据不仅能从 data 流向页面，还能从页面流向 data
注意：

双向绑定一般应用在表单类元素上，如input,select等。
v-model:value可以简写为v-model，因为v-model默认收集的就是value值。

代码示例

新建文件【数据绑定.html】

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>模板语法</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="root">
          单向数据绑定<input type="text" v-bind:value="name"/><br/>
          双向数据绑定<input type="text" v-model:value="age"/><br/>

          <!--简写 -->
          单向数据绑定<input type="text" :value="name"/><br/>
          双向数据绑定<input type="text" v-model="age"/><br/>
          <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上--->
          <h2 v-model:x="name">你好啊</h2>
        </div>
        <!--阻止vue在启动时生成生产提示 -->
        <script type="text/javascript">
        Vue.config.productionTip=false
         // 创建Vue实例
         new Vue({
             el:"#root",  
             data:{
                 name: "flora",
                 age: "18"   
             }
         })
        </script>
       
    </body>
</html>

使用浏览器打开html文件：

单向数据绑定：使用Vue开发工具更改name的值，输入框中内容值会相应变化，但是更改输入框中的内容，Vue开发工具中显示的name不会变化。
双向数据绑定：使用Vue开发工具更改age的值，输入框中内容值会相应变化，同时更改输入框中的内容，Vue开发工具中显示的age也会变化。

el与data的两种写法

控制台打印Vue实例查看

新建【el和data的两种写法.html】

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>el和data的两种写法</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="root">
          <h2>你好啊, {{name}}</h2>
        </div>
        <!--阻止vue在启动时生成生产提示 -->
        <script type="text/javascript">
        Vue.config.productionTip=false
         // 创建Vue实例
         const v  = new Vue({
            //  el:"#root", 
             data:{
                 name: "flora"
             }
         })
         console.log(v)
         
        </script>
       
    </body>
</html>

打印出来如下图所示，所有带有 $的属性和方法的都是 V u e 提供给开发者使用的。不带$ 的属性和方法都是Vue底层在使用的。

el的两种写法

直接加载，在创建Vue实例时就配置el属性：el: “#root”
先创建Vue实例，随后通过 $m o u n t 挂载方式指定 e l 属性，更加灵活： v .$ mount(“root”)
更改文件【el和data的两种写法.html】

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>el和data的两种写法</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="root">
          <h2>你好啊, {{name}}</h2>
        </div>
        <!--阻止vue在启动时生成生产提示 -->
        <script type="text/javascript">
        Vue.config.productionTip=false
         // 创建Vue实例
         const v  = new Vue({
            //  el:"#root",  //第一种写法
             data:{
                 name: "flora"
             }
         })
         console.log(v)
         v.$mount("#root") // 第二种写法
        </script>
       
    </body>
</html>

data的两种写法

对象式
函数式
注意：

目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
一个重要原则，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

更改文件【el和data的两种写法.html】

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>el和data的两种写法</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="root">
          <h2>你好啊, {{name}}</h2>
        </div>
        <!--阻止vue在启动时生成生产提示 -->
        <script type="text/javascript">
        Vue.config.productionTip=false
         // 创建Vue实例
         const v  = new Vue({
             // 对象式
            //  data:{
            //      name: "flora"
            //  }
             // 函数式
            // data:function(){
            //     console.log("此处this是Vue实例对象", this)
            //     return{
            //         name:"flora"
            //     }
            // }
            // 函数式简写
            data(){
                console.log("此处this是Vue实例对象", this)
                return{
                    name:"flora"
                }
            }

         })
         
         v.$mount("#root") 
        </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}$/, //不连续的两位字母// /^