MV*模型及部分vue

時間 2019-11-11

標籤模型部分 vue 简体版

原文原文鏈接

vue是什麼？javascript

Vue.js（讀音 /vjuː/, 相似於 view）是一套構建用戶界面的 漸進式框架。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，而且很是容易學習，很是容易與其它庫或已有項目整合。另外一方面，Vue 徹底有能力驅動採用單文件組件和Vue生態系統支持的庫開發的複雜單頁應用。 css

爲何用VUE？html

1.性能更好vue

虛擬了dom的操做，操做dom是很是耗費性能的一件事情 jquery就是專門操做dom的
操做dom會致使重繪和重排
2.視圖、數據分離java

Vue.js 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。
jquery

3.兼容性較好npm

Vue.js 不支持 IE8 及其如下版本，由於 Vue.js 使用了 IE8 不能實現的 ECMAScript 5 特性。 Vue.js 支持全部兼容 ECMAScript 5 的瀏覽器。數組

4.其便捷性及易用程度都很好瀏覽器

vue是一個漸進式的框架，vue當成一個插件，庫，框架完整的應用來使用都是OK的緩存

MVVM是什麼?

MVVM是Model-View-ViewModel的簡寫, 一種新型架構框架。

View通常就是咱們日常說的HTML文本的Js模板，裏面能夠嵌入一些js模板的代碼；
ViewModule層裏面就是咱們對於這個視圖區域的一切js可視業務邏輯，舉個例子，好比圖片走馬燈特效，好比表單按鈕點擊提交，這些自定義事件的註冊和處理邏輯都寫在ViewModule裏面；Model就是對於純數據的處理，好比增刪改查，與後臺CGI作交互；

MVVM是將「數據模型數據雙向綁定」的思想做爲核心，所以在View和Model之間沒有聯繫，經過ViewModel進行交互，並且Model和ViewModel之間的交互是雙向的，所以視圖的數據的變化會同時修改數據源，而數據源數據的變化也會當即反應到View上。

VUE基本用法

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">  
        <!-- 插值表達式用 {{}} -->
        <!-- 使用數據的時候，須要先放在data中，數據要先存入，才能實現數據綁定 -->
        {{ name }}
        <!-- 原始數據的值能夠直接發生改變 -->

        <!-- 數組 -->
        <!-- 經過索引的方式改變數組，不能渲染到視圖 -->
        <!-- 經過length屬性修改也是不能渲染到視圖 -->
        <!-- 能夠經過數組的push,pop,shift,unshift,sort,reverse,splice這些操做數組能夠渲染 -->
        {{arr}}
    

        <!-- 對象 -->
        {{obj}}
        <!-- 能夠經過對象打點的形式修改，能夠渲染視圖 -->
        <!-- 對象打點的形式增長屬性，不能渲染視圖 -->
        <!-- 對象從新賦值（更改地址）之後能夠渲染視圖，可使用ES6中的...運算符 -->
        <!-- vm.$set(vm.obj,'abc',2000)  增長屬性,渲染視圖 -->

        <!-- vm.$el()  指代被渲染的dom元素 -->
        <!-- vm.$nextTick(function(){})  最後一次渲染完成之後執行的函數 -->
        <!-- vm.$mount()   能夠取代vue實例中的el屬性，渲染的dom元素 -->
    </div>
    <script>
        const vm = new Vue({
            // el : "#app",
            data : {
                name : "psh",
                arr : [1,2,3],
                obj : {
                    a : 10,
                    b : 20
                }

            }
        })
        vm.$mount("#app");
        console.log(vm.$el.innerText);
        vm.name = "yinlaoshi";
        console.log(vm.$el.innerText);
        vm.name = "wanglaoshi"
        vm.$nextTick(() => {
            console.log(vm.$el.innerText);
        })
    </script>
</body>
</html>

vue-指令

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>指令</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<style>
		[v-cloak] {
			display: none;
		}
	</style>
</head>
<body>
	<div id="app">
		<!-- 1.v-pre 跳過該元素和它的子元素的渲染過程，直接顯示內容 -->
		<div v-pre>
			{{ name }}
			<div>{{ name }}</div>
		</div>

		<!-- 2. v-cloak 能夠配合着css的使用，讓第一次加載的時候不顯示(隱藏未編譯的{{}}標籤)  -->
		<div>{{ name }}</div>

		<!-- 3. v-once 只會去進行一次渲染，隨後的從新渲染，當數據改變時，這裏的數據不會改變,元素/組件及全部的子節點所有都會認爲是靜態的，忽略並跳過，進行了vue的內部的緩存，全部的值全都是從緩存中拿過來  -->
		<div v-once>{{name}}</div>

		<!-- 4. v-html     innerHTML     用到的比較少，XSS攻擊   和插值表達式的區別，v-html是把標籤裏面的內容所有替換 -->
		<div v-html="dom">今每天氣很好</div>
		<div>{{ dom }}今每天氣很好</div>

		<!-- 5. v-text     至關於innerText -->

		<!-- 6. v-if 判斷元素是否存在 -->
		<!-- 7. v-else  -->
		<!-- 8. v-else-if -->
		<!-- <div v-if="flag">hello</div> -->
		<!-- template是能夠減小渲染次數的 -->
		<template v-if="!flag">     
			<p>hello</p>
			<span>world</span>
		</template>
		<!-- <div>---</div> -->
		<template v-else>     
			<p>hello1</p>
			<span>world2</span>
		</template>

		<!-- 9.v-show -->
		<div v-show="!flag">hello world</div>
		<template v-show="!flag">
			<div>hello world</div>
		</template>

               <button @click="flag=!flag">點擊我</button>
		<!-- 
		v-if和v-show的區別 
		1.v-if是直接移出dom節點，v-show是經過控制display屬性
		2.v-if支持template標籤
		  v-show不支持template標籤		
		-->
	</div>
	<script>
		const vm = new Vue({
			el : "#app",
			data : {
				name : "wxy",
				age : 18,
				dom : "<h1>hello world</h1>",
				flag : true
			}
		})

		setInterval( () => {
			vm.flag = !vm.flag;
		},500)
	</script>
</body>
</html>

vue-指令補充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <script src="public/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="example">
        <!-- 循環 -->
        <ul>
            <li v-for="tmp in list">
                {{tmp}}
            </li>
        </ul>
        <ul>
            <li v-for="(value,key) in list">
                {{"key is " + key + " value is " + value}}
            </li>
        </ul>

        <!-- 選擇/判斷 -->
        <button v-if="hasMore">加載更多</button>     <!-- 爲true的時候顯示，爲false的時候隱藏 -->
        <p v-if="!hasMore">對不起，沒有更多數據能夠加載了</p>


        <!-- 判斷分支結構 -->
        <p v-if = "answer == 0">答案是0</p>
        <p v-else-if = "answer == 1">答案是1</p>
        <p v-else-if = "answer == 2">答案是2</p>


        <!-- v-text v-html v-show -->
        <p v-text = "myHtml">this is a container</p>
        <p v-html = "myHtml">this is a container</p>
        <p v-show = "hasMore">this is a container</p>


        <!-- 將urlName的內容綁定到a的href中 -->
        <a v-bind:href = "urlName">走，去百度</a>      <!-- 類似的還有img中的src -->
        <a :href = "urlName">走，去百度</a>

        <!-- 按鈕綁定處理函數 -->
        <button v-on:click = "clickMe">點我試試</button>
        <button @click = "clickMe()">再點我試試</button>


        <input type="text" @input = 'inpchange'>
    </div>
    <script>
        new Vue({
            el : '#example',
            data : {
                list : [100,200,300],
                hasMore : false,
                answer : 2,
                myHtml : '<h1>這是一個被替換的文本</h1>',
                urlName : 'http://www.baidu.com'
            },
            methods : {
                clickMe : function(){
                    console.log('叫你點你就點呀');
                },
                inpchange : function(){
                    console.log(event);
                    console.log(event.target.value);
                }
            }
        })

    </script>
</body>
</html>

相關標籤/搜索

每日一句

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