.vue file generation and usage examples sharing

In the past few days, new projects have been developed with vue2.0. Since I have never used vue before, when I got the project framework, I saw that they were all .vue files. This article mainly introduces the generation of .vue files in the vue2.0 development introductory notes. and use , very practical value, friends in need can refer to it, I hope it can help everyone.

I don’t know how to use it. Here are my findings about .vue files:

1. A .vue file is an encapsulated component. In the .vue file, you can write html, css, js

Writing html code in template is actually defining the template.

2. The styles of each .vue are not independent. The same selector can work in different .vue as long as it meets the selected conditions. For example, I defined the style in the file pointed by arrow 1. box{ width:200px; }, if there is also .box in the file pointed by arrow 2, then .box{ width:200px; } will also work in the file pointed by arrow 2, unless the style is redefined in the file pointed by arrow 2 and covered.

3. When not using a .vue single file, create a Vue root instance through the Vue constructor to start vuejs. In the .vue file, you do not need to use Vue to create an instance, use export default. The object after export default in the .vue file is equivalent to the accepted object in the new Vue() constructor:

That is:

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

4. You can introduce less, etc.:

5. Set the jump path in route.js. If it is transferred to a certain folder index.vue file, you can omit the index.vue after the folder. When you want to jump to this file:

, the following two sentences are equivalent:

So the index.vue after the folder is generally omitted.

Related recommendations:

Detailed explanation of monitoring the input input event oninput in the .vue file

First introduction to Vue.js *.Vue file_vue.js

Webstorm’s new .vue file supports highlighted vue syntax and es6 syntax

The above is the detailed content of .vue file generation and usage examples sharing. For more information, please follow other related articles on the PHP Chinese website!