脚本宝典收集整理的这篇文章主要介绍了初学Vue,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
<div id="add">{{mgs}}</div>
<script>
var add = new Vue({
el:'#add',
data:{
mgs:'Vue示例操作'
}
});
</script>
打印结果
Vue示例操作
<div id="app">
<!-- v-bind动态绑定一个或多个属性 -->
<span v-bind:title="message" v-bind:style="aa">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
//鼠标放上去显示当前时间
message:'页面加载于 ' + new Date().toLocaleString(),
aa:"color:red"
}
});
</script>
<!-- 条件 -->
<div id="app">
<h1 v-if="kanjian">我能看到</h1>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
kanjian:true
}
});
</script>
<!-- 循环 -->
<div id="app1">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
<script>
//循环
var app1 = new Vue({
el:"#app1",
data:{
todos:[
{text:"学习Vue"},
{text:"学习node"},
{text:"学习jQuery"}
]
}
});
</script>
<!-- 消息逆转案例 -->
<div id="app">
<h1>{{message}}</h1>
<input type="button" value="点击" v-on:click = "dianji">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"hello Vue!"
},
methods:{
dianji:function(){
this.message=this.message.split("").reverse().join("")
}
}
});
</script>
打印结果
!euV olleh
<!-- vue注册组件 -->
<div id="app">
<tou name="我是头部的名字"></tou>
<zhong></zhong>
<xia></xia>
</div>
<script>
Vue.component('tou', {
props: ['name'],
template: '<h4>我是头部 {{name}}</h4>'
})
Vue.component('zhong', {
template: '<h4>我只中部</h4>'
})
Vue.component('xia', {
template: '<h4>我是下部</h4>'
})
var app = new Vue({
el:"#app"
});
</script>
<ol>
<todo-item name="item.text" v-for="(item , index) in todos" key="index"></todo-item>
</ol>
<script>
Vue.component('todo-item',{
props:['name'],
template:'<li>{{name}}</li>'
});
var app = new Vue({
el:"#app",
data:{
todos:[
{text:'吃饭'},
{text:'睡觉'},
{text:'打豆豆'}
]
}
});
</script>
https://wujian1994.github.io/vue
https://github.com/wujian1994...
以上是脚本宝典为你收集整理的初学Vue全部内容,希望文章能够帮你解决初学Vue所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。