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.mzph.cn/bicheng/11670.shtml

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

相关文章

质量保障之精准测试!

一、背景与概念 随着软件测试行业的长足发展&#xff0c;测试理念、技术都在发生着日新月异的变化。因此一套完整的自动化测试用例对于每个软件公司都是不可或缺的&#xff0c;然而虽然有如此规模宏大的自动化案例集资源投入&#xff0c;同时也有大量人力的投入&#xff0c;但…

虚拟仿真云平台在教育应用中的优势和意义

虚拟仿真云实验教学平台作为一种新型的教学方法&#xff0c;近年来在高校教育中得到了十分广泛的应用。它通过模拟真实的实验场景和实验操作&#xff0c;让学生在计算机上进行实验操作和数据处理&#xff0c;为学生提供了更加便捷、可靠、有效的实验学习环境。本文&#xff0c;…

Python如何绘制直流电机开闭环特性曲线?matplotlib

import matplotlib.pyplot as plt from pylab import mplmpl.rcParams[font.sans-serif] [FangSong] # 指定默认字体 mpl.rcParams[axes.unicode_minus] False # 解决保存图像是负号-显示为方块的问题# 数据集1 n1 [1206, 1174, 1141, 1116, 1037, 986] Id1 [0.505, 0.55…

【多模态】30、GPT4V_OCR | GPT4V 在 OCR 数据集上效果测评

文章目录 一、背景二、测评2.1 场景文本识别2.2 手写文本识别2.3 手写数学公式识别2.4 图表结构识别&#xff08;不考虑单元格中的文本内容&#xff09;2.5 从内容丰富的文档中抽取信息 三、讨论 论文&#xff1a;EXPLORING OCR CAPABILITIES OF GPT-4V(ISION) : A QUANTITATIV…

centos7.6安装mysql

博客主页&#xff1a;花果山~程序猿-CSDN博客 文章分栏&#xff1a;MySQL之旅_花果山~程序猿的博客-CSDN博客 关注我一起学习&#xff0c;一起进步&#xff0c;一起探索编程的无限可能吧&#xff01;让我们一起努力&#xff0c;一起成长&#xff01; 目录 1.在网页中寻找mysql…

【QT】QT环境搭建

本专栏内容为&#xff1a;QT学习专栏 通过本专栏的深入学习&#xff0c;你可以了解并掌握QT。 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;QT &#x1f69a;代码仓库&#xff1a;小小unicorn的代码仓库&#x1f69a; &#x1f339;&#x1f…

WordPress 管理员密码重置方法汇总

最近明月碰到一个 WordPress 站长求助咨询&#xff0c;说是自己 WordPress 站点的管理员密码被恶意篡改了&#xff0c;对 WordPress 了解的都知道这一般都是恶意代码造成的&#xff0c;问题大多出在使用了所谓的破解版、去授权版的插件或者主题被植入了恶意代码、后门木马。明月…

洗地机哪个牌子好性价比高又实惠?高性价比洗地机推荐【避坑指南】

洗地机是一种智能清洁家具&#xff0c;具有强大的清洁能力&#xff0c;可快速有效地清洁各种地面污渍&#xff0c;操作简便&#xff0c;省时省力。其一键操作功能使其易于上手&#xff0c;无需频繁清洗拖布和更换水&#xff0c;大大提高了清洁效率。部分高端洗地机还具备智能感…

全国防灾减灾日主题活动投稿我可算找对了投稿方法

作为一名社区公众人员,我深知对外信息宣传的重要性。特别是在全国防灾减灾日这样的特殊时刻,我们不仅要向居民普及防灾减灾知识,还要通过媒体将社区的活动和成果展示给更多人。然而,在投稿的过程中,我最初却遭遇了诸多挑战。 起初,我采用传统的邮箱投稿方式,将精心撰写的稿件发…

小程序常用组件

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

jmeter分布式集群压测

目的&#xff1a;通过多台机器同时运行 性能压测 脚本&#xff0c;模拟更好的并发压力 简单点&#xff1a;就是一个人&#xff08;控制机controler/调度机 master&#xff09;做一个项目的时候&#xff0c;压力有点大&#xff0c;会导致结果不理想&#xff0c;这时候找几个人&a…

OS复习笔记ch5-4-2

引言 承接上文我们介绍了信号量机制和应用信号量机制实现的进程同步和互斥&#xff0c;这一节我们将围绕一些经典问题对信号量机制展开更深入地探讨。 读者/写者问题 读者/写者问题与我们之前遇到的问题类型不同&#xff0c;它描述的是&#xff1a; 有读者和写者两组进程&am…

ohmyzsh的安装过程中失败拒绝连接问题的解决

1.打开官网Oh My Zsh - a delightful & open source framework for Zsh 在官网能看到下面的界面 有这两种自动安装的方式 个人本次选择的是: wget https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh -O - 1.打开终端输入安装的指令 sh -c "$(wget…

软件需求工程习题

1.&#xff08;面谈&#xff09;是需求获取活动中发生的需求工程师和用户间面对面的会见。 2.使用原型法进行需求获取&#xff0c;&#xff08;演化式&#xff09;原型必须具有健壮性&#xff0c;代码质量要从一开始就能达到最终系统的要求 3.利用面谈进行需求获取时&#xf…

K邻近算法

简介 介绍了非常简单的算法&#xff1a;K邻近算法&#xff0c;即KNN。 基本介绍 K-近邻算法&#xff08;K-Nearest Neighbors&#xff0c;简称KNN&#xff09;是一种基本且广泛应用的监督学习算法&#xff0c;主要用于分类和回归任务。 工作原理非常简答直观&#xff1a;所谓…

爆款小红书免费流量体系课程(两周变现),小红书电商教程

课程下载&#xff1a;小红书电商教程-课程网盘链接提取码下载.txt资源-CSDN文库 更多资源下载&#xff1a;关注我。 课程内容&#xff1a; 10-爆款标题(三段式取标题).mp3 11-爆款封面怎么作图.mp3 12-爆款内容的模板(三段式模板).mp3 13-小红书流量推荐背后的秘密(四大流…

数据结构与算法-排序算法1-冒泡排序

本文先介绍排序算法&#xff0c;然后具体写冒泡排序。 目录 1.排序算法简介 2.常见的排序算法分类如下图&#xff1a; 3.冒泡排序&#xff1a; 1.介绍&#xff1a; 2.动态图解 3.举例 4.小结冒泡排序规则 5.冒泡排序代码 6.优化 7.优化后时间 代码&#xff1a; 运…

讯方·智汇云校4月HCIE通过28人!证书量总计123!

智汇云校捷报 —4月华为认证证书量123本— 智汇云校4月IE捷报来了 讯方技术2024年PMP第一期3月考期顺利结班&#xff0c;考试全员通过~ 2024年4月&#xff0c;云校HCIA、HCIP、HCIE共通过123人&#xff01; 62人通过HCIA 33人通过HCIP 28人通过HCIE 祝贺以下学员通过HC…

simulink-仿真以及PID参数整定/PID tuner 的使用流程

控制器搭建与参数整定 搭建一个前馈PID控制器控制系统PID tuner使用 一个懂点控制但不多的小白&#xff0c;因为需要利用simulink仿真&#xff0c;所以不得不学习一些仿真的知识&#xff0c;这篇文章适合和我一样的新手入门&#xff0c;有理解错误的地方希望大手们能够指出来共…

Llama3-Tutorial(Llama 3 超级课堂)-- 笔记

第1节—Llama 3 本地 Web Demo 部署 端口转发 vscode里面设置端口转发 https://a-aide-20240416-b4c2755-160476.intern-ai.org.cn/proxy/8501/ ssh -CNg -L 8501:127.0.0.1:8501 rootssh.intern-ai.org.cn -p 43681参考 https://github.com/SmartFlowAI/Llama3-Tutorial/b…