Vue学习之基础使用

最新推荐文章于 2024-09-20 17:24:27 发布

虞啊鱼

最新推荐文章于 2024-09-20 17:24:27 发布

阅读量97

点赞数 1

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_42592879/article/details/108696594

版权

Vue学习之基础使用

文章目录

Vue学习之基础使用

一、认识Vue框架

vue是一个MVVM视图层框架，可以构建出复杂的单页面应用程序。vue与原生的Js显著的区别就是不再对dom进行直接操作，而是通过对数据操作来改变视图。
MVVM和MVC都分离了视图和模型，但区别在于，MVVM的视图和模型不直接进行通信，而是通过MVVM进行。这样降低了耦合性，提高了复用性

在这里插入图片描述

二、安装Vue

1.引入CDN资源

Vue的官网：https://cn.vuejs.org/

在cdn加速服务器中获取vue的库直接进行导入即可

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.NPM安装

模块化安装，这种方式一般需要在node环境下进行开发，然后编译打包后才能应用到浏览器中

$ npm install vue

三.Vue的基本使用

1.Vue的基本渲染

要使用Vue，先要用Vue构造函数创建Vue实例，Vue实例需要和一个Dom节点进行绑定。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        window.onload = function () {
        //Vue构造函数，需要传递一个对象
            new Vue({
            	//绑定的dom节点
                el: '#app',
                //数据模型，所有的数据存在这里
                data: {
                    msg: 'hello'
                },
                //方法，所有的方法写在这里
                methods: {
                }
            });
        }
    </script>
</head>

<body>
    <!-- 当前有一个msg变量，怎么把他作为元素文本 -->
    <div id='app'>
        <!-- 在模板内访问vue实例中的数据 -->
        <!-- 基本渲染 -->
        {{msg}}
        <p>{{msg}}</p>
    </div>
</body>

</html>

效果：
在这里插入图片描述
id为app的div元素和创建的Vue1实例通过el属性进行绑定，Vue实例中的msg就可以通过{{msg}}显示在页面上。

2.列表渲染

除了基本数据类型，Vue也可以通过遍历的方式进行渲染。
在v-for属性中写遍历

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渲染</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>



</head>

<body>
    <div id='app'>
        <ul>
        //v-for 这样遍历出来的就是fruits列表的项和索引
            <li v-for="(item,index) in fruits" :title="msg">
                {{index+1}}{{item}}
            </li>
        </ul>

        <table>
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>编号</th>
            </tr>
            // 遍历得到Stus列表的每一个对象，通过.属性值获取属性
            <tr v-for="item in stus" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>

    </div>

    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello',
                stus: [{ id: 1001, name: 'zhangsan', age: 12 }, { id: 1002, name: 'lisi', age: 12 }, { id: 1003, name: 'ren', age: 12 }],
                fruits: ['苹果', '橘子', '草莓']
            },
            methods: {

            }
        })
    </script>
</body>

</html>