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. echarts设置多条折线不是你想的那样简单

    简单的多条折线图 小伙伴写过多条折线图的都知道, 常见的折线图是 xAxis 配置项下的 data属性上设置时间或者日期. series配置项下是对应的 legend中的数据以及该条折线的数据. &l ...

  2. 面试官：说一下MySQL主从复制的原理？

    MySQL 主从复制(Master-Slave Replication)是一种数据复制技术,用于在多个数据库服务器之间的数据同步.在主从复制架构中,一个服务器被设置为主服务器(Master),充当数据 ...

  3. Python汉诺塔递归算法实现

    关于用递归实现的原理,请查看我之前的文章: C语言与汉诺塔 C#与汉诺塔 以下为代码: count = 0 def move(pile, src, tmp, dst): global count if ...

  4. Pikachu漏洞靶场 （SSRF服务端请求伪造）

    SSRF(Server-Side Request Forgery:服务器端请求伪造) curl 点击 累了吧,来读一首诗吧 url是这样的: http://192.168.171.30/pikachu ...

  5. uniapp中实现H5录音和上传、实时语音识别（兼容App小程序）和波形可视化

    目录 Recorder-UniCore插件特性 集成到项目中 调用录音 上传录音 ASR语音识别 在uniapp中使用Recorder-UniCore插件可以实现跨平台录音功能,uniapp自带的re ...

  6. 从4个特点为你解密华为云媒体网络底座AND

    本文分享自华为云社区<解密华为云媒体网络底座ADN>,作者: Satan.D . 互联网的痛点与解决思路 互联网自1968年起源依赖,已经发展了半个多世纪.互联网仅从中文字面意思,可以简单 ...

  7. 实战案例丨ModelArts在数据标注、数据过滤上的应用技巧：自动分组

    大量复杂.乱序的图片依次标注效率极低,如果一次可以标注一大片的图片将极大地提升标注效率. 自动分组识别并提取图像特征,通过ModelArts先进的聚类算法可以将所有图片分组:将特征相似的图片归为一类, ...

  8. 手把手带你玩转HetuEngine：资源规划与数据源对接

    本文分享自华为云社区<[手把手带你玩转HetuEngine](三)HetuEngine资源规划>,作者: HetuEngine九级代言 . HetuEngine支持在服务层角色实例和计算实 ...

  9. 华为云联合多家单位正式开源云原生多沙箱容器运行时Kuasar

    摘要:云原生多沙箱容器运行时Kuasar正式开源. 本文分享自华为云社区<重磅发布!华为云联合多家单位正式开源云原生多沙箱容器运行时Kuasar>,作者:云容器大未来. 当地时间4月21日 ...

  10. 论文分享丨Holistic Evaluation of Language Models

    摘要:该文为大模型评估方向的综述论文. 本文分享自华为云社区<[论文分享]<Holistic Evaluation of Language Models>>,作者:DevAI. ...