2. 模板语法&数据绑定

最新推荐文章于 2024-01-29 12:00:38 发布

Sun Jiakai_凯

最新推荐文章于 2024-01-29 12:00:38 发布

阅读量61

点赞数

分类专栏： Vue 文章标签： vue js

本文链接：https://blog.csdn.net/s12345672/article/details/119618839

版权

Vue 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

1. Vue模板语法有两大类

1. 插值语法

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

2. 指令语法

1.1 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件...）
1.2 举例：v-bind:href="xxx" 或 简写为 :href="xxx", xxx同样要写js表达式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>模板语法</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="root">
            <h2>插值语法</h2>
            <h2>你好, {{name}}</h2>
            <hr>
            <h2>指令语法</h2>
            <a v-bind:href="url">跳转到百度1</a>
            <!-- v-bind可以简写为 :  -->
            <a :href="url">跳转到百度2</a>   
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false;
            new Vue({
                el: '#root',
                data:{
                    name: 'jack',
                    url: 'http://www.baidu.com'
                }
            })
        </script>
    </body>
</html>

2. Vue中有两种数据绑定方式：

1. 单向绑定

单向绑定 v-bind：数据只能从data流向页面

2. 双向绑定

双向绑定 v-model：数据不仅能从data流向页面，还可以从页面流向data
注意：
	1. 双向绑定一般应用在表单元素上，如：input、select等
	2. v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>数据绑定</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="root">
            单向数据绑定：<input type="text" v-bind:value="name"> 
            <br> 
            双向数据绑定：<input type="text" v-model:value="name">

            <!-- 如下代码是错误的，因为v-model只能应用在表单元素（输入类元素）上 -->
            <h2 v-model:x="name">刘恺威</h2>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false;

            new Vue({
                el: '#root',
                data:{
                    name: '刘恺威',
                    url: 'http://www.baidu.com'
                }
            })
        </script>
    </body>
</html>

Sun Jiakai_凯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2. 模板语法&数据绑定

1. Vue模板语法有两大类1. 插值语法1.1 功能：用于解析标签体内容1.2 写法：{{xxx}} xxx是js表达式，并且可以直接读取到data中的所有属性2. 指令语法1.1 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件...）1.2 举例：v-bind:href="xxx" 或简写为 :href="xxx", xxx同样要写js表达式<!DOCTYPE html><html lang="en"> <head>
复制链接

扫一扫