万字血书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目录重整 在项 ...
随机推荐
- 国产化软件新浪潮: spring 改造替代...
中午看了篇<国产化软件新浪潮:jdk redis mysql tomcat nginx改造替代品及信创名录> 想给它补充个 spring 改造替代:) 七.Spring 替代品 - Sol ...
- FOJ有奖月赛-2015年11月 Problem A
Problem A 据说题目很水 Accept: 113 Submit: 445Time Limit: 1000 mSec Memory Limit : 32768 KB Problem ...
- 华企盾DSC为平面设计公司提供数据防泄漏解决方案
华企盾DSC作为一款专业的数据防泄漏解决方案,为平面设计公司提供多方位而有效的安全保障.以下是该解决方案为平面设计公司所带来的主要优势: 图纸加密保护: 超安全的加密技术确保设计公司的图纸和敏感信息得 ...
- Java：字符串(String)类型转成整型(int)的方法
Java:字符串(String)类型转成整型(int)的方法 使用 Integer.parseInt() 或 Integer.valueOf() 将 String 转换为 int. 其中: Integ ...
- 【C# 技术】C# 常用排序方式
前言 在最近的项目中经常会对C#中的数据进行排序,对于基本数据类型,其排序方式比较简单,只需要调用内置算法即可实现,但对于自定义数据类型以及自定义排序规则的情况实现起来就比较麻烦,所以在本文章中将 ...
- libGDX游戏开发之弹窗（五）
libGDX游戏开发之弹窗(五) libGDX系列,游戏开发有unity3D巴拉巴拉的,为啥还用java开发?因为我是Java程序员emm-国内用libgdx比较少,多数情况需要去官网和google找 ...
- JAVA17安装体验JFX17抢先体验
JAVA17安装体验JFX17抢先体验 java17版本是长期支持版,至少更新5年以上.而且商用免费!这里我就来体验一把. 一.下载配置 java 17 官网下载地址:https://www.orac ...
- 微短剧市场暴涨267.65%，用微短剧场景AUI Kit精巧入局
微短剧,不仅上头,更要上心. 微短剧,深度"拿捏"了这个碎片化时代,也是刚过去的2023年绕不开的热词. 与传统影视剧制作精益求精.耗时长相反,门槛与耗时"双低" ...
- Flutter 中常用的视频播放器
Flutter 中常用的视频播放器有很多种,不同的播放器有着各自的优势和缺点.下面是一些常用的视频播放器,以及它们的优势.缺点和性能优化策略. video_player: 优势:Flutter 官方提 ...
- 理论+实践详解最热的LLM应用框架LangChain
本文分享自华为云社区<LangChain是什么?LangChain的详细介绍和使用场景>,作者:码上开花_Lancer . 一.概念介绍 1.1 Langchain 是什么? 官方定义是: ...