.vue檔案的生成與使用實例分享

這幾天新專案用vue2.0開發，由於之前沒用過vue，拿到專案框架看到都是.vue文件，本文主要和大家介紹vue2.0開發入門筆記之.vue文件的生成和使用 ,非常具有實用價值，需要的朋友可以參考下，希望能幫助大家。

不知道怎麼用，以下是關於.vue檔案的發現：

1、一個.vue檔案是一個封裝的元件，在.vue檔案裡可以寫html, css, js

其中template 寫html 程式碼，其實就是定義模板。

2、各個.vue之間樣式不是獨立的，同一選擇器在不同的.vue裡只要滿足選中的條件就可以起作用.比如我在箭頭1指的文件裡定義了樣式. box{ width:200px; },如果在箭頭2指的文件裡也有.box，那麼.box{ width:200px; }就會在箭頭2的文件也起作用，除非是在箭頭2的文件重新定義樣式並覆蓋。

3、不使用.vue 單一檔案時，透過 Vue 建構子 建立一個 Vue 根實例來啟動vuejs 。 .vue檔案中不用Vue建立實例，用export default 。 .vue檔案中export default 後面的物件就相當於new Vue() 建構子中的接受的物件：

##即：

<script>
  export default{
    data:function(){
      return {
        //返回一个对象
      }
    },
    methods:{
      //定义方法
    }
  }
</script>

4、可以引入less等：

#5、在route.js中設定跳躍路徑是，如果調到某一資料夾下的index.vue文件，則可以省略資料夾後的index.vue。要跳到這個檔案時：

則下面這兩句話是等價的：

所以一般是省略掉資料夾後的index.vue。

相關推薦：

.vue檔案中監聽input輸入事件oninput詳解

初識Vue.js 中的*.Vue檔_vue.js

Webstorm 新建.vue檔支援高亮vue語法和es6語法

以上是.vue檔案的生成與使用實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！