vue.js 基礎知識看點

時間 2019-11-11

標籤 vue.js vue 基礎知識欄目 JavaScript 简体版

原文原文鏈接

特色

易用html

已經會了HTML,CSS,JavaScript?即刻閱讀指南開始構建應用。vue

靈活jquery

簡單小巧的核心，漸進式技術棧，足以應付任何規模的應用。ajax

性能json

20kb min+gzip 運行大小、超快虛擬 DOM 、最省心的優化。瀏覽器

數據簡單的綁定以及條件判斷和循環

這裏最基礎的一些數據綁定也是 MVVM的一些基礎內容大部分來自官網教程app

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<title></title>
	</head>
	<body>

	<div id="app">

		<br />
		<!--使用模板語法綁定 -->
		{{ message1 }}
		
		<br />

		<!-- 雙向綁定 -->
		<input v-model="message1"> 修改這個值 查看雙向綁定
		<br />

		<!--元素屬性方式綁定 v-bind -->
		<span v-bind:title="message2">
			鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
		</span>
		<br />

		<!--條件 v-if -->
		<p v-if="show">你看到我了</p>
		<br />

		<!--循環 v-for -->
		<li v-for="todo in todos">
		{{ todo.text }}
		</li>


	</div>

	<br />
	<a href="index.html">返回</a>

	<script>
		var app = new Vue({
			el: '#app',
			data: {
				message1: 'Hello Vue!',
				message2: '頁面加載於 ' + new Date().toLocaleString(),
				show:true,
				todos: [
					{ text: '學習 TypeScript' },
					{ text: '學習 Avalon' },
					{ text: '學習 Vue' }
				]
			}
		})
	</script>
	</body>
</html>

咱們已經生成了第一個 Vue 應用程序！這看起來和渲染一個字符串模板很是相似，可是 Vue 在背後作了大量工做。如今數據和 DOM 已經被關聯在一塊兒，全部的數據和 DOM 都是響應式的。咱們如何對這一切清晰領會？只需打開你的瀏覽器的 JavaScript 控制檯（如今，就在當前頁面打開），而後設置 app.message1 的值，你將看到上面的示例所渲染的 DOM 元素會相應地更新。性能

響應用戶來自的事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<title></title>
	</head>
	<body>

	<div id="app">
        <p>{{ icount }}</p>
		<button v-on:click="showCount">顯示數量</button>
		<br />
		<button v-on:click="showTag('click element ==> ', $event)">傳遞參數</button>
		<br />
		<input v-on:keyup="showKey"> 輸入一些東西試試
		<!--
		<input v-on:keyup.Enter="showKey"> 只接受回車鍵
		//-->
	</div>

	<br />

	<br />
	<a href="index.html">返回</a>

	<script>
		var app = new Vue({
			el: '#app',
			data: {
				icount: 0,
			},
            methods: {
                showCount: function () {
                    this.icount++;
				},
				showTag: function(message,event){
					var name = event.target.tagName;
					alert(message+name);
				},
				showKey:function(event){
					alert(event.key);
				}
            }
		})
	</script>
	</body>
</html>

選擇框常常用到的例子

這裏簡單的使用jquery獲取json數據展現在選擇框上, 以及修改選擇內容時的數據變化控制學習

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="js/jquery.js"></script>
		<title></title>
	</head>
	<body>

	<div id="app">
        <select v-model="selected">
            <option v-for="option in options" v-bind:value="option">
                {{ option.name }}
            </option>
        </select>
        <span>Selected: {{ selected.name }}</span>
	</div>

	<br />

	<br />
	<a href="index.html">返回</a>

	<script>

		var app = new Vue({
			el: '#app',
			data: {
                selected: {},
                options:[]
            },
            watch:{
                'selected.value':function(newVal, oldVal){
                        alert("new Value is "+ newVal +"; old Value is"+oldVal);
                },
                selected:function(newVal, oldVal){
                    console.info("new Text is "+ newVal.name +"; old Text is"+oldVal.name);
                }
            }
            
        });
        app.$watch("selected.text",function(newVal,oldVal){
            console.log("寫在外部的==>"+newVal);
        });

        $.ajax({
            url:'data/list.json',
            type:'get',
            //data:{},
            dataType:'json',
            success:function(data,state,response){
                if(response.status==200){
                    if(data.Code==200){
                        app.options=data.Response;
                    }else{
                        alert('request err');
                    }
                }else{
                    alert('server err');
                }
            }
        });
	</script>
	</body>
</html>

生命週期

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<title></title>
	</head>
	<body>
        <div id="app">
            {{message}}
        </div>
        <script>
        var app = new Vue({
            el:"#app",
            data:{message:"hello"},
            beforeCreate:function(){
                console.log('================= beforeCreate');
            },
            created: function () {
                console.log('================= created');
            },
            beforeMount: function () {
                console.log('================= beforeMount');
            },
            mounted: function () {
                console.log('================= mounted');
                this.message = "修改message的值,執行update相關方法";
            },
            beforeUpdate: function () {
                console.log('================= beforeUpdate');
            },
            updated: function () {
                console.log('================= updated');
            },
            beforeDestory: function () {
                console.log('================= beforeDestory');
            },
            destoryed: function () {
                console.log('================= destoryed');
            }
        });
        </script>
	</body>
</html>

vue.js 組件的簡單使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<title></title>
	</head>
	<body>

		<div id="example">
			<my-header></my-header>
			<my-body v-bind:message="message"></my-body>
			<my-footer></my-footer>
		</div>

		<a href="index.html">Back</a>

		<script>
		Vue.component('my-header', {
			template: '<div>the head</div>'
		})
		Vue.component('my-body', {
			// 聲明 props
			props: ['message'],
			// 就像 data 同樣，prop 能夠在組件模板內部使用，
			// 而且，還能夠在 vm 實例中經過 this.message 訪問
			template: '<div>{{ message }}</div>'
		  })
		Vue.component('my-footer', {
			template: '<div>the footer!</div>'
		})

		

		// 建立一個根實例
		new Vue({
			el: '#example',
			data:{
				message:"It is body"
			}
		})
		</script>
	</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。