Vue:默认的App.vue
Vue中默认App.vue
·
基础脚手架生成的Vue项目
App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
App.vue
本质上也是一个js文件,相当于一个模板文件(描述一个组件)。主要包括三个部分模板(结构)
、脚本文件
、样式
模板(结构):<template></template>
template内容相当于MVVM中的V——视图层
-
只能有一个入口!🏀🏀即最外层只能有一个
div
🏀🏀 -
在唯一入口之中可以放其他的东西
-
代码中的
<HelloWorld>
其实是一个组件
引入组件三部曲:
① 引入组件
② 注册组件——在components中注册组件
③标签化使用
-
HelloWorld——组件举例
① export中name
是对外声明组件名称
② style中scoped
是控制样式只在该组件中起作用
脚本文件 : <script></script>
script标签内容相当于MVVM中的VM——数据绑定交互
所有的东西基本都在export default
中,以钩子的形式呈现,在这之中实现数据绑定以及事件处理。
- name:声明组件名称
- data:在二级组建中,都是以函数的形式呈现。数据在函数中以返回值形式返回。
data中返回的值相当于MVVM中的M——存储传递数据
数据绑定的实现
在<template></template>
标签中,使用双大括号{{}}
来获取数据,并实现自动化处理
数据双向绑定——使用v-model
进行双向绑定后,在input
标签内输入内容,会自动更改msg
内容,同时上面标签内容也会自动更改
切记:🥎🥎双向绑定仅仅是一种高级语法糖,数据流传递还是单向的。🥎🥎
样式文件 : <style></style>
更多推荐
已为社区贡献2条内容
所有评论(0)