插值语法与指令语法

最新推荐文章于 2023-04-12 00:37:19 发布

qq_50768380

最新推荐文章于 2023-04-12 00:37:19 发布

阅读量519

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_50768380/article/details/126472475

版权

容器与实例要一一对应

1.插值语法。

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>初识vue</title>
        <!-- 引入vue -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.7.9/dist/vue.js"></script>
        <body>
            <!-- 准备一个容器 -->
            <div id="root">
                <h1>{{name}}</h1>
            </div>
            <script type="text/javascript">
                Vue.config.productionTip=false;//阻止vue在启动时生成生产提示
                new Vue({
                    el:"#root",//el用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串
                    data:{//data用于存储数据,数据供el所指定的容器使用
                        name:'hello vue!'
                    }
                })
            </script>
        </body>
    </head>
</html>

结果
在这里插入图片描述

2.指令语法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>初识vue</title>
        <!-- 引入vue -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.7.9/dist/vue.js"></script>
        <body>
            <!-- 准备一个容器 -->
            <div id="root">
                <a v-bind:href="url">百度一下，你就知道！</a>
            </div>
            <script type="text/javascript">
                Vue.config.productionTip=false;//阻止vue在启动时生成生产提示
                new Vue({
                    el:"#root",//el用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串
                    data:{//data用于存储数据,数据供el所指定的容器使用
                        name:'hello vue!',
                        url:'http://www.baidu.com'
                    }
                })
            </script>
        </body>
    </head>
</html>

在这里插入图片描述
总结：vue模板语法有两大类
1.插值语法
功能：往往用于解析标签体内容。
写法：{{xxx}},xxx是js表达式，可以直接读取data中的所有属性。
2.指令语法
功能：用于解析标签（标签属性、标签体内容、绑定事件…)
用法：v-bind:href="xxx"或:href=“xxx”,

3.数据绑定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>初识vue</title>
        <!-- 引入vue -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.7.9/dist/vue.js"></script>
        <body>
            <!-- 准备一个容器 -->
            <div id="root">
                <!-- 单向绑定 -->
                <input type="text" v-bind:value="name"></input>
                <!-- 双向绑定 -->
                <input type="text" v-model:value="name"></input>
            </div>
            <script type="text/javascript">
                Vue.config.productionTip=false;//阻止vue在启动时生成生产提示
                new Vue({
                    el:"#root",//el用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串
                    data:{//data用于存储数据,数据供el所指定的容器使用
                        name:'hello vue!',
                        url:'http://www.baidu.com'
                    }
                })
            </script>
        </body>
    </head>
</html>

总结
1.单向绑定（v-bind）：数据只能从data流向页面。
2.双向绑定（v-model）:数据不仅可以从data流向页面还可以从页面流向data。
注意：
1.v-model只能用于表单类元素（输入类元素）上。
2.v-model.value可以简写成v-model，因为v-model默认收集的就是value的值。

qq_50768380

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
插值语法与指令语法

2.v-model.value可以简写成v-model，因为v-model默认收集的就是value的值。//el用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串。//el用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串。//el用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串。//data用于存储数据,数据供el所指定的容器使用。//data用于存储数据,数据供el所指定的容器使用。//data用于存储数据,数据供el所指定的容器使用。
复制链接

扫一扫