vueで書かれたページのサフィックス名は何ですか?-フロントエンドQ&A-php.cn

vueで書かれたページのサフィックス名は「.vue」です。 「.vue」ファイルは、HTML に似た構文を使用して Vue コンポーネントを記述するカスタム ファイル タイプであり、vue ファイルはコンポーネントです。 vue ページには 3 つのコンポーネントがあります: 1. テンプレート、テンプレート タグでラップされたインターフェイス表示コード (HTML コード)、2. スクリプト タグでラップされたビジネス実装コード (js スクリプト コード)、3. でラップされたインターフェイスstyle タグ スタイル コード (css スタイル コード)。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

vueで書かれたページのサフィックス名は「 .vue 」です。

.vue ファイルは、HTML のような構文を使用して Vue コンポーネントを記述するカスタム ファイル タイプです。各 .vue ファイルには、3 種類のトップレベル言語ブロック 、 、 が含まれており、オプションのカスタム ブロックを追加することもできます: {{ msg }}

export default { data () { return { msg: 'Hello world!' } } }

.example { color: red; }

This could be e.g. documentation for the component. コンポーネント構造説明 各コンポーネントを独立した .vue ファイルに配置します。 ファイルのサフィックスは次のとおりです: .vue ファイル このファイルには 3 つの部分があります: template 、script 、style ##template HTML 構造を記述します ここの HTML 部分は Live タグで完全に囲む必要があることに注意してください #script ロジック、データ、メソッド、ライフサイクルフック、計算プロパティなどを記述します。この部分 ここのデータはオブジェクトではなくなっていることに注意してください。コンポーネントでは、データはオブジェクトを返す関数になります。 #style スタイルの書き方 インポート方法外部 css 、 # CSS でインポート (本文使用): @import url(./babel.css);##ショートカット キーをすばやく生成: 単一ファイル コンポーネントを実行 In cmd Inウィンドウ内の vue ファイルのルート ディレクトリに、「 vueserveindex.vue」と入力します。ここで、index.vue は、実行する必要がある単一のファイル コンポーネントへのパスです。 vue serve index.vue 注意事項 テンプレート内の HTML 部分はタグで完全にラップする必要があります el がコンポーネント内にあり、コンポーネントをマウントする必要はありません。いいえ、使用する HTML であるテンプレートが既に存在します。 data はコンポーネント内の関数です 按钮 {{msg}}

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); } };

/* 如果需要引入 外部css 在css中的导入： @import url(./babel.css); 在js中的导入 import "./babel.css" */ /* @import url(./babel.css); */ @import "./babel.css"; button { width: 100px; } 他のコンポーネントをコンポーネントに導入する方法 導入方法他のコンポーネントをコンポーネントに結合してアセンブリを実現します。 コンポーネントを使用するための 3 つのステップ

1: コンポーネントをインポートします

カスタマイズされたコンポーネント名を「」からインポートしますコンポーネント パス";

注意: ここでのコンポーネント パスが同じディレクトリにある場合でも、「./コンポーネント名」を追加するのが最善です。そうしないとエラーが報告されます

2: コンポーネントの登録 ##コンポーネントを使用するには登録が必要です。登録方法は次のとおりです:

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

3: コンポーネントを使用します (対応する HTML の場所に書き込むだけです) 组件名> //该组件名来自于在组件注册时的组件名 // 导入组件 这里面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 } }; .main { width: 100%; } .main img { width: 100%; }

コンポーネントで外部プラグインを使用する方法 axios を例に挙げます ##外部プラグインの使用は 3 つのステップに分かれています パッケージ化 (外部プラグインのインストール)

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

#導入パッケージ (単一ファイル コンポーネントで外部プラグインをインポート) import axios from "axios"

パッケージを使用します (対応するコードの場所で使用されます) 使用方法は以前と同じで、使い方や使い方は

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

点我 {{item.name}} // 使用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); }); } } };

コンポーネント間の値の転送

##コンポーネント B がコンポーネント A に導入される場合、コンポーネント 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 点我获取数据 你选中的当前歌曲:{{localSong}} // 组件使用，导包，注册，使用 //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); }); } } }; //son.vue {{item.name}} // 子组件访问父组件里的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); } } }; Vue-cli プロジェクトの作成

電車を通して スキャフォールディングとは

スキャフォールディングはプロジェクト テンプレートであり、ファイル全体の基本ディレクトリ構造を設定し、必要なファイルを構築することに相当し、多くの作業を節約できます。

プロジェクトの作成: 作成時に間違ったパスを選択しないでください。コマンドの は、作成する必要があるファイルです Clip

完美选择不出错路径方法：在文件夹相应路径下的地址栏输入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前端开发 】

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

mPDF

SecLists

ゼンドスタジオ 13.0.1

Safe Exam Browser

PhpStorm Mac バージョン

ホットトピック