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. 使用RFC跳过权限校验的方法

    1.业务背景 由于业务流程的复杂性,用户往往只具备部分功能的权限,导致在操作自开发程序时出现权限问题.例如前台限制了用户对销售订单的修改,而自开发功能中又涉及单据修改,此时一味限制权限,则无法正常使用 ...

  2. Zabbix自带模板监控MySQL服务

    Zabbix的服务端与客户端的安装这里不再赘述了,前面也有相应的文章介绍过了,感兴趣的伙伴们可以看看历史文章就可以了,今天主要介绍下如何利用zabbix自带的模板来监控MySQL服务的一些状态,同时通 ...

  3. 网站优化之favicon.ico

    本文于2015年底完成,发布在个人博客网站上. 考虑个人博客因某种原因无法修复,于是在博客园安家,之前发布的文章逐步搬迁过来. 背景 某一天在办公室分析产品首页加载速度时,无意中从Chrome浏览器的 ...

  4. Java 插入、隐藏/显示、删除Excel行或列

    概述 操作Excel工作表时,对表格中的行或列数据可执行,包括插入.隐藏.显示.删除等在内的多种操作需求,本文将通过Java代码示例演示每种操作的具体实现方法.文中方法使用了Java Excel类库( ...

  5. MySQL进阶篇：详解存储引擎MyISAM

    MySQL进阶篇:第一章_一.三_存储引擎特点_MyISAM 1.1 存储引擎特点 1.1.2 MyISAM 1). 介绍 MyISAM是MySQL早期的默认存储引擎.. 2). 特点 不支持事务,不 ...

  6. 【华为云技术分享】解密如何使用昇腾AI计算解决方案构建业务引擎

    摘要:昇腾AI计算解决方案以极致算力,端边云融合.全栈创新,开放生态的硬核实力.用户可以使用标准的Matrix接口实现业务引擎,对外释放昇腾AI加速能力. 从卷积神经网络中的矩阵乘法(GEMM)说起 ...

  7. 一文带你掌握Redis操作指南

    摘要:Redis是一种支持Key-Value等多种数据结构的存储系统. Redis是一种支持Key-Value等多种数据结构的存储系统.可用于缓存,事件发布或订阅,高速队列等场景.该数据库使用ANSI ...

  8. 云图说丨初识分布式消息服务Kafka版

    摘要:分布式消息服务Kafka版是一款基于开源社区版Kafka提供的消息队列服务,向用户提供计算.存储和带宽资源独占式的Kafka实例. 本文分享自华为云社区<[云图说]第254期 初识分布式消 ...

  9. Hadoop中mapreduce作业日志是如何生成的

    摘要:本篇博客介绍了hadoop中mapreduce类型的作业日志是如何生成的.主要介绍日志生成的几个关键过程,不涉及过多细节性的内容. 本文分享自华为云社区<hadoop中mapreduce作 ...

  10. DarkMode(5)：深色模式不同实现方案切换

    sass自定义函数转 sass预处理 在<DarkMode(2):深色模式解决方案--css颜色变量实现Dark Mode>与<DarkMode(3):深色模式解决方案--颜色反转与 ...