首頁 > 文章 > web前端 > 用vue寫的頁面後綴名是什麼

用vue寫的頁面後綴名是什麼

青灯夜游原創: 2022-12-27 18:28:203119瀏覽

用vue寫的頁面後綴名是「.vue」。「.vue」檔案是一個自訂的檔案類型，用類別HTML語法描述一個Vue元件；一個vue檔案就是一個元件。 vue頁面有3個組成部分：1、模板（template），即template標籤包裹的介面展示程式碼（HTML程式碼）；2、script標籤包的業務實作程式碼（js腳本程式碼）；3、style標籤包的介面樣式代碼（css樣式代碼）。

用vue寫的頁面後綴名是什麼

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

用vue寫的頁面後綴名是「.vue」。

.vue 檔案是一個自訂的檔案類型，用類別 HTML 語法描述一個 Vue 元件。每個 .vue 檔案包含三種類型的頂級語言區塊

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: &#39;Hello world!&#39;
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>

#元件結構講解

把每個元件都放到獨立的.vue檔案裡，
檔案的後綴是：.vue 檔案
此檔案三大部分： template 、 script 、 style
template
- 寫入html結構的
- #注意這裡的html部分必須用一個標籤全包住
script
- #寫邏輯的，data、methods、生命週期鉤子、計算屬性等等程式碼都寫在這個部分
- 注意這裡的data不再是一個對象，在元件裡，data將會是一個函數,return一個物件。
style
- 寫樣式的
- 如何匯入外部css ,
  - 在css中的導入(主體使用)：
  #
```
 @import url(./babel.css);
```

##快捷鍵快速產生：
#單一檔案元件的運行
在cmd視窗該vue檔根目錄下輸入
vue serve index.vue 這裡index.vue是需要執行的單一檔案元件的路徑
```
vue serve index.vue
```
#注意點
- template裡面的html部分必須用一個標籤全包住
- 元件裡沒有el，元件是不需要掛載到哪的，裡面已經有template是它的使用的html了
- data在元件裡面是一個function,return 一個物件

<template>
  <!-- 组件html区域 
  在组件里面的html都必须有一个独立的标签包住所有标签
  -->
  <div>
    <button>按钮</button>
    <button>{{msg}}</button>
  </div>
</template>

<script>
export default {
  // 不再需要el去确定使用范围
  // 组件 里面的data将是一个函数 return一个对象
  //data:function(){return {}}
  data() {
    return {
      msg: "hello"
    };
  },
  methods: {
    alertEvent(value) {
      alert(value);
    }
  },
  created() {
      //这里面语法检测比较严格，直接写console会报错
    window.console.log(this);
    // this.alertEvent(123);
  }
};
</script>

<style>
/* 如果需要引入 外部css 
在css中的导入：
 @import url(./babel.css);
 在js中的导入
 import "./babel.css"
*/
/* @import url(./babel.css); */
@import "./babel.css";
button {
  width: 100px;
}
</style>

如何在元件中引入其它元件

如何在一個元件中引入其它元件,實作一個組裝。

元件的使用三步驟

1：導入元件
- import 自訂的一個元件名稱from "元件路徑";
- 注意點，這裡元件路徑就算是目前同一目錄也最好加上"./元件名稱"，不然會報錯

#2：註冊元件

元件的使用是需要註冊的，註冊方式為：

export default {
  components: {
    组件名,     //注册的组件都写在components对象下。
  }
}

3：使用元件(寫入對應html位置即可)

    组件名>   //该组件名来自于在组件注册时的组件名

<template>
  <div>
    <!-- 使用组件  -->
    <!-- 在这index.vue是父组件，top，middle，bottom是子组件 -->
    <!-- top与middle是兄弟组件 -->
    <top></top>
    <middle></middle>
    <bottom></bottom>
  </div>
</template>
<script>
// 导入组件  这里面top,middle,bottom是需要另外创建的vue组件，这里是没创建的
import top from "./top.vue";
import middle from "./middle.vue";
import bottom from "./bottom.vue";

export default {
  // 组件注册
  components: {
    top, //相当于top:top
    middle,
    bottom
  }
};
</script>
<style>
.main {
  width: 100%;
}
.main img {
  width: 100%;
}
</style>

#元件中如何使用外部外掛

以axios為例

使用外部外掛程式分成三步驟

套件（安裝外部外掛程式）

npm i axios //到相应目录下执行该命令

導包（在單一檔案元件中匯入外部外掛程式）
```
import axios from "axios"
```

使用套件（在對應程式碼位置使用）

使用和之前一樣，該怎麼用還是怎麼用

axios({
url:"xxx"
}).then(res=>{
})

DEMO#

<template>
  <div>
    <input>
    <button>点我</button>
    <ul>
      <li>{{item.name}}</li>
    </ul>
  </div>
</template>
<script>
// 使用axios   1:安装axios，npm i axios   2:导包  import axios from "axios"  3:使用
// 导包
import axios from "axios";
export default {
  data() {
    return {
      searchValue: "", //input框的值
      songs: []
    };
  },
  methods: {
    getMusic() {
      // 使用，以前怎么用，现在还怎么用
      axios({
        url: "https://autumnfish.cn/search?keywords=" + this.searchValue,
        method: "get"
      }).then(res => {
        this.songs = res.data.result.songs;
        window.console.log(this.songs);
      });
    }
  }
};
</script>
<style>
</style>

元件間的傳值

如果A元件中引入了B元件，這樣我們就稱A元件為父元件，B為子元件

父元件傳值給子元件

在子元件標籤上定義一個ref屬性
```
  组件名>
```

在需要傳送給子元件的地方寫入：

this.$refs.xxx   //这就代表了子组件xxx的vue实例
//这里xxx代码标签中定义的ref属性名这里就可访问到子组件里面的data属性与methods方法
//如要修改子组件里面data里的某个值：          this.$refs.xxx.子组件里data属性名
//如果需要调用子组件里面methods里某个方法：   this.$refs.xxx.子组件里面methods里方法名

子元件傳值給父元件

    this.$parent    //这就代表父组件的vue实例
    //如要修改父组件里面data里的某个值：         this.$parent.父组件里data属性名
    //如果需要调用父组件里面methods里某个方法：   this.$parent.父组件里面methods里方法名

//两个组件，这个是father.vue
<template>
  <div>
    <button>点我获取数据</button>
    <div>你选中的当前歌曲:{{localSong}}</div>
    <son></son>
  </div>
</template>
<script>
// 组件使用，导包，注册，使用
//1：导包
import axios from "axios";
import son from "./son.vue";
export default {
  data() {
    return {
      songs: [],
      localSong: ""
    };
  },
    //2：注册
  components: {
    son
  },
  methods: {
    btnClick() {
      window.console.log("ref访问：", this.$refs.son.$el);
      window.console.log("原生访问:", document.getElementById("son"));
      //要调接口，是不是要使用axios
      //装包，导包，用包
      axios({
        url:
          "https://autumnfish.cn/search?keywords=神话&_t=" + Math.random() * 100
      }).then(res => {
        //   父组件传递子组件值，在子组件上定义一个ref,通过this.$refs.名字，我们就能访问子组件的实例，也就是可访问子组件data属性与methods方法
        this.$refs.son.songs = res.data.result.songs;
        this.$refs.son.alertEvent();
        window.console.log(res.data.result.songs);
      });
    }
  }
};
</script>
<style>
</style>
//son.vue
<template>
  <ul>
    <li>{{item.name}}</li>
  </ul>
</template>
<script>
// 子组件访问父组件里的data与methods更简单，只需要this.$parent就够了
export default {
  data() {
    return {
      songs: []
    };
  },
  methods: {
    liCLick(name) {
      this.$parent.localSong = name;
      window.console.log("访问父组件：", name, this.$parent);
    },
    alertEvent() {
      alert(123);
    }
  }
};
</script>
<style>
</style>

Vue-cli專案建立

##直通車

什麼是鷹架

建立專案：

- 完美选择不出错路径方法：在文件夹相应路径下的地址栏输入cmd ---再回车

运行创建命令

vue create 项目名      //这里项目名不要有中文，不要有大写字母，不要搞特殊符号，尽可能有意义 ，像普通变量命名一样

弹出的对话框先选择默认的选项（如下图）

用vue寫的頁面後綴名是什麼

稍等一会，等进度条走完提示如下画面说明成功了,如下图：

用vue寫的頁面後綴名是什麼

进入项目文件夹(就是项目名的文件夹)
- ```
cd 项目名 直接根据提示即可
```
运行项目(根目录,readme同级目录)
- ```
npm run serve
```
稍等片刻，出现如下效果说明成功了

用vue寫的頁面後綴名是什麼

Vue-cli项目结构

项目结构说明：

用vue寫的頁面後綴名是什麼

node_modules 第三方模块包，也就是项目所需要用到的依赖包
public
- favicon.ico 运行项目时在网页上显示的小图标
- index.html 项目的页面模板，也就是项目运行最开始，是先执行这个模板html的
src 项目开发主体就是在这个src目录下面
- assets 项目所需要的静态资源，如css,图片等文件
- components 项目中的单文件组件都放这里
- App.vue 入口组件，可以理解为一个项目就是一个app.vue的单文件组件，只不过里面包括了很多小组件
- main.js 入口js文件，进入项目会优先执行main.js以此来运行app.vue
.gitignore 让git忽略某些文件，文件夹
babel.config.js js编译的设置，比如把高版本的js转为低版本的js,让项目达到更好兼容性
package-lock.json 项目模块详细信息，包括来源。
package.json 项目基本信息
README.md 项目说明

Vue-cli 入口文件main.js分析

main.js中
- 创建了最外层的Vue实例
- 把App.vue这个组件，当做Vue实例内部的最顶级组件并渲染到index.html上去
最后我们看到的整个网站其实就是App.vue

【相关推荐：vuejs视频教程、web前端开发】

以上是用vue寫的頁面後綴名是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：vue實作雙向綁定有哪幾種方法下一篇：vue實作雙向綁定有哪幾種方法

看更多