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>

值得注意的是,当网络较慢时,网页还在加载 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种使用方法:

  1. 直接使用指令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>
  1. 在绑定的时候,拼接绑定内容::value="newValue + ', 这是追加的内容'"
<body>
		
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值