初识Vue.js

小白学习日记

已于 2022-02-11 16:39:26 修改

阅读量105

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-02-10 15:15:45 首次发布

本文链接：https://blog.csdn.net/m0_46533814/article/details/122861543

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

初识Vue

初识Vue

MVVM模式

MVVM模式是由经典的软件架构MVC衍生来的，当View（视图层）变化时，会自动更新到ViewModel（视图模型），反之亦然。View和ViewModel之间通过双向绑定（data-binging）建立联系。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zmQESh4e-1644477197576)(C:\Users\user\AppData\Roaming\Typora\typora-user-images\image-20220209182507977.png)]$
在这里插入图片描述

第一个Vue例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
    <!--1.引入vue.js-->
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <!--2.给定显示数据的容器-->
<div id="app">
	<!--绑定数据，v-model适用范围：input、select、textarea、components
	将输入框和data中的name属性进行绑定
-->
    <input type="text" v-model="name" placeholder="请输入你的名字">
    <h1>你好，{{name}}</h1>
</div>
<script>
    //3.创建vue实例app
    let app = new Vue({
        //el用于指定页面中已存在的DOM元素来挂载Vue实例，可以是HTMLElement，也可以是CSS选择器，这里使用的就是ID选择器
        el: '#app',
        //数据，通过vue实例的data选项，可以声明需要双向绑定的数据
        data: {
            name: '',
        }
    })
</script>
</body>
</html>