The end of vue is a file format customized by vue.js, called a single-file component; a ".vue" file is a separate component, and the html and related content of the component are encapsulated in the file. css and js realize the encapsulation of a component.
The operating environment of this tutorial: windows7 system, vue3, Dell G3 computer.
What file ends with vue?
Single file component:
1. Files ending with .vue are a file format customized by vue.js and are called single-file components
2. A .vue file is a separate component within the file. It encapsulates the html, css and js related to the component, realizing the encapsulation of a component.
3. The .vue file consists of three parts
<tenplate> <!--html,组件的页面结构--> </template> <script> //js,组件的功能配置 </script> <style> /*css,组件的样式*/ </style>
Define a component yourself:
CompA.vue
<template> <div> <h2>自定义组件</h2> <p>{{ name }}</p> <button @click="change">修改name</button> </div> </template> <script> export default{ data(){ return{ name:"huit" } }, methods:{ change(){ this.name="juju" } } } </script> <style> h2{ color:red; } </style>
App.vue
<template> <!-- <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> --> <!-- <comp-a></comp-a> --> <!-- <CompA></CompA> --> <CompA/> </template> <script> // import HelloWorld from './components/HelloWorld.vue' import CompA from './components/CompA' //可以省略后缀名 export default { name: 'App', components: { // HelloWorld // 'comp-a':CompA // CompA:CompA //驼峰式写法 CompA //帕斯卡式,首字母大写,ES6的简写 } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
Browser input: http://localhost:8080/
Recommended learning: "vue.js video tutorial"
The above is the detailed content of What file does vue end with?. For more information, please follow other related articles on the PHP Chinese website!