Vue学习-声明式渲染

声明式渲染

 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>