vue3学习笔记第一天

Ys20

已于 2023-08-18 17:35:57 修改

阅读量1.2k

点赞数 1

文章标签：学习

于 2023-08-18 10:07:43 首次发布

本文链接：https://blog.csdn.net/qq_66228897/article/details/132346608

版权

创建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>