万字血书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目录重整 在项 ...
随机推荐
- 神经网络优化篇：详解正则化（Regularization）
正则化 深度学习可能存在过拟合问题--高方差,有两个解决方法,一个是正则化,另一个是准备更多的数据,这是非常可靠的方法,但可能无法时时刻刻准备足够多的训练数据或者获取更多数据的成本很高,但正则化通常有 ...
- 使用jvm工具排查系统问题
java-jvm-tool Jstatd 远程连接(推荐) 不用重启项目 远程机配置 [demo@localhost jvmtest]$ vi jstatd.all.policy# 内容grant c ...
- NetSuite 开发日记 —— 库存详细信息记录更改数量问题
详细报错: "type":"error.SuiteScriptError","name":"USER_ERROR",&q ...
- Javascript Ajax总结——其他跨域技术之服务器发送事件SSE
SSE(server-Sent Events,服务器发送事件)是围绕只读Comet交互推出的API或者模式.SSE API创建到服务器的单向连接,服务器通过这个连接可以发送任意数量的数据.服务器响应的 ...
- MOSS对话式大型语言模型
MOSS是复旦大学自然语言处理实验室发布的一种类似于ChatGPT的会话语言模型.MOSS能够按照用户的指示执行各种自然语言任务,包括回答问题.生成文本.摘要文本.生成代码等.MOSS还能够挑战错误的 ...
- Python笔记二之多线程
本文首发于公众号:Hunter后端 原文链接:Python笔记二之多线程 这一篇笔记介绍一下在 Python 中使用多线程. 注意:以下的操作都是在 Python 3.8 版本中试验,不同版本可能有不 ...
- Redis 使用的 10 个小技巧
Redis 在当前的技术社区里是非常热门的.从来自 Antirez 一个小小的个人项目到成为内存数据存储行业的标准,Redis已经走过了很长的一段路. 随之而来的一系列最佳实践,使得大多数人可以正确地 ...
- 使用openfrp搭建网站[无公网ip]
使用openfrp搭建网站的理由 免费/低成本 安全 可扩展 使用条件 有一台低功耗准系统/服务器[无公网ip] u盘 网线/waif网卡 屏幕 使用方法 第1步准备服务 低功耗准系统 / 服务器 推 ...
- Programming Abstractions in C阅读笔记：p235-p241
<Programming Abstractions in C>学习第66天,p235-p241总结. 一.技术总结 1.backtracking algorithm(回溯算法) (1)定义 ...
- 数仓性能调优：row_number() over(p)-rn=1性能瓶颈发现和改写套路
本文分享自华为云社区<GaussDB(DWS)性能调优:row_number() over(p)-rn=1性能瓶颈发现和改写套路>,作者:Zawami . 1.改写场景 本套路应用于子查询 ...