Apakah nama akhiran halaman yang ditulis dalam vue?

Nama akhiran halaman yang ditulis dalam vue ialah ".vue". Fail ".vue" ialah jenis fail tersuai yang menggunakan sintaks seperti HTML untuk menerangkan komponen Vue adalah komponen. Halaman vue mempunyai tiga komponen: 1. Templat, iaitu kod paparan antara muka (kod HTML) yang dibalut oleh teg templat 2. Kod pelaksanaan perniagaan (kod skrip js) yang dibalut oleh teg skrip; tag gaya Kod gaya (kod gaya css).

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Nama akhiran halaman yang ditulis dalam vue ialah ".vue". Fail

.vue ialah jenis fail tersuai yang menerangkan komponen Vue menggunakan sintaks seperti HTML. Setiap fail .vue mengandungi tiga jenis blok bahasa peringkat atas

<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>

Penjelasan struktur komponen

• Masukkan setiap komponen ke dalam fail .vue bebas Akhiran fail

• ialah: .vue. Fail

• Fail ini mempunyai tiga bahagian: template, script, style

• template

  • Tulis struktur html

  • Perhatikan bahawa bahagian html di sini mesti dibalut sepenuhnya dengan tag

• skrip

  • Menulis logik, data, kaedah, cangkuk kitaran hayat, sifat yang dikira dan kod lain ditulis dalam bahagian ini

  • Perhatikan bahawa data di sini bukan lagi objek. Dalam komponen, data akan menjadi fungsi yang mengembalikan objek.

• gaya

  • Gaya penulisan

  • Cara mengimport css luaran ,

    • import dalam css (penggunaan utama):

     @import url(./babel.css);

• Kekunci pintasan dijana dengan cepat: <vue></vue>

• Jalankan komponen fail tunggal

  Dalam tetingkap cmd, akar fail vue Masukkan vue serve index.vue dalam direktori Di sini index.vue ialah laluan komponen fail tunggal yang perlu dijalankan. 🎜>

  di dalam templat Bahagian html mesti dibalut sepenuhnya dengan tag

  vue serve index.vue

  Tiada el dalam komponen tidak perlu dipasang templat di dalamnya iaitu html yang digunakannya

  • data ialah fungsi dalam komponen, mengembalikan objek

  • Cara memperkenalkan objek lain dalam Komponen komponen

Cara memperkenalkan komponen lain ke dalam komponen untuk merealisasikan pemasangan.

<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>

Tiga langkah untuk menggunakan komponen

1: Import komponen

import nama komponen tersuai daripada " Laluan komponen";

• Perhatikan, walaupun laluan komponen di sini berada dalam direktori yang sama, sebaiknya tambahkan "./nama komponen", jika tidak, ralat akan dilaporkan

  2: Mendaftar komponen
  Penggunaan komponen memerlukan pendaftaran:

• • 3: Gunakan komponen (tulis sahaja ke lokasi html yang sepadan)

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

• Cara menggunakan pemalam luaran dalam komponen

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

  <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>

Ambil aksios sebagai contoh

Menggunakan pemalam luaran terbahagi kepada tiga langkah

Pakej (pasang pemalam luaran)

Pakej panduan (import pemalam luaran dalam satu komponen fail)

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

  gunakan Pakej (digunakan dalam kedudukan kod yang sepadan)
• Digunakan seperti dahulu, cara penggunaan atau cara penggunaan

  import axios from "axios"

DEMO

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

  Pemindahan nilai antara komponen

  <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>

  Jika komponen A memperkenalkan komponen B, maka kita panggil komponen A komponen induk dan B komponen anak

Komponen induk menghantar nilai kepada komponen anak

Tentukan atribut ref pada tag komponen anak

Tulis di mana anda perlu menghantar nilai kepada komponen anak:

•   组件名>

Komponen anak menghantar nilai kepada komponen induk

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

Penciptaan projek Vue-cli

Melalui kereta api

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

Apakah itu perancah

//两个组件，这个是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>

Scaffolding ialah Templat projek adalah bersamaan dengan menyediakan struktur direktori asas bagi keseluruhan fail dan membina fail yang diperlukan, yang menjimatkan banyak perkara.

Buat projek:

Jangan pilih jalan yang salah semasa membuat, iaitu jika laluan daripada arahan itu ialah fail yang perlu dibuat Klip

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

运行创建命令

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

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

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

• 进入项目文件夹(就是项目名的文件夹)

  • cd 项目名 直接根据提示即可

• 运行项目(根目录,readme同级目录)

  • npm run serve

• 稍等片刻 ，出现如下效果说明成功了

Vue-cli项目结构

项目结构说明：

• 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前端开发】

Atas ialah kandungan terperinci Apakah nama akhiran halaman yang ditulis dalam vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!