使用Vue.component()创建vue组件
<div id="app">
<test v-for="item in items" v-bind:chl="item"></test>//使用v-bind绑定vue.component中的props否则定义组件无法获取到这个循环值
<!--<li v-for="item in items">{{item}}</li>-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
Vue.component("test", {
props:[‘chl‘],
template:‘<li>{{chl}}</li>‘
});
var vm = new Vue({
el:"#app",
data:{
items:["java","C","linux"]
}
});
</script>
axios异步通信：用在浏览器与nodejs之间的异步框架，主要作用是实现ajax
<style>
[v-clock]{
display: none;
}
</style>
</head>
<body>
<div id = "app" v-clock>
{{info.name}}
{{info.url}}
{{info.address.street}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>//引入axios
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data(){
return{
//请求返回的参数必须与json字符串一样
info:{
name:null,
address:{
street:null
}
}
}
},
mounted(){//钩子函数，不需要用户触发会自己执行
axios.get(‘../data.json‘).then(response=>
(console.log(this.info = response.data)));//将返回的结果赋值给info
}
});
</script>