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 種類のトップレベル言語ブロック
、<script>、<style> が含まれており、オプションのカスタム ブロックを追加することもできます: <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><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></pre><div class="contentsignin">ログイン後にコピー</div></div></p><h2 id="%E7%BB%84%E4%BB%B6%E7%BB%93%E6%9E%84%E8%AE%B2%E8%A7%A3">コンポーネント構造説明<strong></strong></h2><ul><li>各コンポーネントを独立した .vue ファイルに配置します。<p></p></li><li> ファイルのサフィックスは次のとおりです: <p>.vue <code> ファイル</code></p></li><li>このファイルには 3 つの部分があります: <p>template<code>、</code>script<code>、</code>style<code></code></p></li><li>##template<p></p><ul><li>HTML 構造を記述します<p></p></li><li>ここの HTML 部分は Live タグで完全に囲む必要があることに注意してください<p></p></li></ul></li><li>#script<p></p><ul><li>ロジック、データ、メソッド、ライフサイクルフック、計算プロパティなどを記述します。この部分<p></p></li><li>ここのデータはオブジェクトではなくなっていることに注意してください。コンポーネントでは、データはオブジェクトを返す関数になります。 <p></p></li></ul></li>#style<li><p></p><ul>スタイルの書き方<li><p></p></li>インポート方法外部 css 、 <li><p></p># CSS でインポート (本文使用): <ul><li><p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> @import url(./babel.css);</pre><div class="contentsignin">ログイン後にコピー</div></div></p></li></ul></li></ul></li>##ショートカット キーをすばやく生成: </ul><vue><ul><li><p><code></code></p>単一ファイル コンポーネントを実行</li><li><p>In cmd Inウィンドウ内の vue ファイルのルート ディレクトリに、「<strong>vueserveindex.vue</strong>」と入力します。ここで、</p>index.vue<p> は、実行する必要がある単一のファイル コンポーネントへのパスです。 <code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">vue serve index.vue</pre><div class="contentsignin">ログイン後にコピー</div></div> </code><code> 注意事項 </code></p><p><strong></strong>テンプレート内の HTML 部分はタグで完全にラップする必要があります</p><ul><li><p> el がコンポーネント内にあり、コンポーネントをマウントする必要はありません。いいえ、使用する HTML であるテンプレートが既に存在します。</p></li><li><p>data はコンポーネント内の関数です</p></li><li><p></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><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></pre><div class="contentsignin">ログイン後にコピー</div></div></li></ul>他のコンポーネントをコンポーネントに導入する方法</li></ul><h2 id="%E5%A6%82%E4%BD%95%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%AD%E5%BC%95%E5%85%A5%E5%85%B6%E5%AE%83%E7%BB%84%E4%BB%B6"><strong>導入方法他のコンポーネントをコンポーネントに結合してアセンブリを実現します。 </strong></h2><blockquote>コンポーネントを使用するための 3 つのステップ<p></p></blockquote><p>1: コンポーネントをインポートします</p><ul><li><p>カスタマイズされたコンポーネント名を「」からインポートしますコンポーネント パス";</p><ul><li><p>注意: ここでのコンポーネント パスが同じディレクトリにある場合でも、「./コンポーネント名」を追加するのが最善です。そうしないとエラーが報告されます</p></li><li><p></p></li>2: コンポーネントの登録</ul></li><li>##コンポーネントを使用するには登録が必要です。登録方法は次のとおりです: <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">export default {
components: {
组件名, //注册的组件都写在components对象下。
}
}</pre><div class="contentsignin">ログイン後にコピー</div></div> </p><ul><li><p></p>3: コンポーネントを使用します (対応する HTML の場所に書き込むだけです)</li><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <组件名></组件名> //该组件名来自于在组件注册时的组件名</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><template>
<div class="main">
<!-- 使用组件 -->
<!-- 在这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></pre><div class="contentsignin">ログイン後にコピー</div></div></ul></li><li><p></p></li>コンポーネントで外部プラグインを使用する方法</ul><ul></ul><h2 id="%E7%BB%84%E4%BB%B6%E4%B8%AD%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E5%A4%96%E9%83%A8%E6%8F%92%E4%BB%B6">axios を例に挙げます<strong></strong>##外部プラグインの使用は 3 つのステップに分かれています</h2><p><strong></strong>パッケージ化 (外部プラグインのインストール) </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">npm i axios //到相应目录下执行该命令</pre><div class="contentsignin">ログイン後にコピー</div></div><p></p>#導入パッケージ (単一ファイル コンポーネントで外部プラグインをインポート) <ul style="list-style-type: disc;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">import axios from "axios"</pre><div class="contentsignin">ログイン後にコピー</div></div><li><p></p>パッケージを使用します (対応するコードの場所で使用されます)</li> <li>使用方法は以前と同じで、使い方や使い方は<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">axios({
url:"xxx"
}).then(res=>{
})</pre><div class="contentsignin">ログイン後にコピー</div></div></p></li>DEMO<li><p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><template>
<div>
<input type="text" v-model="searchValue" />
<button @click="getMusic">点我</button>
<ul>
<li v-for="(item, index) in songs" :key="index">{{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>
ログイン後にコピー
コンポーネント間の値の転送
##コンポーネント 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
你选中的当前歌曲:{{localSong}}
<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
<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>
ログイン後にコピー
Vue-cli プロジェクトの作成- 電車を通して
スキャフォールディングとは
スキャフォールディングはプロジェクト テンプレートであり、ファイル全体の基本ディレクトリ構造を設定し、必要なファイルを構築することに相当し、多くの作業を節約できます。
プロジェクトの作成:
进入项目文件夹(就是项目名的文件夹)
运行项目(根目录,readme同级目录)
稍等片刻 ，出现如下效果说明成功了
Vue-cli项目结构项目结构说明：
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
