Vue笔记教程1

最新推荐文章于 2022-01-20 16:39:00 发布

波波的笔记本

最新推荐文章于 2022-01-20 16:39:00 发布

阅读量149

点赞数

分类专栏： Vue----一步一步往上爬文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/db3664/article/details/120162662

版权

Vue----一步一步往上爬专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue实例与数据绑定

一、创建Vue项目
- 1.创建vue实例
- 2.绑定数据
二、Vue初体验
- 1.使用vue制作一个表格

一、创建Vue项目

1.创建vue实例

Vue项目的创建很简单，就是在script标签中通过构造函数Vue来创建一个vue实例。

<script>
     var pp = new Vue({       //创建vue应用，通过构造函数Vue就可以创建一个Vue实例,注意V要大写
          //选项 
        }
</script>

什么是选项？例如下文的data，mounted等就是vue的选项。

2.绑定数据

vue中的data选项，可以声明应用内需要双向绑定的数据。
1、el用于指定一个页面中已存在的DOM元素来挂载Vue实例。
2、实例中的变量可以使用{{}}的方式来访问，例子如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>数据绑定</title>
</head>
<body>
    <div id = "app">{{message}} </div>
</body>

<script>
     var pp = new Vue({       //创建vue应用，通过构造函数Vue就可以创建一个Vue实例,注意V要大写
        el: '#app',           //el用于指定一个页面中已存在的DOM元素来挂载Vue实例
        data(){
            return{
                message: 'hello word',
            }
        }
    })
</script>
</html>

二、Vue初体验

1.使用vue制作一个表格

效果（示例）：

在这里插入图片描述
实现源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>数据绑定</title>
</head>
<body>
    <div id = "app">
        <table>
            <tr>
                <th v-for="name in items">{{name}}</th>       <!--v-for循环遍历数组-->
            </tr>
            <tr v-for="n in 10"><td v-for="n in 4"></td></tr>  <!--v-for固定循环次数的写法-->
        </table>
    </div>
</body>

<script>
     var pp = new Vue({       //创建vue应用，通过构造函数Vue就可以创建一个Vue实例,注意V要大写
        el: '#app',           //el用于指定一个页面中已存在的DOM元素来挂载Vue实例
        data(){
            return{
                items: ['歌曲','演唱','词','曲'],
            }
        }
    })
</script>

<style>
    #app{
        width: 100vw;
        height: 100vh;
    }
    tr,td,th{
        border-style: solid;
        border-color: bisque;
        width: 110px;
        height: 35px;
    }
    #app{
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
</html>