万字血书Vue—走近Vue
Vue是什么？
Vue是一套用于构建用户界面的渐进式JavaScript框架
构建用户界面：用vue往html页面中填充数据
渐进式：Vue可以自底向上逐层的应用，从轻量小巧核心库的简单应用，到引入各式各样插件的复杂应用。
框架：一整套现成的解决方案，遵守框架的规范，学习框架，就是学习框架中的规定用法
谁开发的？
https://zhuanlan.zhihu.com/p/58335278
Vue特点
- 采用组件化模式，提高代码复用率，且让代码更好维护。
- 声明式编码，开发人员无需操作DOM，提高开发效率。
Vue文档
起步
<!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的更多相关文章
- 万字血书React—走近React
配置开发环境 脚手架工具create-react-app 储备知识:终端或命令行.代码编辑器 React官方中文文档 create-react-app 其是基于Node的快速搭建React项目的脚手架 ...
- 万字血书Vue—路由
多个路由通过路由器进行管理. 前端路由的概念和原理 (编程中的)路由(router)就是一组key-value对应关系,分为:后端路由和前端路由 后端路由指的是:请求方式.请求地址和function处 ...
- vue入门 vue与react和Angular的关系和区别
一.为什么学习vue.js vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/ ...
- Vue (三) --- Vue 组件开发
------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[compo ...
- vue学习:vue+webpack的快速使用指南（新手向）
一.vue有两种使用方式: 1.下载vue.js <script src="vue.js"></script> 2.使用npm npm install vu ...
- Vue 项目 Vue + restfulframework
Vue 项目 Vue + restfulframework 实现登录认证 - django views class MyResponse(): def __init__(self): self.sta ...
- 【vue】vue +element 搭建项目，组件之间通信
父子组件通信 父 通过props属性给 子传递数据 子 操作 父 this.$parent.XXX 子通过$emit传递参数 或者通过vue-bus vue-bus既可以实现父子组件之间的通信,也可 ...
- 【vue】vue +element 搭建项目，vuex中的store使用
概述: 每一个 Vuex 应用的核心就是 store(仓库).“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state).Vuex 和单纯的全局对象有以下两点不同: Vuex 的 ...
- vue的.vue文件是怎么run起来的(vue-loader)
vue的.vue文件是怎么run起来的(vue-loader) 引子:vue的.vue文件是怎么跑起来的? 答:通过vue-loader,解析.vue文件,在webpack解析,拆解vue组件 1.v ...
- vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤
通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...
随机推荐
- 阿里云AnalyticDB基于Flink CDC+Hudi实现多表全增量入湖实践
湖仓一体(LakeHouse)是大数据领域的重要发展方向,提供了流批一体和湖仓结合的新场景.阿里云AnalyticDB for MySQL基于 Apache Hudi 构建了新一代的湖仓平台,提供日志 ...
- CodeForces - 764C
C. Timofey and a tree time limit per test 2 seconds memory limit per test 256 megabytes input standa ...
- 解决 VM with version 2.1.0 has multidex support ; VM has multidex support, MultiDex support library is disabled.问题
发布打包完之后,android studio提示 VM with version 2.1.0 has multidex support I/MultiDex: installI/MultiDex: V ...
- Linux服务器安装好Jenkins，IP+端口无法访问的问题排查
1.是否已安装jdk,命令:java -version 2.查看Jenkins进程是否还在,命令 ps -ef|grep jenkins 3.查看8080(Jenkins默认)端口号是否开放,命令:f ...
- MinIO入门
MinIO 是一种高性能.S3 兼容的对象存储. 官方资料 中国官网 代码仓库 安装和部署MinIO 单节点单硬盘部署MinIO 单节点多硬盘部署MinIO 多节点多硬盘部署 站点复制概述 管理现有的 ...
- Go 语言为什么很少使用数组？
大家好,我是 frank,「Golang 语言开发栈」公众号作者. 01 介绍 在 Go 语言中,数组是一块连续的内存,数组不可以扩容,数组在作为参数传递时,属于值传递. 数组的长度和类型共同决定数组 ...
- 云MSP服务案例丨某知名制造集团的Oracle RAC部署实践
简介: 随着DT时代到来,移动互联网.物联网开始高速发展,更多的企业意识到了数据库架构选型对业务发展的重要性,如何管理和利用好数据已经变得越来越重要.Oracle作为世界上目前最流行的关系型数据库管理 ...
- certbot申请泛域名证书并自动续签保姆级教程
certbot申请泛域名证书并自动续签(使用docker进行部署) 一.涉及到的资源及文档 1.云解析 - OpenAPI 概览:https://next.api.aliyun.com/documen ...
- 文心一言 VS 讯飞星火 VS chatgpt （47）-- 算法导论6.1 5题
五.一个已排好序的数组是一个最小堆吗? 文心一言: 一个已排好序的数组不一定是一个最小堆.最小堆是一种特殊的二叉树,它满足以下性质:对于任意节点 x,其父节点 y 的值都小于等于 x 的值.而一个已排 ...
- C++篇：第十四章_编程_知识点大全
C++篇为本人学C++时所做笔记(特别是疑难杂点),全是硬货,虽然看着枯燥但会让你收益颇丰,可用作学习C++的一大利器 十四.编程 (一)概念 系统函数及其库是 C++语言所必须的,预处理命令不是 C ...