1. v-bind: 绑定属性或者参数或者元素
<body>
<div id="app-2">
<span v-bind:title= "message" >
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
</script>
2. v-model:进行元素的双向绑定
<div id="app">
{{message}}
<input v-model="message">
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm=new Vue({
el: '#app',
data: {
message: 'hello,wowowo',
}
3. v-on: 事件监听器，绑定事件
<body>
<div id="app">
{{message}}
<button v-on:click="reverseMessage">点击倒转</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm=new Vue({
el: '#app',
data: {
message: 'hello,wowowo',
Mydata:[
{小名: '123'},
{小红: '456'},
{小张: '789'}
]
},
methods: {
reverseMessage:function ()
{
this.message= this.message.split(',').reverse()
}
}
})
4. 计算函数:
关键字 computed，将数值存储在内存中。当重新调用对象时或改变方法里面的值（message改变）时才会重新更新值
computed:
{
Mynow: function ()
{
this.message;
return Date.now();
}
}
5. Vue组件
Vue.component('Myfist',{
props: ['date'],
template: '<li> {{date.test}}</li> <li>2</li>'
})
6. slot插槽
可以动态改变页面的部分
扫一扫
32万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
