【菜鸡学艺–Vue2–001】模板语法声明式渲染

【菜鸡学艺–Vue2–001】模板语法&声明式渲染

🦖我是Sam9029,一个前端

Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主

**🐱‍🐉🐱‍🐉恭喜你,若此文你认为写的不错,不要吝啬你的赞扬,求收藏,求评论,求一个大大的赞!👍**


文章目录

  • 【菜鸡学艺--Vue2--001】模板语法&[声明式渲染](https://v2.cn.vuejs.org/v2/guide/#声明式渲染)
    • @[toc]
    • .Vue 文件模板语法
      • `template`
      • `script`
      • `style`
      • `script`中引入文件
      • **`data`中定义响应式数据**
    • 响应式模板语法--插值

Vue框架使用时,一般采用自定义的 .vue后缀名文件

不同于 react 的 .jsx 后缀

Vue采用的思想蕾丝于原生HTML,所以才对于许多入门前端开发的同志来说,vue的具备很高的易学性,相较于其他框架

(当前掌握Vue框架之后,最大的感悟就在于,思维。拨开细节基础,学习Vue的过程就是在学习Vue的思维,如何使用vue进行编程,不会亚于从编程小白学习编程时经历的思维转变,只是学习难度降低了许多)

.Vue 文件模板语法

<template></template> // HTML标签元素
<srcipt></srcipt> // JS
<style></style> //css

从上面的标签元素来看就,很容易去理解

一般来说,可以将每一个vue文件看作一个 组件实例


template

作为放置HTML标签的位置,其作用就类似body标签元素,包括所有的HTML原生标签,以及Vue自定义的组件标签(通过import引入,并需要在组件components对象中注册)

不过值得注意的是 template 里面 只能有一个 根元素

<template><!-- div 及为根元素  --><div> <!-- 注释 采用原生HTML注释符号  --><!-- 根元素 下可防置多个 标签元素  --><div>1</div><div>2</div><div>3</div></div>
</template>

script

<script>import xxx from 'path' // ES6 引入// 暴露vue组件实例对象export default {name:'XXX',components:{},data(){return {}},methods:{}}
</script>

style

<style></style><!-- scoped 样式 作用域 限制在当前文件模板使用 -->
<style scoped></style><!-- css 预处理器 -->
<style lang='scss' scoped></style>
<!-- or -->
<style lang='less' scoped></style>

script中引入文件

直接使用 ES6 import

import XXX from 'xxx' // 依赖引入import XXX from './xxx' // 文件引入
import {XXX,YYY} from './xxx' // 文件引入import Xcomps from './xxx.vue' // 组件引入

data中定义响应式数据

作为JS框架,Vue的核心之一就是实现数据响应式

// 一般都会采用 data 中 return 对象的写法
export default {data(){return {a:'hi',}}}

一般都会采用 data 中 return 对象的写法,目的是保证 该 组件实例对象内定义的的数据不被外部污染,闭包的原理

当然你也可以像下面这样写,但是不建议,除非你时刻记得和明白你在该组件实例中为何要采用这样写法

data: {name: 'yang'
}

响应式模板语法–插值

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值:

<span>Message: {{ msg }}</span>

vue 采用 {{ }} 双括号的形式来实现 在 .vue 文件里需要的 template 标签中展示的数据渲染占位

<template><div id="app"><p>{{ a }}</p> <!-- hi 将会 代替 变量a 在网页中显示 --></div></template><script>export default {data(){return {a:'HI',}}}</script><style></style>

但是要注意的是 {{}} 的使用

{{ 表达式(拥有明确结果的语句) }}

{{ a }} // a 变量
{{ a ? 0:1 }} // 三元运算
{{ a + 1 }} // a 四则运算
{{ a.split('').reverse().join('') }} // a 数组运算

**另外注意:**模板表达式都被放在沙盒中,只能访问全局变量的一个白名单,如 MathDate 。你不应该在模板表达式中试图访问用户定义的全局变量。


🦖我是Sam9029,一个前端

文章若有错误,敬请指正🙏

**🐱‍🐉🐱‍🐉恭喜你,都看到这了,求收藏,求评论,求一个大大的赞👍!不过分吧**

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

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

相关文章

Android大厂需要刷的(999道)面试题

想必大家都在为今年的金九银十做准备&#xff0c;今年也是最为艰难的一年。作为程序员从未感觉到如此艰难&#xff0c;身边不是被辞退就是找不到工作。先不说2023年应届生毕业即失业&#xff0c;作为开发15年的老Android程序员&#xff0c;现在也在和300个人挣一个岗位。 肉少…

使用Dbeaver连接GaussDB

1.下载DBeaver&#xff0c;官网地址 2.安装软件&#xff0c;打开软件&#xff0c;点击数据库->驱动管理器&#xff0c;具体操作如下图&#xff1a; 3、选择新建后进行参数设置&#xff0c;如下图&#xff1a; 具体参数如下图 驱动名称: GS #随便定义 驱动类型&#…

Docker-安装(Linux,Windows)

目录 前言安装版本Docker版本说明前提条件Linux安装使用YUM源部署获取阿里云开源镜像站YUM源文件安装Docker-ce配置Docker Daemon启动文件启动Docker服务并查看已安装版本 使用二进制文件部署 Windows安装实现原理安装步骤基本使用 参考说明 前言 本文主要说明Docker及其相关组…

如何使用代理配置快速定位接口测试脚本问题?

在调试接口用例过程中&#xff0c;如果响应结果和预期结果不一致&#xff0c;则需要检查请求信息。通过代理获取自动化测试中的请求响应信息&#xff0c;对比与正常请求响应的区别&#xff0c;就能够更直观的排查请求错误&#xff0c;相当于编写代码时的 debug 功能。 实战练习…

软件上线测评报告怎么做?

软件上线测试 软件上线前必须经过一个整体的测评&#xff0c;从而帮助企业了解软件的运行情况。软件上线测评检测报告&#xff08;软件产品测试报告&#xff09;也通常被称为&#xff1a;科技项目验收测试报告、&#xff08;软件类&#xff09;科技成果鉴定测试、软件检测报告…

互联网摸鱼日报(2023-09-04)

互联网摸鱼日报(2023-09-04) 36氪新闻 腾讯游戏的棋中妙手 逐一解读北交所8大改革组合拳 本周双碳大事&#xff1a;全国碳市场清缴履约工作全面展开&#xff1b;宁德时代在成都成立新能源研究院&#xff1b;我国首个万吨级光伏发电直接制绿氢项目投产 你在上海 city walk&a…

cron介绍

cron表达式在线生成 在使用定时调度任务的时候&#xff0c;我们最常用的&#xff0c;就是cron表达式了。通过cron表达式来指定任务在某个时间点或者周期性的执行。 cron表达式的组成 cron表达式是一个字符串&#xff0c;由6到7个字段组成&#xff0c;用空格分隔。其中前6个字…

【无标题CAdUiPaletteSet】

#pragma once #include "TunnelSectionPalette.h"class CTunnelSectionPaletteSet : public CAdUiPaletteSet {DECLARE_DYNAMIC(CTunnelSectionPaletteSet)public:

Kotlin return 和 loop jump

再聊 return 在上一篇文章《Kotlin inline、noinline、crossinline 深入解析》 我们介绍到,在 lambda 中不能使用 return,除非该函数是 inline 的。如果该高阶函数是 inline ,调用该函数时,在传入的 lambda 中使用 return,则 return 的是离它最近的 enclosing function,…

解决uniapp下拉框 内容被覆盖的问题

1. 下拉框 内容被覆盖的问题 场景: 现在是下拉框被表格覆盖了 解决办法: 在表格上添加css 样式来解决这个问题 .add-table{display: static;overflow: visible; } display: static: 将元素会按照默认的布局方式进行显示&#xff0c;不会分为块状或行内元素。 overflow: vi…

NAT地址转换,路由器作为出口设备,实现负载分担

路漫漫其修远兮&#xff0c;吾将上下而求索 一个善于创造的人&#xff0c;一定是一个善于分享的人。 今天整理了一个实验&#xff0c;具备NAT地址转换&#xff0c;路由器作为出口设备&#xff0c;实现负载分担&#xff0c;实现路由策略 目录 实验图 实验要求 实验配置 基…

Linux--I/O复用之select

目录 一&#xff1a;概念 二&#xff1a;使用 三&#xff1a;参数介绍&#xff1a; 1.ndfs&#xff1a; 2.fd_set类型&#xff1a; 3.readfds&#xff1a; 4.writefds&#xff1a; 5.exceptfds&#xff1a; 6.timeout&#xff1a; 7.返回值&#xff1a; 四&#xff1…

Android FileObserver 的使用与简要原理

FileObserver 是一个 Android 类&#xff0c;用于监视指定文件或目录的更改。它可以帮助开发者实时检测文件或目录的创建、删除、重命名、修改等操作。通过使用 FileObserver&#xff0c;开发者可以及时响应这些文件系统变化&#xff0c;并在相应的事件发生时执行特定的操作。 …

爬虫的工作原理、挑战和应用

什么是网络爬虫&#xff1f; 网络爬虫&#xff08;Web Crawler&#xff09;是一种自动化程序&#xff0c;它能够在互联网上浏览网页、收集信息并将其存储在本地或其他地方供进一步处理和分析。爬虫通常用于搜索引擎、数据挖掘、内容聚合、价格比较等应用中。 爬虫的工作原理&…

2023年7月京东投影仪行业品牌销售排行榜(京东大数据)

鲸参谋监测的京东平台7月份投影仪行业销售数据已出炉&#xff01; 7月份&#xff0c;投影仪市场呈现增长趋势。根据鲸参谋平台的数据可知&#xff0c;7月京东平台投影仪的销量将近20万&#xff0c;同比增长约16%&#xff1b;销售额将近3.8亿&#xff0c;同比增长约4%。 ​*数据…

django.core.exceptions.AppRegistryNotReady: Apps aren‘t loaded yet.

运行django测试用例报错django.core.exceptions.AppRegistryNotReady: Apps arent loaded yet. 解决&#xff1a;在测试文件上方加上 django.setup() django.setup()是Django框架中的一个函数。它用于在非Django环境下使用Django的各种功能、模型和设置。 在常规的Django应用…

Tequila Works x Incredibuild

关于 Tequila Works Tequila Works 是一家位于西班牙马德里的电子游戏开发商&#xff0c;由劳尔鲁比奥 (Raul Rubio) 和卢兹桑乔 (Luz Sancho) 于2009年创立。该公司著名的游戏产品包括《死亡曙光》(Deadlight)、《霜华》(Rime)、《联盟外传&#xff1a;努努之歌》(Song of Nu…

springboot项目打包优化,将所有第三方包单独打包至lib目录

在pom.xml中配置以下代码&#xff0c;随后使用mvnw clean package打包 <build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><configuration><!-- 主…

韶音的耳机怎么样,韶音骨传导耳机值得入手吗

韶音关于骨传导耳机的产品在质量方面还是有着不错的表现&#xff0c;其最具代表性的骨传导耳机就是韶音OpenRun Pro&#xff0c;在国产骨传导耳机中是具备了一定的知名度&#xff0c;有着自主研发的声学技术。 最突出的点就在于颜色上多样化&#xff0c;有着经典的黑色&#xf…

每天一个工业通信协议(3)2023.8.29 (DAP接口)

文章目录 参考文献1.DAP接口介绍2.DAP接口的2/3pin3.一种DAP接口方案应用的说明,通过两步初始化把JTAG接口变成DAP接口使用4.DAP接口的协议4.1 DAP电报的分类(只用JTAG类电报)4.2 电报格式4.3 DAP有限状态机参考文献 李婧. DAP模块验证组件系统级开发和实现[D]. 陕西:西安电…