その他のvue構文：
1.イベントの監視：
v-onの基本構文：v-on：monitored event = "event function"
構文sugar：上記の形式は次のように変更できます。@ Listener event = "event function"
パラメーターを渡す問題：
1。必要がない場合パラメータを渡す場合、次の関数の括弧（）は省略できますが、（）を記述しない場合、ネイティブイベントイベントオブジェクトもデフォルトで渡されることに注意して
ください。2。複数のパラメータを渡す場合、ネイティブイベントイベントオブジェクトを渡す必要があります。$ eventを使用して正式なパラメータとして渡すことができます。
例：
<div id="app">
<!--不传递参数：默认传递一个原生的event的对象-->
<button v-on:click="button1">点击我1</button>
<!--传递二个参数,如果也要传递event原生事件，则需要$event传递-->
<button @click="button2('张三',$event)">点击我2</button>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
},
methods:{
button1: function (event){
console.log(event);
console.log("button1被点击了")
},
/*函数的简写方式，等同于上边*/
button2(name,event){
console.log(name);
console.log(event);
console.log("button2点击了")
}
}
})
</script>
v-on修飾子：
1.stop：バブリングを停止します。現在のイベントの親にまだイベントがある場合、この修飾子を使用して、親イベントがトリガーされ
ないようにすることができます。2.pervent：デフォルトのイベントを防止します。例：ドアフォームを使用して送信する場合は、送信ボタンをクリックして送信できます。このように送信したくないが、イベントをトリガーしたい場合は、関数を呼び出して自分で送信するときに、perevent修飾子を使用できます。このボタンのデフォルトイベントを防ぐため。
3. {keyCode | keyAlias}：キー修飾子。キーをクリックしてイベントをトリガーすることを指定します。例：@keyup。key= "event"：指定されたキーが解除されると、イベントがトリガーされます
4.once：関数は1回だけトリガーされます
2. v-if、v-else-if、v-else
これらの3つの命令は、jsで使用するif、else-if、elseと非常によく似ています。vueでは、これら3つは、式の結果に基づいて要素またはコンポーネントをレンダリングするか破棄するかを決定できます。式がfalseの場合、対応するラベルはDOMにまったく表示されません。
<div id="app">
<span v-if="type">
<label>用户名</label>
<input type="text" placeholder="请输入用户名" key="username-input"/>
</span>
<span v-else-if="!type">
<label>邮箱</label>
<input type="text" placeholder="请输入邮箱" key="email-input"/>
</span>
<button @click="checkType">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
type: true
},
methods:{
checkType(){
this.type = !this.type;
}
}
})
</script>
注：
1。v-if、v-else-if、v-elseの3つの式では、{ {}}を使用せずに、データから直接値を取得できます 。直接使用するだけです。
2.上記の場合、入力ボックスにテキストを入力した後、クリックしてタイプを切り替えたところ、テキストの内容が消えていないことがわかりました。理由：Vueがパフォーマンスを考慮すると、新しい要素を作成する代わりに、作成済みの要素を使用しようとします。この場合、Vueは元の入力が使用されていないことを検出し、別の入力が使用されます。その後、Vueは元の入力がelseに入力します。 解決策：Vueに再利用させたくない要素に属性キーを追加します。キーの値が異なる限り、再利用されません。同じ場合でも、再利用されます。
3.v-show
v-showとv-ifはどちらも同じ機能を持っています。どちらも、要素またはコンポーネントをレンダリングして削除するかどうかを決定するために使用されます。また、式も必要です。
v-ifとの違い：
v-ifは、式が無効な場合、要素はまったく作成されないことを意味します
。v-showは、式が無効な場合、display属性がnoneに設定されます。
選択方法：
複数回切り替える、v-show
を使用して1回切り替える、v-ifを
使用してv-ifと同じ使用法を使用する、デモなし
4.v-トラバーサル用
配列をトラバースします。
<div id="app">
<ul>
<!--不需要索引,在需要使用的地方，可以使用{
{music}}，或者使用bind的方式都可以-->
<li v-for="music in musics">{
{music}}</li>
<li>======================================</li>
<!--需要索引，index就表示了索引，从0开始-->
<li v-for="(music,index) in musics">{
{index+music}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
musics: ['逃爱','四季于你','大天棚','错乱时空']
}
})
</script>
オブジェクトをトラバースします。
<div id="app">
<!--遍历数组-->
<ul v-for="person in persons">
<!--遍历集合：这个地方的person是上边遍历之后的每个person，还可以继续遍历-->
<li v-for="(value,key,index) in person">{
{index}}{
{key}}{
{value}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
persons: [
{
name: "张三",
age: 20
},
{
name: "李四",
age: 25
},
{
name: "王五",
age: 21
}
]
}
})
</script>
vueはレスポンシブフレームワークであることがわかっています。バックグラウンドデータが変更され、フォアグラウンドが自動的に変更されます。対応するVueには、配列を操作するためのリアクティブメソッドもいくつかあります。これらのメソッドを使用すると、フォアグラウンドも直接変更されます
。1.push（）：add配列
の最後に要素
2.pop（）：配列の最後の要素を削除します3.unshift（）：配列の最初に要素を追加します
4.shift（）：最初の要素を削除します
5.sort（） ：配列を並べ替える
6.reverse（）;配列内のデータを逆にする
splice（）：魔法のスキル、配列を追加、削除、変更できます！！！
増加：スプライス（開始インデックス、1、「増加したデータ」）
削除：スプライス（開始インデックス）開始インデックスから残りの要素を削除します
特定の削除：スプライス（インデックスの開始、いくつかの削除）
変更：スプライス（要素のインデックス、1、変更されたコンテンツを変更します）
注：使用：配列名[]メソッドは応答せず、リアルタイムで更新できません。
5.v-モデルバインディングフォームの操作
通常、イベントを介して手動でフォームを送信できますが、顧客が入力したフォームからユーザーが入力した値を取得するにはどうすればよいですか？v-modelを使用して、フォームとデータを両方向にバインドできます
<div id="app">
<!--v-bind:value="message" @input="message = $event.target.value"-->
<input type="text" v-model="message">
<textarea v-model="message">
</textarea>
<span>{
{message}}</span>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
message: ''
}
})
</script>
上でバインドされたフォーム入力タグ（使用されるvモデル）は、実際には構文上の砂糖であり、2つのタグの省略形に相当します
。v-bind：value = "message"：タグの値とデータ内のメッセージバインディング
@input = "message = $ event.target.value"：入力タグを監視します。データ入力がある場合、データ内のメッセージの値はユーザーが入力した値に変更されます。
これは双方向バインディングです。
v-modelバインディングredio：
<div id="app">
<input type="radio" name="gender" value="男" v-model="gender">男
<input type="radio" name="gender" value="女" v-model="gender">女
<span>性别是：{
{gender}}</span>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
gender: '男'
}
})
</script>
v-modelバインディングチェックボックス
<div id="app">
<input type="checkbox" name="type" value="篮球" v-model="type">篮球
<input type="checkbox" name="type" value="足球" v-model="type">足球
<input type="checkbox" name="type" value="乒乓球" v-model="type">乒乓球
<input type="checkbox" name="type" value="排球" v-model="type">排球
<span>爱好有：{
{type}}</span>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
type: []
}
})
</script>
注：チェックボックスタイプの場合、このタイプはデータ内の配列である必要があります。これを選択すると、選択した値が自動的に配列に配置されます。
vモデルバインディング選択
<div id="app">
<select v-model="type">
<option value="">--请选择--</option>
<option value="篮球">篮球</option>
<option value="篮球">足球</option>
</select>
<span>选择的是：{
{type}}</span>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
type: ''
}
})
</script>
Vueの公式ウェブサイトにも値バインディングという概念があります。実際、データに値があると、v-bindの属性である値が自動的に表示されます。データに値がある限り、ページ側に自動的にエコーされます。
vモデルの修飾子：
1.lazy：遅延読み込みと同様に、上記の場合と同様に、入力はその横のスパンタグに単語ごとにエコーされます。これはパフォーマンスの無駄です。遅延修飾子を設定できます。入力が完了したら、Enterキーを押すか、カーソルを削除すると、バインドされます。
2.数値修飾子：フロントデスクで書き込む入力タイプが数値であっても、データに渡されるときは文字列型であるため、この修飾子を使用して、値をバインドするときに値を数値に変換でき
ます。3。トリム修飾子：余分なスペースを取り除いてください。