Vue2基础语法

最新推荐文章于 2024-03-15 13:23:01 发布

在云海飞

最新推荐文章于 2024-03-15 13:23:01 发布

阅读量102

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_55784914/article/details/128449105

版权

创建Vue实例

<div id="app"></div>

new Vue({
   
  el: '#app',
  data: {
   }
})

一、插值表达式、v-cloak、v-text、v-html

插值表达式

<div id="app">
	<div>{
   {
   msg}}</div>
    <!-- 解析为 <div>我是div标签</div> -->
</div>
new Vue({
   
  el: '#app',
  data: {
   
  	msg:"我是div标签"
  }
})

v-cloak

v-cloak 搭配style样式防止界面闪烁。
v-cloak 在实例准备完毕后自动消失
网络请求 vue.js 延迟时页面可能会出现模板未解析的情况

	我是p标签
	{
  {msg}}

解决方法

<style>
	[v-cloak]{
   
   		display: none;
	}
</style>
<body>
	<div id="app">
		<div v-cloak>{
   {
   msg}}</div>
	</div>
</body>

v-text 以文本形式展示 v-html 可以解析超文本标记语言

	data: {
   
  		msg:"<p style="color: red;">我是p标签</p>"
  	}
  	
  	<div v-text="msg"></div>
  	<!-- 解析为 <p style="color: red;">我是p标签</p> --

最低0.47元/天解锁文章