Vueの説明
-
Q：指示とは何ですか？
- 命令の本質は、ラベルのVueカスタム属性です。
- コマンド形式は、v-cloak、v-text、v-htmlなどの「v-」で始まります。
[注]：XSS攻撃を引き起こす可能性があるため、v-htmlはできるだけ使用しないでください。
-
Q：命令の機能は何ですか？
- 式の値が変化すると、それによって生成される付随的な効果がDOMに応答して作用します。（簡略化された操作）
一般的な手順
1.vマント
- 機能：ブラウザがページをロードするときの時差によって引き起こされるちらつきの問題を解決します
- 原理：最初に要素の取り付け位置を非表示にし、レンダリングを処理してから、最終結果を表示します
- 注：cssルールで使用する必要があります
- 後でちらつきの問題を解決する必要がある複数の要素がある場合は、follow要素にv-cloakを書くことができます
例
<style>
[v-cloak]{
display: none;
}
</style>
<body>
<!-- v-cloak -->
<div v-cloak>
{
{str1}}
</div>
</body>
2.データバインディングプロパティ
- v-平文で埋めるテキスト
- 補間式よりも簡潔
- 補間式のちらつきの問題はありません
- v-htmlはHTMLフラグメントを埋めます
- セキュリティの問題があります
- このウェブサイトの内部データは利用できますが、3番目の部屋のデータは利用できません
サンプルコード
<body>
<div id="app">
<!-- 插值表达式形式 -->
<div>{
{str1}}</div>
<div>{
{str2}}</div>
<!-- 上面直接原样渲染出来 -->
<!-- v-text 与 插值表达式形式一样 -->
<div v-text='str1'></div>
<div v-text='str2'></div>
<!-- v-html 会解析字符串中的标签 -->
<div v-html='str1'></div>
<div v-html='str2'></div>
</div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
str1: '迫使vue示例重新渲染。注意它仅仅影响示例本身和插入插槽内容的子组件，而不是所有子组件',
str2: '<a href="http://www.baidu.com">百度</a>',
}
})
</script>
-
v-元の情報を事前に入力する
-
式のコンパイルプロセスをスキップして、元の情報を表示します
<span v-pre>{
{这里不会被编译}}</span>
命令で式を実行したくない場合は、式に引用符を追加するだけで済みます。次に例を示します。
<div v-html='"msg"'></div>
3.v-1回
- 役割：要素とコンポーネントを1回だけレンダリングします。その後、要素とコンポーネントはレスポンシブ（データレベル）機能を失います。
- レスポンシブを理解する方法
- レスポンシブレイアウト：端末デバイスの画面サイズの変更に応じてレイアウトを変更します
- データ応答：データの変更後にページが変更され、ページのデータ変更コードのデータも変更されます（双方向データバインディング）
<!-- 动态修改msg值，此绑定将不会发生改变 -->
<div v-once>{
{msg}}</div>
4.v-バインド
- 機能：1つ以上の属性の動的バインディング[コンポーネント内：宣言されると、複数回使用される]
- シナリオ：特定のデータを取得するときに使用されます
<!-- v-bind 绑定href属性值 -->
<a v-bind:href="url" v-bind:target="type">跳转</a>
<!-- v-bind 绑定href属性值 简写形式 -->
<a :href="url" :target="type">跳转</a>
サンプルコード
<!-- #app中的 v-bind -->
<a :href="url" :target="type" :alt="alt">{
{alt}}</a>
<!-- script vue实例中的data -->
data: {
url:'https://baidu.com',
type:'_blank',
alt:'百度'
}
5.v-on
5.1基本的な使用法
- 役割：バインディングイベントリスナー（イベントバインディング）
- シナリオ：特定のデータを取得するときに使用されます
- 例
<!-- 常规写法 -->
<button v-on:click="num++">点击</button>
<!-- 缩写 -->
<button @click="num++">点击</button>
<!-- 事件处理函数调用:直接写函数名 -->
<button @click="say">点击</button>
<!-- 事件处理函数调用:常规调用 -->
<button @click="alert('123')">点击</button>
イベント処理関数がカスタム関数の場合は、最初に定義する必要があります。定義方法は次のとおりです。
...
data: {
...
},
methods:{
functionName:function(arg1,arg2...){
//something to do
}
}
注：@ click = "alert（ '123'）"のように、イベントバインディングv-on属性式にビジネスロジックを直接記述しないでください。
イベント処理関数のパスパラメータ
<button @click="say('hi',$event)">点击</button>
- イベントオブジェクトの送受信における注意点
- イベントオブジェクトが関数名を直接使用し、括弧を書き込まない場合、イベントオブジェクトのいわゆる一意のパラメータがデフォルトで渡されます。
- 通常のカスタム関数呼び出しを使用する場合（括弧が記述されている限り）、イベントオブジェクトを使用する必要がある場合は、最後のパラメーターとして渡す必要があり、イベントオブジェクトの名前は「$ event」である必要があります。
5.2イベント修飾子
- 意味：イベントの処理に使用される特定の動作
例
<!-- 停止冒泡 -->
<button @click.stop="say">点击</button>
<!-- 阻止默认行为 -->
<button @click.prevent="say">点击</button>
<!-- 串联修饰符 -->
<button @click.stop.prevent="say">点击</button>
5.3キー修飾子
- 意味：キーボードイベントを聞くとき、詳細なキーストロークをチェックする必要があることがよくあります。Vueを使用すると、v-onはキーボードイベントをリッスンするときにキー修飾子を追加できます
例
<!-- 只有在 key 是 enter 回车键的时候调用 -->
<button v-on:keyup.enter="submit">点击</button>
<!-- 只有在 key 是 delete 键的时候调用 -->
<button v-on:keyup.delete="handle">点击</button>
6.ループ分岐命令
6.1サイクルの説明
- 機能：データのセットまたはオブジェクトのオプションのリストに従ってレンダリングします
- コマンド：v-for
- 例1配列走査の使用
<!-- 模板部分 -->
<ul>
<!-- 直接取值 -->
<li v-for='item in fruits'>{
{item}}</li>
<!-- 带索引 -->
<li v-for='（item ,index）in fruits'>{
{item}}{
{index}}</li>
</ul>
<!-- js部分 -->
data:{
fruits:['apple','pear','banana']
}
詳細：キーの役割、パフォーマンスの向上、表示効果には影響しません（IDがない場合は、代わりにインデックスの使用を検討できます）
- 例2オブジェクトトラバーサルの使用
<!-- 模板部分 -->
<ul>
<li v-for='（value,key,index）in obj'>{
{value +'-'+key+'-'+'index}}</li>
</ul>
<!-- js部分 -->
...
data:{
obj:{
username:'lucy',
age:20,
gender:'male'
}
}
...
6.2分岐命令
関数：式のブール値に従って要素をレンダリングするかどうかを決定します
- v-if
- v-else-if
- v-else
- v-showは、式のtrue値とfalse値に従って、要素の表示css属性を切り替えます。
例
<!-- 模板部分 -->
<div v-if="score >= 90"> 优秀 </div>
<div v-else-if="score >= 80 && score < 90"> 良好 </div>
<div v-else-if="score >= 70 && score < 80"> 一般 </div>
<div v-else> 不及格 </div>
<!-- v-show -->
<div v-show='flag'>测试v-show</div>
<!-- JavaScript部分 -->
......
data: { score: 88, flag:false }
......
思考：v-ifシリーズとv-showの違いは何ですか??
v-if：制御要素がレンダリングされる
かどうかv-show：制御要素が表示されるかどうか（レンダリング、表示：なし）