程序地带

vue的介绍及基本使用(详细,好理解,示例代码)


下面是对Vue的介绍和对Vue的基本使用,希望可以帮助到有需要的小伙伴~


文章目录
VUE介绍Vue:渐进式JavaScript框架Vue的基本使用Vue的基本使用步骤


VUE介绍

Vue是一套用于构建用户界面的渐进式框架。Vue被设计为可以自底向上逐层应用。


Vie的核心库只关注视图层,不仅易于上手,而且便于与第三方库或既有项目整合。当Vue与现代化的工具链以及各种支持类库结合使用的时候,Vue完全能够为复杂的单页应用提供驱动。


Vue.js的创建者是 尤雨溪


2014年2月,Vue.js正式发布2015年10月27日,正式发布1.0.02016年4月27日,发布2.0的预览版本
Vue:渐进式JavaScript框架

声明式渲染 → 组件系统→客户端路由→集中式状态管理→项目构建


官网:https://cn.vuejs.org/v2/guide/


易用︰熟悉HTML、CSS、JavaScript知识后,可快速上手Vue灵活:在一个库和一套完整框架之间自如伸缩高效:20kB运行大小,超快虚拟DOM
Vue的基本使用
Vue的基本使用步骤
需要提供标签用于填充数据引入vue.js库文件可以使用vue的语法做功能把vue提供的数据填充到标签里面

在这里插入图片描述


把下载的vue.js文件复制到vue项目中


hello world示例代码:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
</head>
<body>
<!-- 1. 提供标签用于存放数据 -->
<div id="app">
<!-- 4. 把vue提供的数据填充到标签里面 -->
<!-- 把msg数据存放到id为app的div中 -->
<div>{{msg}}</div>
</div>
<!-- 2. 引入vue.js库文件 -->
<script src="js/vue.js"></script>
<script>
// 3. 使用vue语法实现功能
var vm = new Vue({
el: "#app",
data: {
msg: 'Hello Vue'
}
})
</script>
</body>
</html>

在这里插入图片描述


在这里插入图片描述


参数分析:


el:元素的挂载位置(值可以是CSS选择器、DOM元素。即:告诉vue把数据插入到哪里

data:模型数据(值是一个对象)。即:提供数据

插值表达式{{ }}用法


将数据填充到HTML标签里插值表达支持基本的计算操作

Vue代码运行原理分析


概述编译过程的概念(Vue语法 -> 原生语法)

在这里插入图片描述


end~


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_46370867/article/details/112689326

随机推荐

Sentinel DegradeSlot熔断源码解析

Sentinel DegradeSlot熔断源码解析

本文主要来解析Sentinel熔断核心源码,基于当前最新的release版本1.8.01、Sentinel熔断机制的处理流程达到熔断触发条件(假设触发条件为当接口每秒钟超过...

邋遢的流浪剑客 阅读(771)

centOS7环境下安装hadoop2.6

centOS7环境下安装hadoop2.6

centOS7环境下安装Hadoop2.6本文采用模拟分布式(自己创建了俩个虚拟机进行模拟)体验安装Hadoop的过程。参考文章:渣渣的夏天——CentOS7...

学渣笔记 阅读(581)

vue引入图片问题

vue文件引入文件第一种<template><divid="home"><img:src="BackgroundImage"...

一个爬坑的Coder 阅读(282)

105. 从前序与中序遍历序列构造二叉树

105.从前序与中序遍历序列构造二叉树这个题分几步走:第一步:如果数组大小为零的话,说明是空节点了。第二步:如果不为空,那么取后序...

祝我快乐 阅读(928)

js数组方法Array.of

Array.of根据参数(参数数量不定),生成新数组。除了Array.of外,以下数组类型也具备of方法,方法功能类似。Int8A...

润清 阅读(662)

HTTP相关RFC

HTTPHTTP1.1—RFC7230HTTPS—RFC2818HTTP/2—RFC7540HTTP/3—draft-ietf-quic-http-33othersURI—RFC3986Cooike—...

乘风破浪2021 阅读(452)

Linux就改这么学2021/01/22

Linux就改这么学2021/01/22

du命令:其格式为“du[选项][文件]”。简单该命令就是用来查看一个或多个文件占用了多大的硬盘空间配置本地yum源为了防止开启启动挂盘丢失,需要在配置文件/etc/fst...

modi_2020 阅读(544)