VUE基礎学習ノート——01テンプレート文法

59921 ワード
vue.js javascript html css
VUE基本使用
1.従来の開発モデルの比較
原生JS
<div id="msg"><div>
<script type="text/javascript">
	var msg='hello world';
	var div=document.getElementById('msg');
	div.innerHTML=msg;
script>

jQuery 
<div id="msg">div>
<script type="text/javascrtpt" src="js/jquery.js">script>
<script>
	var msg='hello world';
	$('#msg').html(msg);
script>

2.vueの基本使用手順
1.データを埋め込むためのラベルを提供する必要がある2、vueを導入する.jsライブラリファイル3、vueの構文を使用する機能4、vueが提供するデータをラベルに埋め込む
<body>
	
	<div id="app">
		<div>{
    {msg}}div>
		/*
			       ：
			      HTML   ；
			         。
		*/
	div>

	<script type="text/javascript" src="js/vue.js">script>
	<script type="text/javascript">
		var vm=new Vue({
      
			el:'#app',				//el:       （    CSS     DOM  ）
			data:{
      					//data：    （      ）
				msg:'hello vue'
		})
	script>
body>

インストラクション
命令の本質はカスタム属性です
共通命令:
  • v-clock

    • このコマンドは、関連インスタンスがコンパイルを終了するまで要素に保持されます.
    補間式にはフラッシュの問題があり、v-clockコマンドを使用して解決します.
    使用法:1、提供スタイル[v-clock]{display:none;}2、補間式があるラベルにv-clock指令を追加する
    原理:まずスタイルで内容を非表示にし、メモリに値の置き換えを行い、置き換えてから最終的な結果を表示します.
    <style type="text/css">
	[v-clock]{
      
		display:none;
	}
style>
<body>
	<div id="app">
		<div v-clock>{
    {msg}}div>
	div>

	<script type="text/javescript" src="js/vue.js">script>
	<script type="text/javascript">
		var vm=new Vue({
      
			el:"#app"
			data:{
      
				msg:'hello vue'
			}
		});
	script>
body>
  • v-text

    • 要素のtextContentを更新します.
    純粋なテキストを入力すると、補間式よりも簡潔になります.
    次の2行のコードの効果は同じです.
    <span v-text="msg">span>
<span>{
    {msg}}span>
  • v-html

    • 要素のinnerHTMLを更新します.コンテンツは通常のHTMLで挿入-Vueテンプレートとしてコンパイルされません.Webサイト上で任意のHTMLを動的にレンダリングするのは危険です.XSS攻撃を招きやすいからです.信頼できるコンテンツにのみv-htmlを使用し、ユーザーがコミットしたコンテンツには使用されません.
    <body>
	<div id="app">
		<div v-html='msg'>div>
	div>
	<script type="text/javascript" src="js/vue.js">script>
	<script type="text/javascript">
		var vm=new Vue({
      
			el:'#app',
			data:{
      
				msg:'HTML'
			}
		})
	script>
body>
  • v-once

    • 要素とコンポーネントを一度だけレンダリングします.その後の再レンダリングでは、要素/コンポーネントとそのすべてのサブノードが静的コンテンツとして扱われ、スキップされます.これにより、更新パフォーマンスを最適化できます.
    データ応答式:データの変化によるページ内容の変化
    v-onceは1回のみコンパイルされ、コンテンツが表示された後は応答機能がなくなります
    適用シーン:表示された情報を変更する必要がない場合は、v-onceコマンドを使用してパフォーマンスを向上させます.
  • v-model

    • 1、v-modelコマンドでフォームinput、textarea、select要素に双方向データバインドを作成できます.コントロールタイプに応じて自動的に正しい方法を選択して要素を更新します.2、v-modelは、すべてのフォーム要素のvalue、checked、selected attributeの初期値を無視し、常にVueインスタンスのデータをデータソースとします.JavaScriptでコンポーネントのdataオプションに初期値を宣言する必要があります.
  • v-on

    • イベントリスナーをバインドします.イベントタイプはパラメータによって指定されます.式は、メソッドの名前またはインライン文であってもよく、修飾子がなければ省略してもよい.通常の要素で使用する場合、元のDOMイベントのみを監視できます.カスタム要素コンポーネントで使用する場合は、サブコンポーネントがトリガーするカスタムイベントをリスニングすることもできます.
    <button v-on:click="doThis">button>
<button @click="doThis">button>	//

    イベント関数パラメータの転送
    <button v-on:click="doThis('hi',$event)">Say hibutton>	//hi     ，$event     ，

    1、イベントが直接関数名をバインドする場合、デフォルトのイベント関数の最初のパラメータはイベントオブジェクトを渡します2、イベントバインド関数が呼び出される場合、イベントオブジェクトは最後のパラメータとして渡され、パラメータ名は$eventでなければなりません
    イベント修飾子
    .stop     
<a v-on:click.stop="doThis">a>

.prevent       
<a v-on:click.prevent="doThis">  a>	//  a

    修飾子を使用する場合は、順序が重要です.対応するコードは同じ順序で生成されます.
    キー修飾子
    .enter    
<input v-on:keyup.enter="submit">

.delete    
<input v-on:keyup.delete="dothis">

//        
//  config.keyCodes  
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
	Vue.config.keyCodes.abc=65	//abc           ，65     event.keyCode 
<script>
  • v-bind

    • 属性バインド
    <img v-bind:src="imageSrc">
<img :src="imageSrc">	//

    スタイルのバインド
    1、classスタイル処理
    デフォルトのclassは保持されます
    //    
<div id="app">
	<div v-bind:class="{ active:isActive }">div>
	<button v-on:click="handle">  button>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
	var vm=new Vue({
      
		el:'#app',
		data:{
      
			isActive:true
		},
		methods:{
      
			handle:function(){
      
				//  isActive  true false      
				this.isActive=!this.isActive;
			}
		}
	})
script>



//    
<div id="app">
	<div v-bind:class="[activeClass,errorClass]">div>
	<button v-on:click="handle">  button>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
	var vm=new Vue({
      
		el:'#app',
		data:{
      
			activeClass:'active',
			errorClass:'error'
		},
		methods:{
      
			handle:function(){
      
				//  isActive  true false      
				this.activeClass='';
				this.errorClass='';
			}
		}
	})
script>


//    
<div id="app">
	<div v-bind:class="[activeClass,errorClass，{test:isTest}]">div>
	<div v-bind:class='arrClasses'>div>
	<div v-bind:class='objClasses'>div>
	<button v-on:click="handle">  button>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
	var vm=new Vue({
      
		el:'#app',
		data:{
      
			activeClass:'active',
			errorClass:'error',
			isTest:true,
			arrClasses:['active','error'],
			objClasses:{
      
				active：true，
				error:true
			}
		},
		methods:{
      
			handle:function(){
      
				//  isActive  true false      
				this.activeClass='';
				this.errorClass='';
				this.isTest=false;
			}
		}
	})
script>

    2、スタイルスタイル処理
    <div id="app">
	<div v-bind:style="{
        border:borderStyle,width:widthStyle}">div>	//    
	<div v-bind:style="objStyles">div>
	<div v-bind:style='[objStyle,overrideStyles]'>div>				//    
	<botton v-on:click='handle'>  button>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
	var vm=new Vue({
      
		el:'#app',
		data:{
      
			borderStyle:'1px solid blue',
			withStyle:'100px',
			heightStyle:'200px',
			objStyles:{
      
				border:'1px solid green',
				width:'200px',
				height:'100px'
			},
			overrideStyle:{
      
				border:'5px solid orange'
			}
		},
		methods:{
      
			handle:function(){
      
				this.heightStyle='100px';
				this.objStyles.width='100px';
			}
		}
	});
script>
  • v-show

    • 式の真偽値に基づいて、要素のdisplay CSS propertyを切り替えます.
    (ページにレンダリング済み)
    <div id="app">
	<div v-show='flag'>  v-showdiv>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
	var vm=new Vue({
      
		el:'#app',
		data:{
      
			score:10,
			flag:false
		},
		methods:{
      
			handle:function(){
      
				this.flag=!this.flag;
			}
		}
	})
script>
  • v-for

    • 1、v-for遍歴配列
    <li v-for='item in list'>{
    {item}}li>
<li v-for='(item,index) in list'>{
    {item}}+'-----'+{
    {index}}li>

    keyの役割:Vueが異なる要素を区別し、パフォーマンスを向上させるのを助ける
    <li :key='item.id' v-for='(item,index) in list'>{
    {item}}+'---'+{
    {index}}li>

    <div id="app">
	<div>    div>
	<ul>
		<li :key='item.id' v-for='item in myFruits'>
			<span>{
    {item.ename}}span>
			<span>{
    {item.cname}}span>
		li>
	ul>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
	var vm=new Vue({
      
		el:'#app',
		data:{
      
			myFryits:[{
      
				ename:'apple',
				cname:'  '
			}，{
      
				ename:'orange',
				cname:'  '
			}，{
      
				ename:'banana',
				cname:'  '
			}]
		}
	})
script>

    2、v-forオブジェクトの遍歴
    <div v-for='(value,key,index) in object'>div>
    HDU-5110(プッシュ)
    C++言語ベースルーチン標準入力フロー