vue.js學習筆記

  1. 用微軟的visual studio code做爲編輯工具。下載地址:pc.qq.com/detail/16/d… 建立一個文本,保存到本地時選擇html5。

2.跟css、jq同樣,須要在html文本紅隊vue.js的類庫進行引入css

<script src="https://unpkg.com/vue/dist/vue.js"></script>
複製代碼
  1. 先學習一下打印hello world,還有if 和 for語句!這個有java後臺經驗的學起來會倍感親切,new Vue()比如建立一個對象,在裏邊定義field和value,經過id選擇器與嵌套在html中的vue標籤關聯。
<!DOCTYPE HTML>
<html lang="zh">
    <head>
        <title></title>
        <meta charset="utf-8">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <link href= "css/hello.css" rel="stylesheet">
        <meta>
    </head>
<body>

    <div id="showMsg">
        {{ message }}
    </div>

    <script>
        var msg = new Vue({
            el:'#showMsg',
            data: {
                message : "Hello world !!"
            }
        })
    </script>

    <div id="myGame">
        <h3>遊戲列表</h3>
        <div v-if="seen">2018最新熱賣</div>
        <ol>
            <li v-for="game in games">
                {{game.title}} / {{game.price}} 元
            </li>
        </ol>
    </div>

    <script>
        var myGame = new Vue( {
            el:'#myGame',
            data:{
                seen:true, //若是false,元素不會加載到dom
                games:[
                    {title:'超級馬里奧', price:'99'},
                    {title:'英雄聯盟', price:'238'},
                    {title:'大金剛', price:'345'}
                ]
            }

        })
    </script>
    
    <!-- 3動態綁定 -->
    <div id="myFavorite">
    	<p>輸入的是:{{ favoriteGame }}</p>
    	<input v-model="favoriteGame" >
    </div>
    <script>
    	var myFavorite = new Vue ({
    		el:'#myFavorite',
    		data:{
    			favoriteGame : '三國殺'
    		},
    	});
    </script>
    
    
    <!-- 4.點擊按鈕觸發事件 -->
    <div id="sport">
    	<p>你喜歡的運動是:{{ favoriteSport }}</p>
    	<button v-on:click="btnClick('basketball')">basketball</button>
    	<button v-on:click="btnClick('football')">football</button>
    	<button v-on:click="btnClick('tennis')">tennis</button>
    </div>
    <script>
    	var sport = new Vue({
    		el:'#sport',
    		data:{
    			favoriteSport:'basketball'
    		},
    		methods:{
    			btnClick:function(sp) {
    				this.favoriteSport = sp;
    			}
    		}
    	})
    </script>
    
    <!-- 組件 -->
    <div id="subject">
    	<ol>
	    	<param-subject v-for="item in subjects" v-bind:sjb="item"></param-subject>
    	</ol>
    </div>
    <script>
    	Vue.component('param-subject', {
    		props:['sjb'],
    		template:'<li>{{ sjb.name }}</li>'
    	});
    	
    	var subject = new Vue({
    		el:'#subject',
    		data:{
    			subjects:[
	    			{name:'math'},
	    			{name:'english'},
	    			{name:'science'}
	    		]
    		}
    	});
    </script>
    
    <!-- 過濾 -->
    <div id='learn'>
    	<p>{{ msg }}</p>
    	<p>{{ msg | toUpper }}</p>
    	<hr>
    	<p>當前進度爲{{ num }}({{ num | toPercentage }})</p>
    </div>
    <script>
    	var learn = new Vue({
    		el:'#learn',
    		data:{
    			msg:'how to learn vue?',
    			num: 0.3
    		},
    		filters: {
    			toUpper:function(value) {
    				return value.toUpperCase();
    			},
    			toPercentage:function(value) {
    				return value * 100 + "%";
    			}
    		}
    	})
    </script>
    
    <hr>
    <!-- 計算/觀察 -->
    <div id="cacu">
    	<p>iphone xs約合{{ dollar }} 美圓,含稅價爲{{ dollarTax }}美圓,摺合人民幣爲{{ rmb }} 元</p>
    	<button @click="btnClick(120)">加價120美圓</button>
    </div>
    
    <script>
    	var cacu = new Vue({
    		el:'#cacu',
    		data:{
    			dollar: 2000,
    		},
			computed : {
				dollarTax: function() {
					return this.dollar * 1.05;
				},
    			rmb: function () {
    				return Math.round(this.dollarTax * 6.2);
    			}
			}, 
			watch: {
				dollar: function (newVal, oldVal) {
					console.log(newVal, oldVal);
					this.dollarTax = newVal * 1.05;
					this.rmb = Math.round(newVal * 1.05 * 6.2);
				}
			},
			methods: {
				btnClick: function(newVal) {
					this.dollar += newVal;
				}
			}
			
    	})
    </script>
    
    <hr>
    
    <div id="changeColor">
    	<div v-bind:class="{active:isActive}">文本顏色展現</div>
    	<div :class="{active:isActive}">文本顏色展現</div>
    	<button @click="btnClick">改變顏色</button>
    </div>
    <script>
    	var changeColor = new Vue ({
    		el: '#changeColor',
    		data: {
    			isActive : true,
    		},
    		methods : {
    			btnClick: function () {
    				this.isActive = !this.isActive;
    			}
    		}
    	})
    </script>
    
    <hr>
    <!-- 綁定class對象 -->
    <div id="bindClass">
    	<div :class="myclass">這是class對象綁定</div>
    	<button @click="btnClick">改變class的樣式</button>
    </div>
   <script>
   		var bindClass = new Vue({
   			el:'#bindClass',
   			data: {
   				myclass: {
   					active:true,
   					big: true
   				}
   			},
			methods: {
				btnClick : function() {
					this.myclass.big = !this.myclass.big;
				}
			}   				
   		})
   </script> 
   
   <!-- 條件渲染 -->
   <div id="condition">
   		<div v-if="result <= 0">{{ result }}分紅績未公佈</div>
   		<div v-else-if="result < 60">{{ result }} 成績不及格</div>
   		<div v-else-if="result < 80">{{ result }} 良好</div>
   		<div v-else="result >= 90">{{ result }} 優秀</div>
   		<div v-show="present">遊戲機</div>
   		<button @click="btnClick">獲取成績</button>
   </div>
   <script>
   		var condition = new Vue ({
   			el:'#condition',
   			data: {
   				result : 0,
   				present:false
   			},
			methods : {
				btnClick : function() {
					this.result = Math.round(Math.random() * 100);
					if (this.result >= 80) {
						this.present = true;
					} else {
						this.present = false;
					}
				} 
			}   			
   		})
   </script>
   
   <div>
		<div id="myFood">
			<div v-for="(value,key) in foods">
				{{key}}:{{value}}
			</div>
		</div>   
   </div>
   <script>
   		var myFood = new Vue({
   			el:'#myFood',
   			data:{
   				foods:{
   					name:"apple",
   					price:"5yuan",
   					color:"red"
   				}
   			}
   		})
   </script>
   
   
   

</body>
</html>
複製代碼

瀏覽器運行html文件:html

相關文章
相關標籤/搜索