Vue.js 快速上手精华梳理-组件初体验
Vue.js 快速上手精华梳理-组件初体验
瑞新
发布于 2020-07-08 14:20:33
发布于 2020-07-08 14:20:33
Vue.js 快速上手精华梳理-组件初体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- app.message='hi bennyrhys' 可以到页面的console检验-->
<div id="app">
直接付给变量<bennyrhys name="vue"></bennyrhys>
<!-- 如果是引用的hello变量，v-bind下边data要定义-->
间接绑定变量<bennyrhys v-bind:name="hello"></bennyrhys>
</div>
<script>
Vue.component('bennyrhys',{
<!-- 声明一个变量-->
props:['name'],
template:'<h1>hello {{name}}</h1>'
})
var app = new Vue({
el:'#app',
data:{
message:"bennyrhys",
hello:'vue1'
}
})
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-03-01 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录