Javascript

Vue学习笔记

本文主要是介绍Vue学习笔记，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

认识和特点介绍

Vue是一个渐进式的框架

  • 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。
  • 或者如果你希望将更多的业务逻辑使用Vue实现,那么Vue的核心库以及其生态系统。
  • 比如Core+ Vue-router+ Vuex ,也可以满足你各种各样的需求。

Vue有很多特点和Web，开发中常见的高级功能

  • 解耦视图和数据
  • 可复用的组件
  • 前端路由技术
  • 状态管理
  • 虚拟DOM

Vue安装

方式一:直接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/is/vue.min.js

方式三: NPM安装

Vue的初体验

我们来阅读JavaScript代码,会发现创建了一个Vue对象。

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

<div id="app">{{message}}</div>

<script src="../js/vue.js"></script>
<script>
    // let:定义变量
    // const:定义常量
    /**
     * 编程范式：声明式编程
     * */
    const app = new Vue({
        el: '#app',//用于挂载要管理的元素
        data: {
            message:"laolao"
        }
    })
        /***
         * 元素js的做法（编程范式：命令式编程）
         * 1.创建div元素，设置div属性
         * 2.定义一个变量叫做message
         * 3。将message变量放在前面的div元素中显示
         */

</script>
</body>
</html>

创建Vue对象的时候,传入了一些options: {}

  •  {}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显,我们这里是挂载到了id为app的元素上
  • {}中包含了data属性：该属性中通常会存储一些数据
  • 这些数据可以是我们直接定义出来的,比如像上面这样也可能是来自网络，从服务器加载的。

浏览器执行代码的流程：

  • 执行到10~13行代码显然出对应的HTML
  • 执行第16行代码创建Vue实例,并且对原HTML进行解析和修改。

并且,目前我们的代码是可以做到响应式的。

Vue的列表展示

 

这篇关于Vue学习笔记的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航