Vue是什么？

Vue是一套用于构建用户界面的渐进式JavaScript框架

  • 构建用户界面：用vue往html页面中填充数据

  • 渐进式：Vue可以自底向上逐层的应用，从轻量小巧核心库的简单应用，到引入各式各样插件的复杂应用。

  • 框架：一整套现成的解决方案，遵守框架的规范，学习框架，就是学习框架中的规定用法

谁开发的？

https://zhuanlan.zhihu.com/p/58335278

Vue特点

  1. 采用组件化模式，提高代码复用率，且让代码更好维护。
  2. 声明式编码，开发人员无需操作DOM，提高开发效率。

Vue文档

https://v2.cn.vuejs.org/

https://cn.vuejs.org/

起步

<!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">

    <title>Document</title>

    <!-- 引入Vue -->

    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>

    <!-- 准备好一个容器 -->

    <div id="root">

        <h1>Hello World!</h1>

        <h1>Hello {{name}}</h1>

    </div>

    <script type="text/javascript">

        Vue.config.productionTip = false;//阻止 vue 在启动时生成生产提示

        //创建Vue实例

        //容器和实例 一一对应

        const vm=new Vue({

            el:'#root',//用于指定当前Vue为哪个容器服务，值通常为css选择器字符串，不能基于body和html初始化

            data:{//data中用于存储数据，供el指定的容器使用

                name:'张三',

            }

        })

    </script>

</body>

</html>

el和data的第二种写法:

<body>

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

    #导入脚本文件

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

    <script>

        const vm=new Vue({

            data(){ //此处this指向vue实例

            return{

                   username:'zs'

            }

            }

        })

        vm.$mount=('#app')//挂载

        //data:对象式和函数式，组件时只能用后者，不能用箭头函数this会指向window而不是vue

    </script>

</body>

万字血书Vue—走近Vue的更多相关文章

  1. 万字血书React—走近React

    配置开发环境 脚手架工具create-react-app 储备知识:终端或命令行.代码编辑器 React官方中文文档 create-react-app 其是基于Node的快速搭建React项目的脚手架 ...

  2. 万字血书Vue—路由

    多个路由通过路由器进行管理. 前端路由的概念和原理 (编程中的)路由(router)就是一组key-value对应关系,分为:后端路由和前端路由 后端路由指的是:请求方式.请求地址和function处 ...

  3. vue入门 vue与react和Angular的关系和区别

    一.为什么学习vue.js vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/ ...

  4. Vue (三) --- Vue 组件开发

    ------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[compo ...

  5. vue学习:vue+webpack的快速使用指南（新手向）

    一.vue有两种使用方式: 1.下载vue.js <script src="vue.js"></script> 2.使用npm npm install vu ...

  6. Vue 项目 Vue + restfulframework

    Vue 项目 Vue + restfulframework 实现登录认证 - django views class MyResponse(): def __init__(self): self.sta ...

  7. 【vue】vue +element 搭建项目，组件之间通信

    父子组件通信 父 通过props属性给 子传递数据 子 操作 父  this.$parent.XXX 子通过$emit传递参数 或者通过vue-bus vue-bus既可以实现父子组件之间的通信,也可 ...

  8. 【vue】vue +element 搭建项目，vuex中的store使用

    概述: 每一个 Vuex 应用的核心就是 store(仓库).“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state).Vuex 和单纯的全局对象有以下两点不同: Vuex 的 ...

  9. vue的.vue文件是怎么run起来的(vue-loader)

    vue的.vue文件是怎么run起来的(vue-loader) 引子:vue的.vue文件是怎么跑起来的? 答:通过vue-loader,解析.vue文件,在webpack解析,拆解vue组件 1.v ...

  10. vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤

    通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...

随机推荐

  1. Socket.D 基于消息的响应式应用层网络协议

    首先根据 Socket.D 官网的副标题,Socket.D 的自我定义是: 基于事件和语义消息流的网络应用协议. 官网定义的特点是: 基于事件,每个消息都可事件路由 所谓语义,通过元信息进行语义描述 ...

  2. Spingboot整合Dubbo+zookeeper

    前言: 2023-12-26 19:38:05 最近学习分布式技术:Dubbo+zookeeper,准备写一个demo用springboot整合dubbo和zookeeper.但是看了网上一些教程都是 ...

  3. 在linux系统上怎么获取命令的帮助信息及man文档划分

    如何在linux系统上获取命令的帮助信息及man文档的章节划分 1.命令 -- help 2.man 命令 后者更加详细 首先帮助中尖括号<>和方括号[]以及省略号...的含义, 在方括号 ...

  4. MySQL篇：第三章_详解DQL语言

    DQL语言的学习 基础查询 一.语法: SELECT 要查询的东西 [FROM 表名]; 类似于Java中 :System.out.println(要打印的东西); 特点: ①通过select查询完的 ...

  5. 网络性能总不好？网络调优专家AOE帮你来“看看”

    摘要:为提升网络性能.降低人工调优成本,CANN推出了自动化网络调优工具AOE,通过子图调优.算子调优与梯度调优的功能,让网络可以在AI硬件上获得最佳性能. 本文分享自华为云社区<网络性能总不好 ...

  6. 解读8大场景下Kunpeng BoostKit 使能套件的最佳能力和实践

    摘要:本次鲲鹏 BoostKit 训练营为开发者介绍如何基于鲲鹏 BoostKit 使能套件实现应用性能的加速,并重点剖析性能优化技术和关键能力. 本文分享自华为云社区<[云驻共创]" ...

  7. vue2升级vue3：composition api中监听路由参数改变

    vue2 的watch回顾 我们先回顾一下vue2中watch <watch性能优化:vue watch对象键值说明-immediate属性详解> <vue中methods/watc ...

  8. appuploader 入门使用

    回想一下我们发布 iOS 应用,不仅步骤繁琐,非常耗时.一旦其中一步失误了,又得重新来.作为一名优秀的工程师不应该让这些重复的工作在浪费我们的人生.在软件工程里面,我们一直都推崇把重复.流程化的工作交 ...

  9. 企业需要知道的5个 IAM 最佳实践

    在之前的文章中,我们了解了在代码发布到 GitHub 之前如何管理用户权限.但你知道吗?人为错误竟然是迄今为止数据泄露的主要原因!根据统计,高达95%的数据泄露是由配置错误和不良网络环境引起的.黑客通 ...

  10. 火山引擎DataLeap的Catalog系统搜索实践（一）：背景与功能需求

    火山引擎DataLeap的Data Catalog系统通过汇总和组织各种元数据,解决了数据生产者梳理数据.数据消费者找数和理解数的业务场景,其中搜索是Data Catalog的主要功能之一.本文详细介 ...