vue项目步骤

### VUE学习笔记

> **官方文档**
>
> 地址：[VUE官文档](https://cn.vuejs.org)

​  **创建VUE项目：**

打开cmd窗口，切换到你要创建项目的文件夹，或者在你要创建项目的文件夹打开cmd窗口，使用以下命令

```cmd
npm init vue@latest
```

构建项目完成后，可以执行以下命令

```bash
  cd vue-test-demo
  npm install
  npm run dev
```

项目创建成功！

<template>标签：用于定义组件的模板部分，其中包含了组件的结构和布局。可以编写HTML代码来描述组件的外观和结构。这是用户界面的部分
可以使用Vue.js的模板语法，包括插值表达式 {{ }}、指令（Directives）等，以实现动态数据绑定和其他功能

<script>标签：用于定义组件的逻辑部分，其中包含了组件的行为和数据。可以编写JavaScript代码，包括Vue.js组件选项、数据属性、方法、生命周期钩子等。

在<script>标签中编写

```vue
export default {
  data(){
    return{
      msg:"这,里,是,m,s,g,的,信,息,",
      number:0,
      isStudent:true,
      rawHtml:"<a href='https://www.shenyuge.top'>次元神域阁</a>"
    }
  }
}
```

其中，在return对象中的数值可以在<template>标签中引用，比如

```vue
<template>
<h3>模板语法</h3>
<p>{{ msg }}</p>
<p>{{ number+255 }}</p>
<p>{{ isStudent ?"我很高兴":"我很不高兴"}}</p>
<p>{{msg.split(",")[2]}}</p>
<p>{{msg.split(",")[5].length == 1}}</p>
<p v-html="rawHtml"></p>
</template>
```

给标签添加script标签返回的属性名使用v-bind: + 属性名，比如：

```vue
<div v-bind:id='MyId'>
    这是个盒子
</div>
```

//当修改路由时

var that = this

//绑定这个this

  that.$router.push('/about')

//固定跳转方法