Vue学习-声明式渲染

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/MoonLight_dR/article/details/79399631

声明式渲染

 Vue.js的核心是一个允许采用的简洁的模板语法来声明式地将数据渲染进DOM的系统:

1.文本插值
<div id="app">
		<p>{{message}}</p>
	</div>
	<script>
		const app=new Vue({
			el:"#app",
			data:{
				message:"hello vue.js"
			}
		});
	</script>

页面显示hello vue.js

说明:采用双括号进行引用,表示是vue里的message的值;

          el中的值与div中的id是对应的;

2.绑定元素v-bind

  

<div id="app-2">
		<span v-bind:title="message">
			鼠标悬停几秒钟查看此处动态绑定的提示信息!
		</span>
	</div>
	
	<script>
		const app=new Vue({
			el:"#app-2",
			data:{
				message:"页面加载于"+new Date().toLocaleString()
			}
		});
	</script>

说明:v-bind被称为指令,指令带有前缀v-,以表示是vue提供的特殊属性;

          这里具体表示将这个元素节点的title特性和vue实例的message属性保持一致;

3.条件与循环v-if,v-for
  
<div id="app-3">
		<p v-if="seen">现在你看见我了</p>
	</div>
	
	<script>
		const app3=new Vue({
			el:"#app-3",
			data:{
				seen:true
			}
		});
	</script>
<div id="app-4">
		<ol>
			<li v-for="todo in todos">
				{{todo.text}}
			</li>
		</ol>
	</div>
	
	<script>
		const app4=new Vue({
			el:"#app-4",
			data:{
				todos:[
				{text:"学习Javascript"},
				{text:"学习Vue"},
				{text:"做个项目"}
				]
			}
		});
	</script>
4.事件监听器v-on
<div id="app-5">
		<p>
			{{message}}
		</p>
		<button v-on:click="reverseMessage">
			逆转消息
		</button>
	</div>
	
	<script>
		const app=new Vue({
			el:"#app-5",
			data:{
				message:"hello vue"
			},
			methods:{
				reverseMessage:function(){
					this.message=this.message.split('').reverse().join('')
				}
			}
		});
	</script>

5.双向绑定 v-model

<div id="app-6">
		<p>{{message}}</p>
		<input v-model="message">
	</div>
	<script>
		const app=new Vue({
			el:"#app-6",
			data:{
				message:"hello vue"
			}
		});
	</script>





展开阅读全文

没有更多推荐了,返回首页