Vue-入门

最新推荐文章于 2023-06-30 08:41:21 发布

孤单常会有吧

最新推荐文章于 2023-06-30 08:41:21 发布

阅读量102

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/mms520www/article/details/119205397

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vuejs安装方式

CDN

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

下载js文件引入

访问 https://cn.vuejs.org/v2/guide/installation.html

在这里插入图片描述

NPM安装

npm install vue

Vuejs初体验

Hello Vuejs实例程序

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello Vuejs</title>
    </head>
    <body>

        <div id="app">{{message}}</div>
        <!--引入Vuejs-->
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: "#app", // 用于挂载要管理的元素
                data: { // 定义数据
                    message: "Hello Vuejs!"
                }
            })
        </script>
    </body>
</html>

Vuejs列表展示

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>02-Vue列表展示</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <!--
                    v-for:vue中的迭代器，用于遍历，类似与foreach，item代表每一次遍历的元素
                -->
                <li v-for="item in movies">{{item}}</li>
            </ul>
        </div>

        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: "#app",
                data: {
                    movies: ["肖申克的救赎", "当幸福来敲门", "阿甘正传"]
                }
            })
        </script>
    </body>
</html>

Vuejs案例：计数器

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>计数器</title>
    </head>
    <body>
        <div id="app">
            <h2>当前计数：{{counter}}</h2>
            <!--事件监听使用v-on-->
            <button v-on:click="add">+</button>
            <button v-on:click="sub">-</button>
        </div>

        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: "#app",
                data: {
                    counter: 0
                },
                // methods用于定义方法
                methods: {
                    add: function (){
                        console.log("add被执行！");
                        this.counter++;
                    },
                    sub: function (){
                       console.log("sub被执行！");
                       this.counter--;
                    }
                }
            })
        </script>
    </body>
</html>

Vuejs MVVM模型

下图是Vuejs中的MVVM模型示意图，其中model层的数据会被ViewModel解析显示到相应的dom元素上，提示若dom元素定义了监听事件，那么当发生该事件时会回调model中的方法

在这里插入图片描述

孤单常会有吧

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue-入门

Vuejs安装方式CDN<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2"></script>下载js文件引入访问 https:/
复制链接

扫一扫