データの宣言とバインド
データ宣言
VIEW2
HTMLファイル
ドキュメントアドレス
を示すには、vue中国語ドキュメントHTMLを参照してください
。クリックして入力します
公式文書はこんな感じ
<div id="app"></div>
<script>
const data = {
a: 1 }
const vm = Vue.createApp({
data(){
return data
}
}).mount('#app')
console.log(vm.a)
</script>
データa = 1を宣言
してコンポーネントインスタンスを作成し、マウント
マウントはマウント、ライフサイクル機能です
ブラウザの印刷結果
別の書き方
const vm = Vue.createApp({
data(){
return{
a:1,
b:2,
c:"hahahaha",
d:true
}
}
}).mount('#app')
console.log(vm.a+vm.b+vm.c+vm.d)
同じ効果
VUEプロジェクト
<template>
<div></div>
</template>
<script>
export default {
name: "Test1125",
data() {
return {
a: 1,
b: 2,
c: true,
d: "I,dog"
};
}
};
</script>
<style scoped></style>
データバインディングの使用
この文書は次のように述べています
v-テキスト
要素のテキスト値を更新する
ドキュメントは
<h1 v-text="d"></h1>
<h1>{
{d}}</h1>
v-html
HTML要素をレンダリングする
ドキュメントは
データでの使用
testHtml: "<span style='color: red'>我是狗</span>"
div
<div v-html="testHtml"></div>
v-show
要素の表示
ケースを切り替えます
。cはtrueです。
<div>
<h1>我是狗</h1>
<div v-show="c">我不是狗</div>
<h1>我是狗</h1>
</div>
<div>
<h1>我是狗</h1>
<div v-show="!c">我不是狗</div>
<h1>我是狗</h1>
</div>
v-if
v-ifの機能はv-showと同じですが
、値がtrueであるかどうかに応じて、再構築された要素とバインドされたデータを破棄します。
<div>
<h1>我是狗</h1>
<div v-if="!c">我不是狗</div>
<h1>我是狗</h1>
</div>
v-ifとv-showの比較
v-show
v-if
v-else
V-elseを使用する前に、V-ifまたはv-else-ifを兄弟要素に含める必要があります
ここでa = 1
<div>
<h1>我是狗</h1>
<div v-if="a === 0">我不是狗</div>
<div v-else>我就是狗</div>
<h1>我是狗</h1>
</div>
v-else-if
V-elseを使用する前に、V-ifまたはv-else-ifを兄弟要素に含める必要があります
<div>
<h1>我是狗</h1>
<div v-if="a === 0">我不是狗</div>
<div v-else-if="a === 1">我是狗?</div>
<div v-else>我就是狗</div>
<h1>我是狗</h1>
</div>
v-for
ショッピングカート、データリストなど、データの量に応じてリストをレンダリングします
。重要なのは並べ替えのリマインダーです。
ドキュメントは
myItems: [
{ name: "dog", id: 1 },
{ name: "cat", id: 2 }
]
<div v-for="item in myItems" :key="item.id">我的名字是{
{item.name}},我的id是{
{item.id}}</div>
v-on
@と省略できます
使用法：バインドイベントリスナー
<button @click="hello">点我点我</button>
export default {
name: "Test1125",
data() {
return {
a: 1,
b: 2,
c: true,
d: "I,dog",
testHtml: "<span style='color: red'>我是狗</span>",
myItems: [
{ name: "dog", id: 1, idw: 2 },
{ name: "cat", id: 2, idw: 1 }
]
};
},
methods:{
hello(){
alert("hello");
}
}
};
vバインド
データをバインドする
<img v-bind:src="imgSrc" />
imgSrc:"/1.jpg"
vモデル
双方向のデータバインディング
<div>
<input v-model="d" />
<h2>{
{d}}</h2>
</div>
d: "I,dog"
vスロット
ユーザースロット
ここでは詳しく説明しません。
v-pre
要素と子要素のコンパイルプロセスをスキップする
<div>
<div v-pre>
{
{ a }}
<span v-pre>{
{ b }}</span>
</div>
</div>
a: 1,
b: 2,
v-マント
ドキュメントは
<style scoped>
[v-cloak]{
display: none;
}
</style>
v-一度
要素とデータは一度だけレンダリングされます。これ
が比較です
<div>
<button @click="a = 2">点击</button>
<div v-once>{
{ a }}</div>
<button @click="b = 2">点击</button>
<div>{
{ b }}</div>
</div>
aのレンダリングが最初に11になった後、クリックして
aの値を変更することは無意味ですが、bが変更されていることがわかります。
みなさん、こんにちは。私は「犬」であり、何千マイルも肉を食べることができるので、ソフトウェアカレッジのネットワークエンジニアリングの学生であるコードハスキーです。大学時代に学んだことをみんなと共有し、進歩していきたいです。ただし、レベルに限りがあるため、必然的にブログに間違いがありますので、抜けがありましたらお知らせください！当面は、csdnプラットフォームのブログホームページ（https://blog.csdn.net/qq_42027681）でのみ更新してください。
未经本人允许，禁止转载
後で発売されます
フロントエンド：vueエントリvue開発アップルレットなど。
バックエンド：javaエントリspringbootエントリなど。
サーバー：mysqlエントリサーバープロジェクトを実行するための簡単な指示クラウドサーバー
python：ウォームアップしないことをお勧めし
ます。いくつかのプラグインなどの使用を確認してください。
大学のやり方も自分自身で、一生懸命勉強し、
情熱を持って若くなります。プログラミングに興味がある場合は、qqグループに参加して一緒にコミュニケーションをとることができます：974178910
ご不明な点がございましたら、下にメッセージを残していただければ、よろしければ返信いたします。