毕设：week3-vue.js：Vue-数据和方法

最新推荐文章于 2023-11-30 10:09:41 发布

cs_rookie

最新推荐文章于 2023-11-30 10:09:41 发布

阅读量185

点赞数

分类专栏：毕业设计毕设

本文链接：https://blog.csdn.net/qq_33516656/article/details/98898206

版权

毕设同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

毕业设计

10 篇文章 0 订阅

订阅专栏

Vue-数据和方法

一、引入cli
1、首先在本地上创建一个文件夹，用于存放代码
在这里插入图片描述 2、用subline text打开新建的文件夹，新建一个index.html的文件

2、引用html代码（快速：现在subline text先输入！再按下tab键，可快速生成）
3、新建一个style.css文件，在index.html引进css文件
<link rel="stylesheet" type="text/css" href="style.css">
在这里插入图片描述
3、引入script标签，独立出一个app.js，并且新建一个app.js文件

4、实例化vue
index.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
   <!-- 将title改为vue.js -->
    <title>vue.js</title>
    <!-- 引入cli -->
    <script src="https://unpkg.com/vue"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- vue-app是根容器 -->
<div id="vue-app">
<p>hello，Mr.{{name}}</p></div>
<!-- 引入一个script,独立出一个app.js文件 -->
<script src="app.js"></script>
</body>
</html>

app.js代码：

//实例化vue对象
new Vue({

    el:"#vue-app",
    data:{
        name:"Long"
    }
});
//el: element 需要获取的元素,一定是html中的跟容器元素
//data:用于数据的存储

在这里插入图片描述 5、个人信息表
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
   <!-- 将title改为vue.js -->
    <title>vue.js</title>
    <!-- 引入cli -->
    <script src="https://unpkg.com/vue"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- vue-app是根容器 -->
<div id="vue-app">
<h1 class="h1">个人信息表</h1>
<table class="table">
    <tbody>
        <tr>
            <td>姓名：</td>
            <td>{{name}}</td>
        </tr>
        <tr>
            <td>年龄：</td>
            <td>{{age}}</td>
        </tr>
        <tr>
            <td>职业：</td>
            <td>{{job}}</td>
        </tr>
    </tbody>
</table>
</div>
<!-- 引入一个script,独立出一个app.js文件 -->
<script src="app.js"></script>
</body>
</html>

style.css

.h1{
    text-align: center;
}
.table{
    margin-left: 550px;
    border: 2px solid black;

}

app.js

//实例化vue对象
new Vue({

    el:"#vue-app",
    data:{
        name:"Long",
        job:"college student",
        age:"18"
    }
});
//el: element 需要获取的元素,一定是html中的跟容器元素
//data:用于数据的存储

在这里插入图片描述二、methods方法

Try to be yourself!