vue细化分析 随笔
body体 七中情况
<body>
<div id="app">
{{message}}
</div>
<div id="app-2">
<span v-bind:title="message">wossdad</span>
</div>
<div id="app-3">
<p v-if="seen">Now</p>
<div id="app-4">
<ol>
<li v-for="todo in todos">{{todo.text}}</li>
</ol>
</div>
<!--处理用户输入-->
<div class="app-5">
<p>{{message}}</p>
<button v-on:click="reverseMessage">按钮</button>
</div>
<div id="app-6">
<p>{{message}}</p>
<input v-model="message">
</div>
<!--用组件构建（应用）-->
<ul>
<todo-item></todo-item>
</ul>
<div id="app-7">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
</div>
</body>
七种对应的script体
<script>
var vm=new Vue({
el:'#app',
data:{
message:'Hellow xieting'
}
})
var vm2=new Vue({
el:'#app-2',
data:{
message:'sdsa'+new Date()
}
})
var vm3=new Vue({
el:'#app-3',
data:{
seen:true
}
})
var vm4=new Vue({
el:'#app-4',
data:{
todos:[
{text:'Learn JavaScript'},
{text:'learn Vue'},
{text:'Build something awesome'}
]
}
})
var vm5=new Vue({
el:'.app-5',
data:{
message:'vue js'
},
methods:{
reverseMessage:function () {
this.message=this.message.split('').reverse()
}
}
})
var app6=new Vue({
el:'#app-6',
data:{
message:'ddd'
}
})
Vue.component('todo-item',{
props:['todo'],
template:'<li>{{todo.text}}</li>'
})
var vm7=new Vue({
el:'#app-7',
data:{
groceryList:[
{text:'Vegetables'},
{text:'Cheese'},
{text:'Whatever else humans are supposed to eat'}
]
}
})
</script>vue解析
最新推荐文章于 2023-05-14 10:27:30 发布
203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
