vueで書かれたページのサフィックス名は何ですか?
vueで書かれたページのサフィックス名は「.vue」です。 「.vue」ファイルは、HTML に似た構文を使用して Vue コンポーネントを記述するカスタム ファイル タイプであり、vue ファイルはコンポーネントです。 vue ページには 3 つのコンポーネントがあります: 1. テンプレート、テンプレート タグでラップされたインターフェイス表示コード (HTML コード)、2. スクリプト タグでラップされたビジネス実装コード (js スクリプト コード)、3. でラップされたインターフェイスstyle タグ スタイル コード (css スタイル コード)。
.vue」です。
コンポーネント間の値の転送
##コンポーネント B がコンポーネント A に導入される場合、コンポーネント A を親コンポーネントと呼びますB は子コンポーネントです。#親コンポーネントは値をサブコンポーネントに渡します
##サブコンポーネント タグに ref 属性を定義します<组件名 ref="xxx"></组件名>ログイン後にコピー
サブコンポーネントに値を渡す必要がある場所を記述します :
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
<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> //son.vue你选中的当前歌曲:{{localSong}}- {{item.name}}
ログイン後にコピー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前端开发】
以上がvueで書かれたページのサフィックス名は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1676
14
1429
52
1333
25
1278
29
1257
24
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
VUEのボタンに関数を追加する方法
Apr 08, 2025 am 08:51 AM
HTMLテンプレートのボタンをメソッドにバインドすることにより、VUEボタンに関数を追加できます。 VUEインスタンスでメソッドを定義し、関数ロジックを書き込みます。
VueでWatchの使用方法
Apr 07, 2025 pm 11:36 PM
Vue.jsの監視オプションにより、開発者は特定のデータの変更をリッスンできます。データが変更されたら、Watchはコールバック関数をトリガーして更新ビューまたはその他のタスクを実行します。その構成オプションには、すぐにコールバックを実行するかどうかを指定する即時と、オブジェクトまたは配列の変更を再帰的に聴くかどうかを指定するDEEPが含まれます。
Vueによる前のページに戻る方法
Apr 07, 2025 pm 11:30 PM
vue.jsには、前のページに戻る4つの方法があります。$ router.go（-1）$ router.back（）outes＆lt; router-link to =＆quot;/＆quot; Component Window.history.back（）、およびメソッド選択はシーンに依存します。
React vs. Vue：Netflixはどのフレームワークを使用していますか？
Apr 14, 2025 am 12:19 AM
netflixusesaCustomframeworkは、「ギボン」ビルトンリアクト、notreactorvuedirectly.1）チームエクスペリエンス：seice basedonfamperivity.2）projectomplerprojects：vueforsplerprojects、racefforcomplexones.3）customeforsneeds：reactofforsmorefloficailie.
Vue Multi-Page開発とはどういう意味ですか？
Apr 07, 2025 pm 11:57 PM
VUEマルチページ開発は、VUE.JSフレームワークを使用してアプリケーションを構築する方法です。アプリケーションは別々のページに分割されます。コードメンテナンス：アプリケーションを複数のページに分割すると、コードの管理とメンテナンスが容易になります。モジュール性：各ページは、簡単に再利用および交換するための別のモジュールとして使用できます。簡単なルーティング：ページ間のナビゲーションは、単純なルーティング構成を介して管理できます。 SEOの最適化：各ページには独自のURLがあり、SEOに役立ちます。
VUEトラバーサルの使用方法
Apr 07, 2025 pm 11:48 PM
Vue.jsには配列とオブジェクトを通過するには3つの一般的な方法があります。V-Forディレクティブは、各要素をトラバースしてテンプレートをレンダリングするために使用されます。 V-BindディレクティブをV-Forで使用して、各要素の属性値を動的に設定できます。 .mapメソッドは、配列要素を新しい配列に変換できます。
vue.jsでJSファイルを参照する方法
Apr 07, 2025 pm 11:27 PM
vue.jsでJSファイルを参照するには3つの方法があります。タグ;; mounted（）ライフサイクルフックを使用した動的インポート。 Vuex State Management Libraryを介してインポートします。
