Vue的指令语法、双向绑定、el和data的另一种写法、MVVM模型

Bulut0907

于 2024-07-29 09:05:38 发布

阅读量307

点赞数 4

分类专栏： Vue 文章标签： vue.js 指令语法双向绑定 el和data MVVM模型

本文链接：https://blog.csdn.net/yy8623977/article/details/131614423

版权

Vue 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

1. 指令语法

用于解析标签（包括：标签属性、标签体内容、绑定事件…）。Vue中有很多的指令，且形式都是：v-xxxx，此处我们只是拿v-bind举个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    <h1>指令语法</h1>
    <!-- 字符串中引用的是JS的表达式 -->
    <a v-bind:href="web.url" v-bind:web-name="web.name.toUpperCase()">点我跳转到{{web.name}}</a>
    <!-- 简写方式 -->
    <a :href="web.url" v-bind:web-name="web.name.toUpperCase()">点我跳转到{{web.name}}</a>
</div>

<script type="text/javascript">

    new Vue({
        el:'#root',
        data:{
            web:{
                name:'baidu',
                url:'http://www.baidu.com'
            }
        }
    })

</script>

</body>
</html>

打开页面如下。点击就可以跳转到baidu
指令语法

这一部分的网页源代码如下：

1.1 双向绑定

数据不仅能从data流向页面，还可以从页面流向data
v-model只能应用在表单类元素（输入类元素）上，如input、select等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    双向数据绑定：<input type="text" v-model:value="name"><br/>
    <!-- 可以简写为 v-model，因为v-model默认收集的就是value值 -->
    双向数据绑定：<input type="text" v-model="name"><br/>
</div>

<script type="text/javascript">

    new Vue({
        el:'#root',
        data:{
            name:'hello'
        }
    })

</script>

</body>
</html>

运行，输入框都显示hello，在下面的输入框输入12345，上面的输入框也同步显示12345
双向绑定效果

2. el和data的另一种写法

el可以通过vm.$mount来实现。比如可以通过setTimeout来延迟挂载
data可以通过function函数来获取数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    <h1>你好，{{name}}</h1>
</div>

<script type="text/javascript">


    const vm = new Vue({
        // data的函数式写法
        // 简写: data(){。不能写成data:()=>{，因为箭头函数的this不是vue实例而是Window
        data:function(){
            // 此处的this是Vue实例对象。函数由vue自动调用
            console.log('@@@',this)
            return{
                name:'尚硅谷'
            }
        }
    })

    // 定时设置一秒后，将容器和vue实例绑定
    setTimeout(() => {
        // el的另一种写法
        vm.$mount('#root')
    }, 1000)


</script>

</body>
</html>