首页 > Web开发 > 详细

Vue.js(初学入门)

时间:2020-05-26 18:54:17      阅读:52      评论:0      收藏:0      [点我收藏+]
如果有react与小程序基础的可以发现,其他主流框架语法也是略见趋同,比如Vue.js,今天看了菜鸟教程一遍下来还是收获蛮多的,哈哈!!
<template>
<div class="TestVue">
<div style="color:red;">{{msg}}</div>
<span>{{Messagecount}}</span>
<div><button @click="Messagecount++">点击</button></div>
<div @click="clickMe">不知道</div>
<span>{{Message}}</span>
<div><input v-model="Message"/></div>
<div v-for="(item,index) in list" :key="index">
<div key={{item.id}}>
<span>{{item.message}}</span>
</div>
</div>
</div>
</template>

<script>
export default{
name: "TestVue",
props: {
msg: String
},
data(){
return{
Message:‘呱呱‘,
Messagecount:0,
list:[
{id:0,message:‘测试4‘},
{id:1,message:‘测试3‘},
{id:2,message:‘测试2‘},
{id:3,message:‘测试1‘},
{id:4,message:‘测试0‘}
]
}
},
methods:{
clickMe:function(){
alert("呱呱呱");
},
init:function(){
fetch(‘/api/test.json‘).then(response => {
console.log(response.data);
});
}
}
}
</script>

<style scoped>

</style>

Vue.js(初学入门)

原文:https://www.cnblogs.com/yuan-xiaohai/p/12967076.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!