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;…

学习Vue3中生命周期钩子函数

学习Vue3中生命周期钩子函数 一、前言1、介绍2、示例 一、前言 在 Vue 3 中&#xff0c;由于引入了 Composition API&#xff0c;生命周期钩子函数的使用方式略有变化。下面是 Vue 3 中常见的生命周期钩子函数以及它们对应的 Composition API 函数&#xff1a; 1、介绍 setup…

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…

微信小程序开发秘籍:数据过滤与排序的艺术【附代码】

微信小程序开发秘籍&#xff1a;数据过滤与排序的艺术 一、数据处理的重要性二、数据过滤基础2.1 过滤原理2.2 实现示例2.3 实际应用思路 三、数据排序入门3.1 排序原理3.2 实现示例3.3 高级排序技巧 四、实战应用&#xff1a;结合微信小程序4.1 数据绑定4.2 性能优化 五、问题…

【多模态】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;大大提高了清洁效率。部分高端洗地机还具备智能感…

探索微软Edge

探索微软Edge 引言 微软Edge作为Windows系统的默认浏览器&#xff0c;自2015年首次发布以来经历了多次重大更新。最引人注目的变化是&#xff0c;微软在2018年宣布将Edge浏览器内核从自家的EdgeHTML更换为开源的Chromium&#xff0c;这一转变极大地扩展了Edge的功能和市场竞争…

处理组成类的数据和操作

类是由数据和操作组成的。数据也称为字段或成员变量&#xff0c;操作也可称为方法或成员函数。它们的称谓在不同的编程语言中也有所差异。 由此可见&#xff0c;在面向过程型语言中&#xff0c;可以将变量对应的字段&#xff0c;函数称为方法。在面向过程型语言中&…

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

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

小程序常用组件

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

c++ std::unique_lcock 详解

std::unique_lock 是 C 标准库中的一个类&#xff0c;用于管理对互斥锁&#xff08;std::mutex 或其派生类&#xff09;的锁定和解锁。它提供了比 std::lock_guard 更灵活的控制&#xff0c;允许在需要时延迟锁定、提前解锁以及递归锁定等。 主要特性 延迟锁定&#xff1a;st…

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;所谓…