vue進階

来源:https://www.cnblogs.com/LoveForeverIT/p/18064112
-Advertisement-
Play Games

Vue進階 一、vue實例 1.一個基本的vue的實例 <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <h1> {{title}} </h1> <button id="btn" @click=" ...


Vue進階

一、vue實例

1.一個基本的vue的實例

   <head>
   	<meta charset="UTF-8">
   	<title></title>
   </head>
   <body>
   	<div id="app">
   	<h1>
   		{{title}}
   	</h1>
   	<button id="btn" @click="btnclick">show</button>
   	<p v-if="showFlag">顯示段落</p>
   	{{lowercasetitle}}
   	</div>
   </body>
   <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
   <script>
   	var v1 = new Vue(
   		{
   			el:"#app",
   			data:{
   				title:"This is Title",
   				showFlag:false
   			},
   			methods:{
   				btnclick:function(){
   					this.showFlag=true;
   					this.updateTitle("this is new title");
   				},
   				updateTitle:function(d){
   					this.title = d;
   					
   				}
   			},
   			computed:{
   				lowercasetitle:function(){
   					return this.title.toLowerCase();
   				}
   			},
   			watch:{
   				title:function(newVal,oldVal){
   					console.log(newVal)
   				}
   			}
   		}
   	);
   </script>

2.新的實例

new Vue({
	el:"#app2"
})

3.一個實例改變另一個實例中的內容,通過給實例命名

在一個實例中,通過調用另一個實例的屬性,來操作其屬性

var v1 =  new Vue();
var v2 = new Vue({
   	el:"#app2",
   	data:{},
   	methods:{
   		changeTitle:function(){
   			v1.title = "changed title";
   		}
   	}	
});

4.在vue外面操作vue實例——操作屬性

setTimeout(function(){
   	v1.title="st title";
},2000);

5.調用vue實例中的方法——操作方法

setTimeout(function(){
   		v1.btnclick();
},2000);

6.為vue實例設置屬性

  • vue中的實例屬性

    v1.$data  
    v1.$el
    
  • 設置實例屬性

        var data = {
			arg1:"arg1 value"
		};
		var v2 = new Vue({
			el:"#app2",
			data:data,
  • 實例屬性還能這麼調用: v1.$data.title 相當於 v1.title

7.實例屬性ref的用法:相當於是id

<div id="app">
	<button ref="mybtn1" id="btn" @click="btnclick">show</button>
    <button ref="mybtn2" id="btn" @click="btnclick">show</button>
</div>
		
		methods:{
				btnclick:function(){
					this.$refs.mybtn1.innerText = "tttttbbbbnnnn";
				}
			}

8.動態綁定vue實例到頁面中

mount 載入的意思

<div id="app3"></div>
<script>
	var v3 = new Vue({
    	
		template:"<h1>hello</h1>"
	});
	v3.$mount("#app3"); 
</script>

二、Vue組件

萬事萬物皆對象

萬物皆組件

1.vue組件

Vue.componet 實現全局註冊

		<div id="app1">
			<hello></hello>
		</div>
		Vue.component("hello",{
			template:"<h1>hello</h1>"
		})
		new Vue({
			el:"#app1"
		})
    

註意: div得是vue的實例,組件創建好後,只要被vue註冊過的div裡面,都能使用該組件

2.vue的生命周期函數

在控制台查看各函數的調用順序,並調用destroy,再點改變title按鈕,發現改變不了,因為已被銷毀

<html>
	<head>
		<meta charset="UTF-8">
		<title>生命周期</title>
	</head>
	<body>
		<div id="app1">
			{{title}}
			<button type="button" @click="changeTitle">change title</button>
			<button type="button" @click="destroy">destroy</button>
		</div>
	</body>
	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
	<script>
		new Vue({
			el:"#app1",
			data:{
				title:"this is title"
			},
			methods:{
				changeTitle:function(){
					this.title= "new title";
				},
				destroy:function(){
					this.$destroy();
				}
			},
			beforeCreate(){
				console.log("beforeCreate")
			},
			created(){
				console.log("created")
			},
			beforeMount(){
				console.log("beforeMount")
			},
			mounted(){
				console.log("mounted")
			},
			beforeUpdate(){
				console.log("beforeUpdate")
			},
			updated(){
				console.log("updated")
			},
			beforeDestroy(){
				console.log("beforeDestory")
			},
			destroyed(){
				console.log("destory")
			}
		})
	</script>
</html>

3.一個頁面中只有一個div,其他的都是vue組件

vue組件里的data必須使用function的形式對{}對象進行封裝,防止對其他數據的修改。
註意,template里必須有一個根節點。

	<head>
		<meta charset="UTF-8">
		<title>component</title>
	</head>
	<body>
		<div id="app1">
			<my-cap></my-cap>
		</div>
        <div id="app2">
            
        </div>
	</body>
	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
	<script>
        new Vue({
            el:"#app2",
            template:"<div>aaa</div>"
        });
        
		Vue.component("my-cap",{
			data(){
				return {
					status:"hellllllllo"
				}
			},
			template:'<p>{{status}}<button @click="changebtn">btn</button></p>',
			methods:{
				changebtn:function(){
					this.status = "enennnnnnn"
				}
			}
			
		});
		new Vue({
			el:"#app1"
		})
	</script>

改進版:提高了代碼的重用性——萬物皆組件

    var cmp = {
			data(){
				return {
					status:"hellllllllo"
				}
			},
			template:'<p>{{status}}<button @click="changebtn">btn</button></p>',
			methods:{
				changebtn:function(){
					this.status = "enennnnnnn"
				}
			}
		}
		new Vue({
			el:"#app1",
			components:{
				"my-cap":cmp
			}
		})
		new Vue({
		    el:"#app2",
		    components:{
		        "cap":cmp
		    }
		    
		})

三、vue開發模式

1.vue-cli骨架

	CLI(command line interfaces )命令行介面。在進行Vue項目開發時,可以選擇不同的Vue模板進行項目的搭建,比如simple、webpack-simple、webpack、browserify/browserify-simple等;vue-cli是官方提供的一個腳手架(預先定義好的目錄結構及基礎代碼,咱們在創建 Maven 項目時可以選擇創建一個骨架項目,這個骨架項目就是腳手架),用於快速生成一個 vue 的項目模板。

2.詳細步驟

  • 下載安裝node.js
    https://nodejs.org/en/download/

  • 在node.js的cmd組件(command prompt)中安裝vue-cli

    npm install vue-cli -g
    
  • 創建vue項目文件夾並打開

    mkdir d:/vuedemo
    
    cd d:/vuedemo
    
  • 使用vue list命令查看當前可用的vue骨架

  • 使用vue命令創建基於vue-webpack-simple骨架的項目,vue-cli-demo是項目名,過程中需要輸入一些參數,回車是使用提示的值

    vue init webpack-simple vue-cli-demo
    
  • 創建基於webpack骨架的項目

    vue init webpack vue-cli-demo
    
  • 查閱readme.md文檔

    npm install  #安裝依賴環境
    
    npm run dev	 #進入開發模式
    
    npm run build #發佈項目
    

3.webpack-simple模板初體驗

  • 1)進入到項目文件中,安裝依賴環境

    npm install
    
  • 2)進入開發模式

    npm run dev
    

    如果提示缺少依賴東西,嘗試重新 npm install,如果缺少node-sass,執行以下內容:

    npm install node-sass
    

    如果npm命令無法使用,可以使用淘寶鏡像http://npm.taobao.org/

    操作步驟如下:

    # 1. 安裝cnpm
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    # 2. 使用cnpm代替npm
    cnpm install
    cnpm run dev
    cnpm run build
    

  • 開始組件開發
    修改主組件App.vue

<template>
  <div>
  	{{title}}
  </div>
</template>

<script>
export default {
  data(){
  	return {
  		title:"helloooooooo!"
  	}
  }
}
</script>

四、編寫app.vue

1.註意template必須有一個根節點

這樣會報錯

<template>
  <div>
  	{{title}}
  </div>
  <span>
  </span>
</template>

2.在App.vue組件中使用另一個vue組件

  • 新建Home.vue
<template>
	<div>
	label: {{label}}
	<button @click="changeLable">btttttttn</button>
	</div>
</template>
<script>
export default {
	data(){
		return {
			label:"i am a label"
		}
	},
	methods:{
		changeLable(){
			this.label = "yes a label!"
		}
	}
}
</script>
<style>
</style>
  • 修改main.js

定義Home.vue為組件,並設置其標簽名字

import Vue from 'vue'
import App from './App.vue'
import Home from './Home.vue'

Vue.component("app-server-home",Home)

new Vue({
  el: '#app',
  render: h => h(App)
})
  • 修改App.vue

直接使用在main.js中定義的組件的標簽名

<template>
  <app-server-home></app-server-home>
</template>

3.組件中嵌套組件

app內使用home,home內使用subcontent。併在home中本地註冊subcontent組件。

<template>
	<div>
		<app-server-subcontent v-for="(sc,i) in 5":key="i">
		</app-server-subcontent>
	</div>
</template>
<script>
//本地註冊
import SubContent from "./SubContent.vue"
export default {
	components:{
		"app-server-subcontent":SubContent
	}
}
</script>

五、在項目中使用bootstrap

1.在index.html中引入bootstrap.css

<head>
    <meta charset="utf-8">
    <title>vuedemo2</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
  </head>

2.編寫組件,組件中使用bootstrap

編寫header、footer、content組件

  • header組件
<template>
	<div class="col-xs-12">
		<header>
			This is Header!!!
		</header>
	</div>
</template>
  • footer組件
<template>
	<div class="col-xs-12">
		<footer>
		All Right Copy
		</footer>
	</div>
</template>
  • content組件
<template>
	<div class="col-xs-12 col-sm-6">
		<ul class="list-group">
			<li class="list-group-item" v-for="(s,i) in 5" :key="i">
				{{s}}
			</li>
		</ul>
	</div>
</template>

3.在app.vue中本地註冊這些組件並使用

<template>
  <div id="app">
    <app-header></app-header>
    <app-content></app-content>
    <app-footer></app-footer>
  </div>
</template>

<script>
	//內部註冊
import Footer from  "Footer.vue"
import Header from "Header.vue"
import Content from "Content.vue"
export default {
	components:{
		"app-footer":Footer,
		"app-header":Header,
		"app-content":Content
	}
}
</script>

六、組件的全局註冊

在main.js中註冊組件,該組件能夠在項目中的每個Vue中被使用

import Home from './Home.vue';
Vue.component("appHome",Home);

七、在組件中使用樣式

在組件中定義樣式,組件里的樣式會影響所有組件,如何設定,讓樣式只作用於當前組件?

content組件中的style將會影響整個頁面的元素,因此在組件的style標簽裡加入scoped關鍵字,讓該樣式只作用於當前組件。

<template>
	<div class="col-xs-12 col-sm-6">
		<ul class="list-group">
			<li class="list-group-item" v-for="(s,i) in 5" :key="i">
				{{s}}
			</li>
		</ul>
	</div>
</template>

<script>
</script>

<style scoped>
	div{
		border: 1px solid red;
	}
</style>

八、各組件中的參數傳遞

1.父傳子

通過父vue的標簽屬性傳遞參數:

  • App.vue
<template>
  <div id="app">
    <sub-app :myName="name"></sub-app>
  </div>
</template>

<script>
	//內部註冊
import Sub1 from "@/subapp/sub1.vue"
export default {
	data(){
		return {
			name:"xiaoyu"
		}
	},
	components:{
		subApp:Sub1
	}
}
</script>
  • sub1.vue
<template>
	<div>
		<h1>{{myName}}</h1>
	</div>
</template>

<script>
	export default{
		props:['myName']
	}
</script>

props後存放數組,表示可以拿多個參數。也可以改寫成一個對象:

<template>
	<div>
		<h1>{{myName}}</h1>
	</div>
</template>

<script>
	export default{
		//props:['myName']
		props:{
			myName:{
				type:String,
				required:true,
				default:'xx'
			}
		}
	}
</script>

2.子組件調用父組件中的函數並傳遞參數

  • App.vue
<template>
  <div id="app">
    <sub-app :myName="name" :ffn="changeName"></sub-app>
  </div>
</template>

<script>
	//內部註冊
import Sub1 from "@/subapp/sub1.vue"
export default {
	data(){
		return {
			name:"xiaoyu"
		}
	},
	methods:{
		changeName:function(name){
			this.name = name
		}
	},
	components:{
		subApp:Sub1
	}
}
</script>
  • sub1.vue
<template>
	<div>
		<h1>{{myName}}</h1>
		<button type="button" @click="doClick" >點我</button>
	</div>
</template>

<script>
	export default{
		props:{
			myName:{
				type:String,
				required:true,
				default:'xx'
			},
			ffn:{
				type:Function
			}
		},
		methods:{
			doClick:function(){
				this.ffn("xiaohe");
			}
		}
	}
</script>

3.改進版的參數傳遞(常用)

從下往上的事件發射

  • sub1.vue
doClick:function(){
		//this.ffn("xiaohe");
		this.$emit('newName','xiaoliu');
}
  • App.vue
 <sub-app :myName="name" @newName="name=$event"></sub-app>

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 一、介紹 Decorator,即裝飾器,從名字上很容易讓我們聯想到裝飾者模式 簡單來講,裝飾者模式就是一種在不改變原類和使用繼承的情況下,動態地擴展對象功能的設計理論。 ES6中Decorator功能亦如此,其本質也不是什麼高大上的結構, ...
  • 本文討論了前端架構的重要性,並提出了選擇Vue組件庫時需考慮的因素。重點介紹了ViewDesign這一優秀的Vue組件庫,概述了其特點及如何實現高效前端架構。完整版文章鏈接可在本文結尾處獲取。 ...
  • 在 2023 年的年底,我用 Vite-SSG + Vue3 + Vuetify3 把之前使用 SPA 編寫的官網進行了重構,支持多語言,響應式並且對 SEO 和社交媒體分享十分友好 ...
  • Vue.js 是一個漸進式 JavaScript 框架,適用於構建用戶界面,特別適合開發企業級 Web 應用程式。它具有漸進式設計、虛擬 DOM、響應式數據綁定和組件化等優勢。ViewDesign(原名 iView)是一個基於 Vue.js 的企業級 UI 組件庫,提供全面的組件庫、企業級設計規範、... ...
  • 本文探討了前端發展的新趨勢,以及 Vue.js 生態中 ViewDesign 這一優秀 UI 組件庫的崛起。首先闡述了現代 Web 應用對前端開發提出的新需求,以及 Vue.js 作為漸進式框架在滿足這些需求方面的優勢。接著重點介紹了 ViewDesign 作為基於 Vue.js 的 UI 組件庫的... ...
  • 開源項目地址:https://gitee.com/easyxaf/jsplumb-navigator 前言 jsPlumb可用於連接DOM元素,它不依賴框架,所以與主流框架都可以無縫的集成。但比較遺憾的是社區版中沒有平移、縮放等功能,如果用它來開發工作流等項目,用戶體驗會大打折扣。我的項目是用Bla ...
  • 大家好,我是 Java陳序員。 由於為了生活奔波,常年在外,導致很多關係稍疏遠的親戚之間來往並不多。 因此節假日回家時,往往會搞不清楚哪位親戚應該喊什麼稱呼,很容易“社死”。 今天給大家介紹一個親戚關係計算器,讓你快速的計算出正確的親戚稱謂! 關註微信公眾號:【Java陳序員】,獲取開源項目分享、A ...
  • 寫在前面 情人節已經接近尾聲了,雖然跟我沒什麼關係,但是我還是很渴望,能遇到一個良人相伴一生。 現在時間: 內心異常平靜,相對吵鬧我更喜歡安靜的晚上,沒人打擾,enjoy自己獨處的時間! 保存內容顯示 1、任務拆解 讀取已保存內容 將讀取內容在富文本里顯示 2、讀取已保存內容 這個很好理解,就是增加 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...