【vue】初识Vue

最新推荐文章于 2022-06-12 23:25:12 发布

-4444x-

最新推荐文章于 2022-06-12 23:25:12 发布

阅读量300

点赞数

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

本文链接：https://blog.csdn.net/qq_43490212/article/details/113404937

版权

vue.js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

我又开"坑"了

我和Vue的认识过程：大二实习，由于学校安排的实习，是有关java开发之类的，但最后需要交的是小组项目，所以在前端方面，带队老师只是大概教了一下框架，那也是第一次接触前端方面，当时觉得贼有意思，就去搜了一下相关知识，当然第一个认识的就是Vue框架的开发者，类似下面的搜索过程，一个接一个的点，就到了那块

当时就觉得真厉害，长得还好看，然后就所有的游戏名字全改成了相关，也将自己毕业的目标从做测试改成了前端，有缘看到的，可以顺便给大佬个关注吧，虽然他讨论的我还看的不是很懂

知乎

微博

哈哈，顺便放一个我的游戏截图

我叨叨完了，进入重点

在这里插入图片描述

一：vue是什么？

vue官网

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架_【1】。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。【来源：官方文档】

渐进式JavaScript框架
声明式渲染——>组件系统——>客户端路由——>集中式状态管理——>项目构建
易用，灵活，高效
框架大小：20kb，超快虚拟DOM
解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟DOM

1.2：vue.js安装

直接CDN引入
你可以选择引入开发环境版本还是生产环境版本

 <!--开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js " ></script>
<!--生产环境版本，优化了尺寸和速度-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

下载和引入
开发环境https: / /vuejs.org/js/vue.js
生产环境https://vuejs.org/js/vue.min.js
NPM安装

二：使用vue将helloword渲染到页面上

提供接收Vue数据的容器
引入Vue的js文件
新建Vue
把vue提供的数据填充到标签里面

<body>
    <!-- 1:提供接收Vue数据的容器 -->
    <div id="app">
        <div>{{msg}}</div>
    </div>

    <!-- 2:导入vue.js文件 -->
    <script type="text/javascript" src="./js/vue.js"></script>

    <!-- 3:使用Vue语法 -->
    <script type="text/javascript">
        var vm = new Vue({
            // 获取元素，如果是id传入，用#，如果是类，则用 .
            el: '#app',
            // data存放要渲染到页面上的数据
            data: {
                // 会将html中插值语法中的msg替换掉
                msg: 'hello vue'
            }
        });
    </script>
</body>
</html>

【21.2.22补充】可以参考上面的代码注释学习，上面的注释详细

<body>
    <!-- 打印出来“你好，赵”   编程范式：声明式编程-->
    <div id="app">
        <h1>{{message}} </h1>
    </div>
    <!-- 打印出来，“{{message}}”  编程范式：命令式编程 -->
    <div>{{message}}</div>

    <!-- 引入js文件 -->
    <script src="../js/vue.js"></script>

    <script>
        //  let(es6里面定义变量)/const(es6里面定义常亮)
        const vm = new Vue({
            el: "#app", //用于挂载要管理的元素
            data: { //定义数据
                message: '你好，赵'
            }
        })
    </script>

    <!-- 可以做到数据和界面分离 -->
</body>

1：参数分析

el：元素的挂载位置（值可以是css选择器或者DOM元素）
该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上
data：模型数据（值是一个对象）
这些数据可以是我们直接定义出来的，比如像上面这样。
也可能是来自网络，从服务器加载的。
methods：方法

2：插值表达式

将数据填充到HTML中
基本计算

<!-- 输出结果直接是3 -->
<div>{{1+2}}</div>

_【1】渐进式JavaScript框架感兴趣的可自行了解，我觉得这个蛮好的

渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。（比如以前的3个东西用的其他方法，现在想用vue重构，就可以一个一个慢慢来）
或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。
比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。

【21.2.22补充】

列表数据：

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in movies">
                {{item}}
            </li>
        </ul>
    </div>

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

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                movies: ['送你一朵小红花', '你好，李焕英', '唐人街探案', '刺杀小说家']
            }
        })
    </script>
</body>

计数器

<body>
    <div id="app">
        <h2>当前计数：{{conster}}</h2>
        <!-- 写法一 -->
        <button v-on:click="conster++">+</button>
        <!-- 写法二 -->
        <button v-on:click="handle">-</button>
    </div>

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

    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                conster: 0,
            },
            methods: {
                handle: function () {
                    this.conster--  //this.代表vm.
                }
            }
        })
    </script>
</body>

新的属性:methods，该属性用于在Vue对象中定义方法。

新的指令:@click,该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法(方法通常是methods中定义的方法)

在这里插入图片描述

-4444x-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
【vue】初识Vue

我又开"坑"了我和Vue的认识过程：大二实习，由于学校安排的实习，是有关java开发之类的，但最后需要交的是小组项目，所以在前端方面，带队老师只是大概教了一下框架，那也是第一次接触前端方面，当时觉得贼有意思，就去搜了一下相关知识，当然第一个认识的就是Vue框架的开发者，类似下面的搜索过程，一个接一个的点，就到了那块当时就觉得真厉害，长得还好看，然后就所有的游戏名字全改成了相关，也将自己毕业的目标从做测试改成了前端，现在终于系统化的可以真正的去学习，有缘看到的，可以顺便给大佬个关注吧，虽然他讨论的我还看
复制链接

扫一扫