Vue.js基础1

最新推荐文章于 2024-06-09 20:17:27 发布

一觉睡到自然醒_

最新推荐文章于 2024-06-09 20:17:27 发布

阅读量252

点赞数

分类专栏： vue.js 文章标签： vue vue.js javascript html

本文链接：https://blog.csdn.net/weixin_44289981/article/details/106178771

版权

Vue.js基础

一.Vue基础：

1.Vue基础代码结构与插值表达式：

<body>
<div id="app">
	<p>{
   {
   message}}</p>
</div>
</body>
    
<script>
var app = new Vue({
   
  el: '#app',
  data: {
   
    message:"学习Vue"
  }
})
</script>

值得注意的是，当网络较慢时，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。

<style type="text/css">
  	[v-cloak]{
   
		display: none;
	}
 </style>
<div id="app">
	<p v-cloak>{
   {
   message}}</p>
</div>

2.Vue指令：v-text和v-html

<!--
		 v-text:不能识别标签，只输出文本
		 v-html:设置元素的innerHTML，内容中有html结构的代码会被解析
-->
<body>
<div id="app">
			<h2 v-text="message"></h2>
			<h2 v-html="message"></h2>
</div> 
</body>
<script>
var app = new Vue({
   
			el:"#app",
			data:{
   
				message:"<a href='https://www.baidu.com'>百度一下</a>"
			}
			})
</script>

运行结果：

3.Vue指令：v-bind

v-bind:用于绑定属性的指令
v-bind有3种使用方法：

直接使用指令v-bind

<body>
		<div id="app">
			<input type="text"  v-bind:value="newValue" />
		</div>
</body>
<script type="text/javascript">
		var app = new Vue({
   
			el:"#app",
			data:{
   
				newValue:"这是新的Value",
			}
		})
</script>

运行结果：
在这里插入图片描述
2. 使用简化指令:

<body>
		<div id="app">
			<input type="text"  :value="newValue" />
		</div>
</body>

在绑定的时候，拼接绑定内容：:value="newValue + ', 这是追加的内容'"

<body>

最低0.47元/天解锁文章

一觉睡到自然醒_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js基础1

Vue.js基础一.Vue基础：1.Vue基础代码结构与插值表达式：<body><div id="app"> <p>{{message}}</p></div></body> <script>var app = new Vue({ el: '#app', data: { message:"学习Vue" }})</script>值得注意的是，当网络较慢时，网页还
复制链接

扫一扫