创建vue项目
运行以下命令来创建一个新项目:
npm init vue@latest
把包导入到项目中
nmp install
运行vue项目
在当前项目目录运行以下命令:
vue run dev
组件
一个vue组件分成三个部分,即<template>,<script> ,<style>.
template:就是一个网页模板和数据的组装,其中网页模板是自己写的,数据是从vue对象中取的。
script:里面了绑定的数据,方法各种vue的东西
style:就是样式表
定义局部组件
在一个vue项目中App.vue负责调用全部组件
这是局部定义组件的方式
<script>
import Test1 from './components/Test1.vue'
export default {
components:{
Test1
}
}
</script>
setup是一个语法糖,相当于上面的代码
<script setup>
import Test1 from './components/Test1.vue'
</script>
然后直接把Test1当作标签名使用即可
<template>
<main>
<Test1></Test1>
</main>
</template>
定义全局组件
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import Test1 from './components/Test1.vue'
const myapp = createApp(App);
// 组件全局注册
myapp.component("Test1",Test1);
myapp.mount('#app')
数据绑定与文本插值
最基本的数据绑定形式是文本插值,它使用的是双大括号
双大括号标签会被替换为相应组件中对应属性的值。同时每次对应属性更改时它也会同步更新。
通过data方法返回多个键值对的方式实现。
<template>
<span>商品:{{ name }}</span><br>
<span>价格:{{ price }}</span>
</template>
<script>
export default {
data(){
return{
name:"小熊饼干",
price:10
}
}
}
</script>
<style>
</style>