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(){}

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数组 | 双指针经典题目

Leetcode977&#xff1a;有序数组的平方 . - 力扣&#xff08;LeetCode&#xff09;. - 备战技术面试&#xff1f;力扣提供海量技术面试资源&#xff0c;帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/squares-of-a-sorted-array/d…

STC8增强型单片机开发day04

热敏电阻 NTC(Negative Temperature Coefficient)是指随温度上升电阻减小、具有负温度系数的热敏电阻现象和材料 原理图 ADC功能引脚ADC0P1.0ADC1P1.1ADC2P5.4ADC3P1.3ADC4P1.4ADC5P1.5ADC6P1.6ADC7P1.7ADC8P0.0ADC9P0.1ADC10P0.2ADC11P0.3ADC12P0.4ADC13P0.5ADC14P0.6 温度…

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

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

智能酒精壁炉与酒店前台的氛围搭配

智能酒精壁炉与酒店前台的氛围搭配可以为前台区域增添舒适、现代和独特的氛围&#xff0c;以下是一些建议&#xff1a; 欢迎区域装饰&#xff1a; 将智能酒精壁炉作为前台欢迎区域的装饰物&#xff0c;放置在客人抵达的显眼位置。选择现代设计的壁炉款式&#xff0c;如壁挂式…

使用Eigen将经纬度、高程、偏北角转成变换矩阵

目录 1、前言 2、示例 3、代码解析 4、垂直于给定点的切平面变换 5、代码解析 1、前言 在地球表面进行刚体变换时候&#xff0c;要将具有经纬度、高程和偏北角的坐标信息转换为变换矩阵表达&#xff0c;首先需要了解坐标系之间的转换关系。 通常&#xff0c;我们会将经纬…

C# WinForm —— 18 NumericUpDown 介绍

1. 简介 数字显示框&#xff0c;通过向上、向下按钮来 增加/减小 显示的数值 2. 常用属性 属性解释(Name)控件ID&#xff0c;在代码里引用的时候会用到,一般以 numUD 开头Hexadecimal数值 up-down 控件的值是否应以十六进制显示Increment每单击一下按钮&#xff0c;增加或减…

LLVM中期报告

1&#xff0e;主要开展的工作 研究对LLVM IR层面进行代码混淆&#xff0c;分析IR的指令 &#xff0c;并且实现混淆 从LLVM代码混淆的角度出发&#xff0c;函数之间的正常调用构成了待混淆程序的原始控制流&#xff0c;不同的基础代码块构成了一个个的函数&#xff0c;每个基础…

【论文阅读】Machine Learning, Linear Algebra, and More: Is SQL All You Need?

文章目录 摘要一、介绍二、SQL算法原语2.1、Variables2.2、Functions2.3、Conditions2.4、Loops2.5、Errors 三、案例研究3.1、对数据库友好的SQL映射3.2、性能结果 四、结论以及未来工作 摘要 尽管SQL在简单的分析查询中无处不在&#xff0c;但它很少用于更复杂的计算&#xf…

泛微E9开发 添加多个多选框,实现单选框的效果

利用多个多选框实现单选框的效果 1、功能背景2、展示效果3、实现效果 1、功能背景 如下图所示&#xff0c;在表单中新增四个“选择框-复选框”类型的字段&#xff0c;并且设置其中的选项&#xff0c;每个多选框都只有一个选项&#xff0c;通过代码块实现单选框的效果 1.显示模…

idm下载到99.99%不动了 idm突然不下载了 idm下载到最后没速度咋办 IDM下载后没网了是怎么回事

idm能够帮助我们下载不同类型的网页视频&#xff0c;并且基于多线程下载技术的助力下使其下载速度比原来提升数倍以上&#xff0c;因此成为了许多朋友下载的小助手。但也有朋友反映idm下载网页视频超时连接不上&#xff0c;idm下载网页视频突然停止&#xff0c;究竟这些情况我们…

C++之Eigen库基本使用(下)

1、常见变换 Eigen::Matrix3d //旋转矩阵&#xff08;3*3&#xff09; Eigen::AngleAxisd //旋转向量&#xff08;3*1&#xff09; Eigen::Vector3d //欧拉角&#xff08;3*1&#xff09; Eigen::Quaterniond //四元数&#xff08;4*1&#xff09; Eigen::Isom…

[嵌入式系统-77]:RT-Thread-快速上手:嵌入式系统调测工具大全

目录 1. JTAG 下载调试器&#xff1a; 2. J-Link 仿真器&#xff1a; 3. ICE&#xff08;In-Circuit Emulator&#xff09;&#xff1a; 4. ROM监视器&#xff08;ROM Monitor&#xff09;&#xff1a; 5. 终端仿真工具&#xff1a; 6. 总线抓取工具&#xff1a; 7. 静态…