セクション3：Vueテンプレートの構文（補間、命令、省略形）
1つ、補間
1.1テキスト
データバインディングの最も一般的な形式は、「Mustache」構文（双大括号）を使用したテキスト補間であり、それを使用する方法は、{
{vue.data.variable}}を直接使用することです 。
1.2 HTMLv-htmlコマンドを表示する
<h1 v-html="urlStr"></h1>
1.3属性
v-bind 指令
ブール属性（存在する場合はtrueを意味します）の場合、v-bindの動作は少し異なります。
disableValの値がnull、undefined、またはfalseの場合、disabled属性はレンダリングされた要素に含まれません。
2.手順
ディレクティブが含まれていv- 前缀的特殊 attributeます。命令属性の値は単一であることが期待されますJavaScript 表达式。命令の責任は、式の値が変更されたときに対応してDOMに作用することです。
セクション4：Vueの説明と使用
1.一般的なコマンドの使用方法
2.1v-text
v-textコマンドの機能は、ラベル（textContent）のテキスト値を設定する
ことです。欠点：元のコンテンツが置き換えられ、使用するのに十分な柔軟性がありません。組み合わせて使用すると、
より良い結果が得られます。{ {-}}を使用してから、式式を使用します
2.2 v-html
v-htmlコマンドの機能は、タグのinnerHTMLを設定することであり、コンテンツ内のhtml構造はタグとして解析されます。
2.3v-show和v-if / v-else / v-else-if
2.4v-ifとv-showの使用法と違い
使用する
V-ifは、一般的に使用される判断式であり、式の値に応じてDOMの生成或移除要素にすることができます。
v-showとv-ifの表示効果は同じですが、v-show不是生成或移除一个元素，是直接生成一个 style=“display:none”来隐藏标签或者是html。
[外部リンク画像の転送に失敗しました。ソースサイトにヒル防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします（img-8awJVLT5-1612767664021）（README_files / 1.jpg）]
2.5v-ifとv-showの違い
v-ifは“真正”的条件渲染、条件付きブロック内のイベントリスナーとサブコンポーネントが、切り替えプロセス中に適切に破棄および再構築されることを保証するためです。
v-怠惰な場合：最初のレンダリング中に条件がfalseの場合、何も実行されません-条件ブロックは、条件が初めてtrueになるまでレンダリングされません。
対照的に、v-showははるかに単純不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换です。
一般的に、v-ifはスイッチングのオーバーヘッドが高く、v-showは初期レンダリングのオーバーヘッドが高くなります。したがって、頻繁に切り替える必要がある場合は、v-showの方が適しています。実行時に条件がほとんど変更されない場合は、v-ifの方が適しています。
2.6 v-if / v-else-if / v-elseの使用
v-if / v-else-if / v-elseは、実際には複数の条件判定に使用されます。その条件が満たされると、データまたはHTMLが表示されます。インターフェース判定方法が少し悪い気がします。機能、うまく書いてください判断ロジックはインターフェースでより良く表示されます、そのようなインターフェースはより簡潔になります、それほど多くのロジックはありません、インターフェースは単なる表示です、そしてあまりにも多くのロジックの設計は負担を増やします書き直し
2.7v-
配列またはオブジェクトをループで表示する必要がある場合は、この時点でv-forを使用し、v-forを使用して特定の構文「aliasinexpression」を使用できます。
<h1 v-for="(item, index) in strData1">{
{item.name + ":" + index}}</h1>
2.8 v-on
v-バインディングイベントリスナー
で使用され普通元素上时，只能监听原生 DOM 事件ます。で使用され自定义元素组件上时，也可以监听子组件触发的自定义事件ます。
1) 简单使用
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
2) 传参
方式：无参数，DOM对象，参数，参数和DOM对象
<!-- 有括号的无参数 -->
<button v-on:click="but2()">按钮2</button>
<!-- 不带括号的时候，click会获取原生DOM对象 -->
<button v-on:click="but2">按钮2 原生DOM对象</button>
<!--参数方法-->
<button v-on:click="but3(1)">按钮3</button>
<!--要参数又要有原生DOM对象，需要使用 $event-->
<button v-on:click="but4(1, $event)">按钮4</button>
2.9イベント修飾子
ストップコールevent.stopPropagation（）。
防止呼び出しevent.preventDefault（）。
キャプチャ-イベントリスナーを追加するときにキャプチャモードを使用します。
self-コールバックは、リスナーにバインドされた要素自体からイベントがトリガーされた場合にのみトリガーされます。
{keyCode | keyAlias}-コールバックは、イベントが特定のキーからトリガーされた場合にのみトリガーされます。
native-コンポーネントのルート要素のネイティブイベントをリッスンします。
once-コールバックを1回だけトリガーします。
左-（2.2.0）マウスの左ボタンがクリックされたときにのみトリガーされます。
right-（2.2.0）マウスの右ボタンがクリックされたときにのみトリガーされます。
中-（2.2.0）マウスの中ボタンがクリックされたときにのみトリガーされます。
パッシブ-（2.3.0）{パッシブ：true}モードでリスナーを追加
2.10vバインド
<!-- 最简单的使用，直接给id赋值，如果要修改id的值，只要修改app.data.id就行了 -->
<div v-bind:id="idValue">你好</div>
<!-- 最常见的图片展示，我们图片一般都是存在服务器，这时候这个动态绑定就变成很简单实现了 -->
<img v-bind:src="srcUrl1">
<!-- 因为属性动态绑定也是比较常用的指令，Vue也提供缩写(:)代表(v-bind:) -->
<img :src="srcUrl1">
2.11vモデル
input、select、textarea3つの要素にv-model命令を置くと、双方向のバインディングが作成されます。つまり、input、select、textareaの値が変更されると、v-modelのデータが変更されます。 vモデルのデータが変更されると、input、select、およびtextareaが変更されます。
<!-- 最简单的使用-->
<input v-model="message" />
v-modelは、フォームデータの双方向バインディングに使用されます。実際、これはシンタックスシュガーです。これには、次の2つの操作があります。
1.v-bindは値属性をバインドします
2. v-on命令は、入力イベントを現在の要素にバインドします
<!--用一个语法糖也能实现-->
<input v-bind:value="message" v-on:input="message = $event.target.value">
####修飾子：
.lazy-変更イベントを監視するために入力を置き換えます。number-
入力文字列を有効な数値に置き換えます。trim-
入力の先頭と末尾のスペースをフィルタリングします
2.12 v-pre
v-preは、この要素とその子要素のコンパイルプロセスをスキップします。元のMustacheラベルを表示するために使用できます。命令なしで多数のノードをスキップすると、コンパイルが高速化されます。
たとえば、これは「{
{message}}、hello」を直接出力し、{ {message}}を
直接翻訳しません 。
2.13vマント
v-cloak 这个指令保持在元素上直到关联实例结束编译。[v-cloak] {display：none}などのCSSルールで使用すると、このディレクティブはコンパイルされていないMustacheタグを非表示にすることができます直到实例准备完毕。
実際の状況：VueのMustache文法変換が遅れる可能性があります延迟的情况下我们写的{
{data}}}就出现一个没有翻译的“{
{data}}”,在界面上展示出就会不友好。このとき、v-cloakコマンドを使用する必要があります。このコマンドは、データが解析されないときにレンダリングされるスタイルと、データの後のv-cloakのスタイルです。レンダリングされます。失敗します。
v-cloakを使用する際の注意事項
実際のプロジェクトでは、@ importを使用してcssファイルをロードすることがよくあります。
@import "style.css"
@Importは、ページDOMが完全にロードされた後にロードされます。@ importによってロードされたcssファイルに[v-cloak]を書き込むと、ページはまだちらつきます。
この状況を回避するために、[v-cloak]を、、link 引入的 css 中または写一个内联 css 样式で書くことができます。これは解決されます。
2.14 v-one
要素とコンポーネントを1回だけレンダリングします。その後の再レンダリングでは、要素/コンポーネントとそのすべての子ノードが静的コンテンツとして扱われ、スキップされます。後で最も変更されたデータ値であり、前の値は変更されません
セクション5：Vueの計算されたプロパティの使用
1.計算された属性とは
データの2つの値をつなぎ合わせて一緒に表示したい場合、私の以前の執筆は、効果を達成するために2つの補間されたテキストまたは式を直接使用することです
<h1>{
{name1}} {
{name2}}</h1>
<h1>{
{name1 + ' ' + name2}}</h1>
実際、Vueの本来の目的は、インターフェースのロジックを単純化することです。インターフェースに配置されるロジックが多すぎます。後で変更すると、保守が困難になります。現時点では、Vueはより優れた機能を提供します。この問題が計算されたプロパティであることを示します。計算されます。
次の例を見て、計算された属性の使用法を説明してください。実際、計算された属性は属性と同等ですが、もう1つの操作ステップがあります。
この例では、name3は私たちが話している計算された属性であり、その値はデータのname1とname2の値を処理することによって取得されます。vueの計算された属性の優れた点の1つは、計算された属性によって使用されるデータ値です。これにより、バインディングが形成されます。つまり、そのデータの値を使用して属性が計算されます。データの値が変更された場合、計算された属性の計算値も計算されます。変更に従います。他の操作は必要ありません。すべてが応答します。
2つの計算された属性VSメソッド
計算された属性の使用法は誰もが知っています。以前に作成した実装モデルによれば、計算された属性をメソッド実装に変更することで同じ効果を得ることができます。
しかし、2つの違いは何ですか？2つの最大の違いはキャッシュです。
計算された属性は、レスポンシブ依存関係に基づいてキャッシュされ、値は、関連するレスポンシブ依存関係が変更された場合にのみ再計算されます。それ以外の場合は直接返され、この時点では計算は必要ありません。
[外部リンク画像の転送に失敗しました。ソースサイトにヒル防止リンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします（img-cs2Eo36r-1612767664024）（README_files / 2.jpg）]
Name3とgetName3は、インターフェイスで複数回使用されています。シチュエーションコンソールの出力によると计算属性只执行了一次，而方法是你用了几次就会执行几次。name1とname2が変わっても同じ状況で、計算された属性は1回だけ実行され、数回使用した後に数回実行するという方法です。
注意
1.属性の1つが頻繁に使用され、計算量が多い場合、この方法を使用すると、パフォーマンスオーバーヘッドが特に大きくなり、インターフェイスがスタックするという問題が発生します。
2. 2つの以前の使用は、特定の要件によって決定されます。你不想缓存起来就用方法，想缓存起来就用计算属性
3、属性セットを計算して取得します
すべての属性にはsetメソッドとgetメソッドがあり、計算された属性についても同じことが言えます。通常はgetを直接使用するだけですが、セットを作成するにはどうすればよいでしょうか。
次の例を見てください
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello Vue</title>
</head>
<body>
<div id="app">
<h1>{
{name1}} {
{name2}}</h1>
<h1>{
{name1 + ' ' + name2}}</h1>
<!-- 计算属性使用 -->
<h1>{
{name3}}</h1>
<!-- 计算方法使用 -->
<h1>{
{getName3()}}</h1>
<!-- 但是两个又有什么不同的地方，两者之间最大的区别就是：缓存。 -->
<h1>{
{name3}}</h1>
<h1>{
{getName3()}}</h1>
<!-- 每个属性都会有set、get方法，只是我们平时都是直接使用它的get -->
<h1>{
{name4}}</h1>
</div>
</body>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
name1: "hello",
name2: "Vue"
},
computed:{
name3 : function () {
console.log("使用属性")
return this.name1 + ' ' + this.name2;
},
name4: {
get: function () {
console.log("get值")
return this.name1 + ' ' + this.name2
},
/*控制台直接修改 app.name3 = 'a b'，name1改成a, name2改成b */
set: function (value) {
console.log("set值")
let names = value.split(' ');
this.name1 = names[0];
this.name2 = names[1];
}
}
},
methods:{
getName3: function () {
console.log("使用方法methods")
return this.name1 + ' ' + this.name2;
}
}
});
</script>
</html>