vue的简单使用

清浅7

于 2023-07-16 09:10:15 发布

阅读量31

点赞数

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

本文链接：https://blog.csdn.net/m0_50305029/article/details/131746995

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue 使用起来是比较简单的，总共分为如下三步：

新建 HTML 页面，引入 Vue.js文件

<script src="js/vue.js"></script>

2.在JS代码区域，创建Vue核心对象，进行数据绑定

new Vue({
    el: "#app",
    data() {
        return {
            username: ""
        }
    }
});

创建 Vue 对象时，需要传递一个 js 对象，而该对象中需要如下属性：

el ：用来指定哪儿些标签受 Vue 管理。该属性取值 #app 中的 app 需要是受管理的标签的id属性值
data ：用来定义数据模型
methods ：用来定义函数。这个我们在后面就会用到

3.编写视图

<div id="app">
    <input name="username" v-model="username" >
    {{username}}
</div>

{{}} 是 Vue 中定义的 插值表达式 ，在里面写数据模型，到时候会将该模型的数据值展示在这个位置。

下面是全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input v-model="username">
    <!--插值表达式-->
    {{username}}
</div>
<script src="js/vue.js"></script>
<script>
    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){  // data() 是 ECMAScript 6 版本的新的写法
            return {
                username:""
            }
        }

        /*data: function () {
            return {
                username:""
            }
        }*/
    });

</script>
</body>
</html>