vue从入门到精通(一):初始Vue

一,Vue是什么

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用提供驱动。

在这里插入图片描述

二,Vue的特点

  1. 采用组件化模式,提高代码复用率、切让代码更好维护
  2. 声明式编码,让编码人员无需直接操作DOM,提高开发效率
  3. 遵循 MVVM 模式
  4. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开

三,官网

英文官网: https://vuejs.org

中文官网: https://cn.vuejs.org

四,实战

刚开始学习Vue,建议先下载Vue.js进行学习,即直接用 </script/> 引入。

Vue下载:

开发版本

生产版本

官网提示:
在这里插入图片描述
创建一个html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>初始Vue</title>
    <!-- 导入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>Hello,{{name}},{{Date.now()}}</h1>

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;

        const x = new Vue({
            el:'#root',
            data: {
                name: '张三123'
            }
        });
    </script>
</body>
</html>

总结:

  1. 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象
  2. root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法
  3. root容器里的代码被称为【Vue模板】
  4. Vue实例和容器是一一对应的
  5. 真实开发中只有一个Vue实例,并且会配合着组件一起使用
  6. {{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性
  7. 一旦data中的数据发生改变,那么模板中用到该数据的地方也会自动更新

注意区分:js表达式和js代码(语句)

1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方:

  • (1).a
  • (2).a+b
  • (3). demo(1)
  • (4).x === y ?'a’:‘b’

2.js代码(语句)

  • (1). if(){}
  • (2). for(){}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/622257.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于SpringBoot+Vue的教师个人成果管理系统

初衷 在后台收到很多私信是咨询毕业设计怎么做的&#xff1f;有没有好的毕业设计参考? 能感觉到现在的毕业生和当时的我有着同样的问题&#xff0c;但是当时的我没有被骗&#xff0c; 因为现在很多人是被骗的&#xff0c;还没有出学校还是社会经验少&#xff0c;容易相信别人…

猫头虎分享已解决Error || ERROR: Failed building wheel for XXX

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

物联网设计竞赛_3_Jetson Nano连接摄像头

ls /dev/video* 查看是否有摄像头 camorama 开启摄像头 关闭摄像头用&#xff1a; ctr c结束进程 若有camorama被启动用ps aux 或者 ps aux l grep camorama 找到对应进程用 kill -9 <PID>杀死进程再启动 必要的时候也能重启系统再试试&#xff1a; shutdown -r …

AI试衣IDM-VTON,Windows11本地安装配置记录!

昨天我们已经介绍过IDM-VTON这个开源项目了。 通过这个软件可以轻松实现一键换衣服。 昨天&#xff0c;简单演示了一下在线使用。 今天&#xff0c;来演示如何安装到本地电脑上&#xff01; 本地配置会有一定的专业性&#xff0c;懂的人可以参考下。 不懂得直接拉到最后&am…

【MySQL数据库开发设计规范】之字段设计规范

欢迎点开这篇文章&#xff0c;自我介绍一下哈&#xff0c;本人姑苏老陈 &#xff0c;是一名JAVA开发老兵。 本文收录于 《MySQL数据库开发设计规范》专栏中&#xff0c;该专栏主要分享一些关于MySQL数据库开发设计相关的技术规范文章&#xff0c;定期更新&#xff0c;欢迎关注&…

强化训练:day7(字符串中找出连续最长的数字串、岛屿数量、拼三角)

文章目录 前言1. 字符串中找出连续最长的数字串1.1 题目描述1.2 解题思路1.3 代码实现 2. 岛屿数量2.1 题目描述2.2 题目描述2.3 代码实现 3. 拼三角3.1 题目描述3.2 解题思路3.3 代码实现 总结 前言 1. 字符串中找出连续最长的数字串   2. 岛屿数量   3. 拼三角 1. 字符串…

嵌入式和单片机的区别在哪?

嵌入式和单片机是两个不同的概念&#xff0c;它们在很多方面都存在着差异。嵌入式系统是一种专用的计算机系统&#xff0c;通常用于控制和监测其他设备。它通常由微处理器、存储器、输入/输出接口和其他外围设备组成。嵌入式系统可以运行各种操作系统&#xff0c;如 Linux、Win…

java spring boot动态数据库获得配置信息连接多数据源(数据库)

数据库 数据库文件和代码文件 https://download.csdn.net/download/qq_34631220/89304173 链接&#xff1a;https://pan.baidu.com/s/1xoh6xiSRx4nW_gKvR1QPjg 提取码&#xff1a;i7b7 –来自百度网盘超级会员V5的分享 文章位置 添加链接描述 说明&#xff1a;事务只能单库…

小程序常用组件

小程序常用组件 1.组件的定义2.常用组件3.引入外部字体图标库4.组件样式5.示例代码 1.组件的定义 组件就是指微信定义的具有特殊功能的标签&#xff0c;在wxml中只能使用微信定义的标签。 2.常用组件 <view>&#xff1a;用于页面布局的块级组件&#xff0c;类似于html中的…

【3dmax笔记】021:对齐工具(快速对齐、法线对齐、对齐摄影机)

文章目录 一、对齐二、快速对齐三、法线对齐四、对齐摄影机五、注意事项3dmax提供了对齐、快速对齐、法线对齐和对齐摄像机等对齐工具: 对齐工具选项: 下面进行一一讲解。 一、对齐 快捷键为Alt+A,将当前选择对象与目标对象进行对齐。 最大对最大:

基于SpringBoot+Vue的法律咨询系统

课题背景 二十一世纪互联网的出现&#xff0c;改变了几千年以来人们的生活&#xff0c;不仅仅是生活物资的丰富&#xff0c;还有精神层次的丰富。在互联网诞生之前&#xff0c;地域位置往往是人们思想上不可跨域的鸿沟&#xff0c;信息的传播速度极慢&#xff0c;信息处理的速…

7B2 PRO主题5.4.2 免授权开心版源码 | WordPress主题

简介&#xff1a; B2 PRO 5.4.2 最新免授权版不再需要改hosts&#xff0c;和正版一样上传安装就可以激活。 直接在WordPress上传安装即可 点击下载

3.整数运算

系列文章目录 信息的表示和处理 : Information Storage&#xff08;信息存储&#xff09;Integer Representation&#xff08;整数表示&#xff09;Integer Arithmetic&#xff08;整数运算&#xff09;Floating Point&#xff08;浮点数&#xff09; 文章目录 系列文章目录前…

基于SpringBoot + MySQL的宠物医院管理系统设计与实现+毕业论文+指导搭建视频

系统介绍 项目的使用者可以避免排队挂号&#xff0c;比较方便&#xff0c;也方便于宠物医院的管理。现在的宠物本系统根据华阳社区宠物医院管理工作流程将系统使用者划分为三类&#xff0c;分别为、宠物医生、宠物主人以及系统管理人员&#xff0c;以下是对该三类类用户的具体…

几个简单操作,让3dmax渲染速度起飞‼️

3dmax渲染慢原因&#xff1a; 场景复杂度&#xff1a;场景中模型、材质、纹理和贴图的复杂性增加渲染时间。优化场景&#xff0c;使用简化模型和材质可提高速度。 高质量设置&#xff1a;高级渲染效果如光线追踪、全局照明等增加计算量。适当降低设置&#xff0c;如减少分辨率…

类文件具有错误的版本 61.0, 应为 52.0

报错如下&#xff1a; Spring Boot 3以上版本至少得依赖JDK17版本&#xff0c;如果项目中要求使用JDK8版本&#xff0c;那么只能使用Spring Boot 2版本了。 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-par…

ssm+vue的公务用车管理智慧云服务监管平台查询统计(有报告)。Javaee项目,ssm vue前后端分离项目

演示视频&#xff1a; ssmvue的公务用车管理智慧云服务监管平台查询统计&#xff08;有报告&#xff09;。Javaee项目&#xff0c;ssm vue前后端分离项目 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&…

pytest(二)

1.pytest-html⽣成报告 Pytest-HTML 是⼀个插件&#xff0c;它可以⽣成漂亮且易于阅读的 HTML 测试报告。下⾯是使⽤ pytest-html ⽣成报告的步骤&#xff1a; 1. 安装 pytest-html 插件&#xff1a; pip install pytest-html 2. 运⾏测试并⽣成报告 pytest --htmlr…

python内置类bytearray()详解

bytearray 是 Python 的一个内置类&#xff0c;它提供了一个可变序列的字节数组。 bytearray 数组的元素必须是0-255之间的整数&#xff0c;这些整数对应于ASCII字符集中的数字。下面着张图是部分ASCII字符&#xff1a; bytearray 是可变的&#xff0c;可修改其内容&#xff0c…

Linux下网络命令

目录 需求1-查看本机是否存在22端口解法1解法2解法3 需求2-查看其他主机是否存在22端口解法1解法2解法3 需求3-查看TCP连接解法1/2 需求4-统计80端口tcp连接次数解法 需求5-查看总体网络速度解法 需求6-查看进程流量解法 需求7-dns解法 需求8-traceroute到baidu解法 需求9-查看…