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. 华企盾DSC防泄密客户端安装卡住

    解决方法: 1.安装了杀毒或者同行软件,退出后安装不行的话卸载掉 2.注册表编辑被管理员禁用,导致客户端安装时一直卡住,启用注册表编辑(后续2021.6.21后发布的版本可直接安装) 由于安装了卡巴斯 ...

  2. 【C#】【IO】【实例】统计多个文件夹下的图片

    因工作需要繁琐的进行同一目录多个文件夹下的图片统计,便使用代码来解决. 需求:统计的是多少个文件夹包含了图片,并非是统计有多少张图. 我们先用Python来创建一个现场环境(巩固巩固py知识): 1 ...

  3. MyBatis中获取参数值的两种方式：${} 和 #{}，以及它们之间区别是什么？

    MyBatis中获取参数值的两种方式 ${}:的本质就是字符串拼接 #{}:的本质就是占位符赋值 ① 使用${}占位符,在字符串拼接的方式拼接sql,若为字符串类型或为日期类型的字段进行赋值时,需要手 ...

  4. 用Python来查询聊天记录

    用Python来查询聊天记录 代码 import re def Start(First_Date, Second_Date, First_Name, Second_Name): First = re. ...

  5. Centos7 Zabbix3.2安装(yum)

    http://repo.zabbix.com/zabbix/3.2/rhel/7/x86_64/  #官网下载地址(只包含zabbix的应用包) ftp://47.104.78.123/zabbix/ ...

  6. ChatGPT的中转站（欧派API） oupuapi，不扶墙也能上楼

    开启智能生活新篇章:oupo中转站(欧派)--引领人工智能大模型的枢纽 在人工智能技术日新月异的今天,我们荣幸地向您推介oupo中转站(欧派)--这一汇聚各类顶尖人工智能大模型的平台.它不仅为技术研发 ...

  7. 一些Mybatis的知识点&易错点总结

    1.映射文件配置容易出错 在映射文件中,我们习惯性在sql语句后面添加';'. 结果是报了一堆错误: org.apache.ibatis.exceptions.PersistenceException ...

  8. Programming Abstractions in C阅读笔记：p202-p234

    <Programming Abstractions in C>学习第65天,p202-p234总结. 一.技术总结 完成第五章学习,第五章介绍递归在实际问题中的进一步应用,例如汉诺塔问题, ...

  9. 华为云API中心：汇聚千行百业API资产，打造API全生命周期极致体验

    摘要:2022年11月9日,华为云全球生态部总裁康宁在华为全联接大会2022上发表"共创新价值,一切皆服务"主题演讲,并发布全新的华为云API中心. 本文分享自华为云社区<华 ...

  10. 鸿蒙轻内核M核源码分析：数据结构之任务排序链表

    摘要:鸿蒙轻内核的任务排序链表,用于任务延迟到期/超时唤醒等业务场景,是一个非常重要.非常基础的数据结构. 本文会继续给读者介绍鸿蒙轻内核源码中重要的数据结构:任务排序链表TaskSortLinkAt ...