共计 941 个字符，预计需要花费 3 分钟才能阅读完成。
第一天
第一个代码(hello world)
- head部分
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>- body部分
<div id="root"></div>- script部分
<script>
Vue.createApp({
template: '<div>hello world</div>'
}).mount('#root');
</script>- Vue.createApp-->是 Vue 3 中创建 Vue 应用程序实例的方式。它表示使用 Vue 的工厂函数来创建一个新的 Vue 应用程序实例.
- .mount('#root')-->在div的id等于root的上使用Vue.
- template-->展示内容
<body>
<div id="root"></div>
</body>
<script>
Vue.createApp({
data(){
return {
content: 1
}
},
template: '<div>{{content}}</div>'
}).mount('#root');
</script>- {{}}里面是个变量(JS表达式).
mounted(){
setInterval(() => {
this.content += 1;
}, 1000)
},- mounted()函数: DOM 渲染完毕后再进行的操作。
<body>
<div id="root"></div>
</body>
<script>
Vue.createApp({
data(){
return {
content: 'hello world'
}
},
methods: {
handleBtnClick() {
this.content=this.content.split(' ').reverse().join(' ');
}
},
template: `
<div>
{{content}}
<button v-on:click="handleBtnClick">反转</button>
</div>`
}).mount('#root');
</script>
</html>正文完
