html页面引入vue会出现{{}}

最新推荐文章于 2024-05-20 17:02:17 发布
最新推荐文章于 2024-05-20 17:02:17 发布
阅读量119 收藏
点赞数
文章标签： vue.js html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50627864/article/details/135028787
版权

问题分析

{{}}是vue中用于绑定数据的语法，原html中是没有这种语法的，这也就是为什么在html中引入vue使用{{}}会出现该问题的原因，而vue js文件资源加载完毕后，页面的显示又会正常，虽然页面只会闪一下，但还是太影响用户的使用体验。

解决思路

让vue js文件引入后在显示页面元素

实现代码

v-cloak：防止页面加载时出现 vue js 的变量名。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Html页面引入Vue</title>
		<style>
			[v-cloak] {
			    display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<h1>{{ title }}</h1>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: function() {
				return {
					title: 'Hello Vue'
				}
			}
		})
	</script>
</html>

多次刷新页面不再出现{{}}

over！😁

深居我梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
VUE页面中加载外部HTML的示例代码
08-29
本篇文章主要介绍了VUE页面中加载外部HTML的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
产品流程态势图-原生HTML引入Vue.js
07-14
开箱即用的态势图看板，主要功能为，左侧自制件和右侧工艺流程块实现双向映射。左侧为产品自制件树形结构，采用递归组件实现，组件会根据层级的大小改变字体大小和颜色，背景图也会相应改变，竖线也单独做成递归组件，并计算其位置，递归组件采用vue的$on和$emit进行全局传参，避免了递归组件只能在同级状态下显示背景高亮的问题，右侧为工艺流程图，初始阶段有一次工艺流程和多次工艺流程两种情况，代码进行了分别布局，右侧工艺卡片单独做成组件，卡片共有四个状态，灰色（工艺流程块暂无数据时的状态）、蓝色（点击工艺流程块时的状态）、顺序高亮（点击左侧自制件节点会对应流程块按顺序高亮的状态，暂时没有数据，顺序全部为1）、正常颜色（工艺流程块未点击并且有数据时的状态）。页面主体做了页面自适应，采用等比例缩放的原理，简单粗暴，并且避免了页面中固定定位的图形根据页面的变化出现错位的问题，页面中有很多设计到计算的地方，可能我处理的不是最佳方案，大家可以略过，新手可以研究一下递归组件的传值，当时第一次做递归组件，也是研究了半天，以上就是改项目的大致信息，大家如果有什么疑问，可以与我沟通，我会及时回复大家！感谢大家的支持！
2023前端面试题第二弹（真实，一般人我还不给看）
热门推荐
蒙奇不想敲代码的博客
02-12 2万+
前几个月我和我的小伙伴遇到的面试题，希望能帮助到各位，我已经上岸了哦，面5过4，第一家没过因为没背面试题，加油各位
前端面试题----------------------Vue
lmk666__的博客
06-26 634
vue面试题
Vue面试题
goodfornothi的博客
10-12 250
vue优点？ 答： 轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ； 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习； 双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单； 组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势； 视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作； 虚拟DOM：dom 操作是非常
在原生HTML文件中引入Vue并使用
weixin_70486077的博客
10-27 4307
有的时候，我们需要在原生 HTML 文件中引入 Vue 使用，比如说一些门户网站，或者是未使用 Vue 脚手架的项目中使用 Vue 的功能，这时候我们就需要在 HTML 中引入 Vue.js ，优点是简单方便，不需要安装和配置额外的构建工具，适合快速原型开发和小规模项目，缺点是无法进行模块化管理，代码复用性较低，不利于大型项目的开发和维护。
vue在html标签 {{}} 中调用函数的方法
qq_45327886的博客
04-09 1万+
vue在html标签 {{}} 中调用函数
vue在html中出现{{}}的原因及解决办法
m0_60898924的博客
12-14 550
vue在html中出现{{}}的原因及解决办法
6.Vue中插入值：文本{{}}，原生HTMLv-html，属性v-bind，JavaScript表达式
cxrlover的博客
04-29 1690
文章目录插入值文本 {{}}原生HTML v-html插入属性 v-bind 插入值 在最下方附上完整代码吧，节省篇幅，过程中的介绍都截取部分代码进行说明。 文本 {{}} 插入文本数据使用{{ 数据名称 }} 的方式。这种方式之前也是经常使用到的，这里不再过多介绍了 前文：3. Vue基础指令:{{}}；v-bind；v-on；v-model；v-if；v-for。 <span>Message: {{ msg }}</span> 原生HTML v-html 使用{{}}的方式会将
Vue.js 学习笔记（二）vue模板语法
qq_44648936的博客
02-27 549
一、模板语法 Vue模板语法实现前端渲染，前端渲染即把数据填充到html标签中。 数据（来自服务器）+模板（html标签）=前端渲染（产物是静态html内容） 二、插值 1. 文本插值 用双大括号插入文本，数据可变，解释为普通文本 <div id="app"> <!-- 会与实例中的【data】中的属性绑定在一起，并且数据实现同步--> <h1>{{message}}</h1> </div></body> <sc
HTML-引入Vue3和Element Plus
04-24
嵌入了vue3加element plus的html，支持vue语法和element plus组件，js已离线
Vue中插入HTML代码的方法
12-03
注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。 二、渲染函数 渲染函数：这是通过对VNode（虚拟DOM）的操作来...
html 引入 vue.js axios element-ui
11-05
有时候需要写一些简单的页面小交互，用node 构建前端项目总有那么不合适，感觉有点大材小用，所以用html 引入 静态js，构建简单的单页面，写一些小功能
2022年前端面试宝典【1万字带答案】
检哥说IT的博客
05-30 4305
每个知识点都是老师自己整理，包含61个常见前端面试题，讲述回答问题的思路（含答案）。
Vue.js基础
qq_43384940的博客
01-31 335
Vue.js 1. 什么是Vue Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 官方链接： https://cn.vuejs.org 渐进式框架 没有大型框架的强制要求，可以只是用Vue的核心内容。 可以与其他的前端框架的混用。 学习可以循序渐进的学习。 1.1 Vue特点 易用：了解关于 HTML、CSS 和 JavaScript 的中级知识，能够完成基础的前端开发。 灵活：不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。 高
Vue 学习 第一篇 初始 Vue
YCHH1的博客
05-31 1011
MVVM 模式 、计算属性数据、修饰符、相关的案例
Vue组件引入失败，显示未定义
海胆的博客
03-13 2393
组件的 name属性 需要 引号"
Vue中文本渲染三种方法 {{}}、v-html、v-text的区别
编程界明世隐的博客
03-10 3402
v-text 说明：显示普通文本 简写方式：{{}} 语法： 1：<p v-text="msg"></p> 2：<p>{{msg}}</p> 实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> &l
vite+ts+mock+vue-router+pinia实现vue的路由权限
最新发布
beekim的博客
05-20 371
vite.config.ts配置。
html页面中引入vue组件
08-29
要在HTML页面中引入Vue组件，需要遵循以下步骤： 1. 在HTML文件中引入Vue的CDN或本地下载的Vue文件。你可以通过在`<head>`标签中添加以下代码引入Vue的CDN版本： ```html <script src="https://cdn.jsdelivr.net/npm/vue"></script> ``` 或者，如果你已经下载了Vue的本地文件，可以使用以下代码引入： ```html <script src="path/to/vue.js"></script> ``` 2. 创建HTML标记来容纳Vue组件。你可以在HTML文件中添加一个`<div>`标签，并为其指定一个唯一的id属性，例如： ```html <div id="app"></div> ``` 3. 创建Vue组件并将其挂载到指定的HTML元素上。在最后引入Vue文件的`<script>`标签后面，添加以下JavaScript代码： ```html <script> // 创建Vue实例 new Vue({ el: '#app', // 指定要挂载的HTML元素 components: { 'your-component-name': YourComponent // 在此处注册你的组件 } }); </script> ``` 在上述代码中，'your-component-name'是你给组件起的名字，YourComponent是实际定义的Vue组件。 4. 在你的Vue组件中定义HTML模板和JavaScript逻辑。可以在<script>标签中定义Vue组件的模板和逻辑，例如： ```html <script> // 定义Vue组件 var YourComponent = { template: '<div>{{ message }}</div>', // 组件的HTML模板 data() { return { message: 'Hello, Vue!' // 组件的数据 }; } }; </script> ``` 在上述代码中，模板中的`{{ message }}`将被Vue实例中的数据所替代。 这样，你就可以在HTML页面中引入和使用Vue组件了。记得根据你的需求定义和注册更多的Vue组件以供使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值