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. Bert-vits2-v2.2新版本本地训练推理整合包(原神八重神子英文模型miko)

    近日,Bert-vits2-v2.2如约更新,该新版本v2.2主要把Emotion 模型换用CLAP多模态模型,推理支持输入text prompt提示词和audio prompt提示语音来进行引导风格 ...

  2. 【2016】开机出现 system32\config\system，代码：0xc00000e9解决方法

    这是16年刚工作时写的笔记,也带来这里做个记录吧.实际工作这几年里也时不时会遇到,大多数和非正常关机有关系 今天早上,就在刚才,一个同事的电脑开不了机了,开机提示的是system32\config\s ...

  3. CSP_J

  4. 强！推荐一款自动化神器Autolt：不再重复工作

    随着互联网不断发展,它给我们带来便利的同时,也带来了枯燥.重复.机械的重复工作.今天,我要和大家分享一款老牌实用的自动化工具:AutoIt,它能够让你告别繁琐的重复性工作,提高工作效率. 这里透露一下 ...

  5. System类的方法

    1.exit() 2.currentTimeMills() 代码练习

  6. Python——第四章：迭代器（Iterators）

    迭代器iterator: 提到迭代器,最典型的就是for循环 for 变量 in 可迭代: pass 可迭代对象iterable: 是指可以使用 for 循环进行遍历的对象.除了字符串 (str).列 ...

  7. Windows Server 2016配置NTP客户端

    前提:开通Windows Time 服务 输入services.msc进入服务管理界面,找到Windows Time 开启服务. 情况1:可以直接设置NTP时钟 控制面板--时钟和区域--设置时间和日 ...

  8. 记录一次K8s pod被杀的排查过程

    问题描述 今天下午运维反馈说我们这一个pod一天重启了8次,需要排查下原因.一看Kiban日志,jvm没有抛出过任何错误,服务就直接重启了.显然是进程被直接杀了,初步判断是pod达到内存上限被K8s ...

  9. ElasticSearch-1

    原文链接:https://gaoyubo.cn/blogs/52ef5bf7.html 一.Elasticsearch 架构设计 Elasticsearch 架构层: Elasticsearch 五层 ...

  10. .NET Core Swagger Actions require a unique method/path combination for Swagger/OpenAPI 3.0. Use ConflictingActionsResolver as a workaround

    遇到的问题 因为新增了一个控制器方法,从而导致在运行Swagger的时候直接报错,异常如下: SwaggerGeneratorException: Conflicting method/path co ...