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>