初识VUE(一)

什么是VUE?
Vue是一套用于构建用户界面的渐进式框架
如何渐进?
声明式渲染–》组件系统–》客户端路由–》大规模状态管理–》构建工具
框架和库的区别
库是将代码集合成一个产品,供开发者去使用,开发者去调用库中的方法去实现自己的功能
框架是为了解决一类问题而开发出来的产品,基于自身的特点向用户提供一套完整的解决方案
Vue的特点
易用:
会html、css、js即可上手
灵活:
不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩
高效:
20kb min+gzip运行大小,超快虚拟DOM,最省心的优化

小试牛刀
vue官方网站
引入vue
1.直接用

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

vue在进行生产环境上线的时候,可以压缩代码,把代码都压缩成一行代码,所以在开发环境下不要使用压缩版本,不然你就失去了所有常见错误相关的警告!

练习代码
使用的编辑工具 Visual Studio Code

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script></head><body>    <div id="app">         {{ 1+1 }}          {{ "a" }}        {{ 10 }}        {{ true }}        {{ [1,2,3] }}        {{ {"a":1,"b":10} }}        {{ null }}         {{ 1*8 }}        {{ 10/2 }}        {{ 1-1 }}        {{ a }}
    </div>
    <script>        //el是elemment 元素的缩写        //插值表达式 {{ }} 支持多种类型        //data 赋值       const vm=new Vue({            el: '#app',            data:{                a:10            }

        })            </script>
</body></html>

在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值