ホームページ > 記事 > ウェブフロントエンド > vueコンポーネントを記述するにはどのような方法がありますか?
vueコンポーネントを記述するにはどのような方法がありますか?
- php中世界最好的语言オリジナル
- 2018-04-14 11:49:201777ブラウズ
今回はvueコンポーネントの書き方とvueコンポーネントを使用する際の注意点を紹介します。以下は実際のケースですので見ていきましょう。
最初の方法scriptタグを使用する
<!DOCTYPE html>
<html>
<body>
<p id="app">
<my-component></my-component>
</p>
<-- 注意：使用<script>标签时，type指定为text/x-template，意在告诉浏览器这不是一段js脚本，浏览器在解析HTML文档时会忽略<script>标签内定义的内容。-->
<script type="text/x-template" id="myComponent">//注意 type 和id。
<p>This is a component!</p>
</script>
</body>
<script src="js/vue.js"></script>
<script>
//全局注册组件
Vue.component('my-component',{
template: '#myComponent'
})
new Vue({
el: '#app'
})
</script>
</html>
2番目の方法テンプレートタグを使用する
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="app">
<my-component></my-component>
</p>
<template id="myComponent">
<p>This is a component!</p>
</template>
</body>
<script src="js/vue.js"></script>
<script>
Vue.component('my-component',{
template: '#myComponent'
})
new Vue({
el: '#app'
})
</script>
</html>
3 番目のタイプ単一ファイルコンポーネント
この方法は、Vue の単一ページ アプリケーションでよく使用されます。詳細は公式サイトをご覧ください:https://cn.vuejs.org/v2/guide/single-file-components.html
.vue 接尾辞を持つファイル、コンポーネント Hello.vue を作成し、コンポーネント フォルダーに配置します
<template>
<p class="hello">
<h1>{{ msg }}</h1>
</p>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: '欢迎！'
}
}
}
</script>
app.vue
<!-- 展示模板 -->
<template>
<p id="app">
<img src="./assets/logo.png">
<hello></hello>
</p>
</template>
<script>
// 导入组件
import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
}
}
</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>
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。
推奨書籍:
JSを介してJSONデータを取得およびロードする手順の詳細な説明
以上がvueコンポーネントを記述するにはどのような方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。