Vue-02.指令-v-bind和v-model_v-model 链接-CSDN博客

本文链接：https://blog.csdn.net/qq_45055856/article/details/141110028

常用指令：

指令：HTML标签上带有 v-前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for...

指令作用
v-bind 为HTML标签绑定属性值，如设置href，css样式等
v-model 在表单元素上创建双向数据绑定
v-on 为HTML标签绑定事件
v-if
v-else
v-else-if 条件性的渲染某元素，判定为true时渲染，否则不渲染
v-show 根据条件展示某元素，区别在于切换的是display属性的值
v-for 列表渲染，遍历容器的元素或者对象的属性
注意事项：
通过v-bind或者v-model绑定的变量，必须在数据模型中声明

通过v-bind中设置的属性与v-model中的内容进行双向绑定，使得通过修改v-model中的内容达到修改v-bind中属性值的目的，因为Vue具有双向绑定的特征（视图与模型中的数据双向绑定，一个变，另一个跟着变）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-bind和v-model</title>
    <!-- 1.首先引入vue.js -->
    <script src="js/vue.js"></script>
</head>
<!-- 
    常用指令：
    指令：HTML标签上带有 v-前缀 的特殊属性，不同指令具有不同含义。例如：v-if，v-for...
    指令                            作用
    v-bind                      为HTML标签绑定属性值，如设置href，css样式等
    v-model                     在表单元素上创建双向数据绑定
    v-on                        为HTML标签绑定事件
    v-if
    v-else
    v-else-if                   条件性的渲染某元素，判定为true时渲染，否则不渲染
    v-show                      根据条件展示某元素，区别在于切换的是display属性的值
    v-for                       列表渲染，遍历容器的元素或者对象的属性
    注意事项：
    通过v-bind或者v-model绑定的变量，必须在数据模型中声明
-->
<body>
    <!-- 3.指定vue要操作的视图区域 -->
    <div id = "app">
        <a v-bind:href="url" >链接1</a>
        <a :href="url" >链接2</a>   <!-- v-bind可以省略 -->
        <input type="text" v-model="url">
    </div>
</body>
<script>
    // 2.创建Vue核心对象，定义数据类型，函数
    new Vue({
        el:"#app",
        data: {
            url:"https://www.baidu.com"
        }
    })
</script>
</html>