VUE介紹

vue git 地址：https://github.com/vuejs/vue/projects
Vue 官網教程地址：https://cn.vuejs.org/v2/guide/installation.html
vue 官網API地址： https://cn.vuejs.org/v2/api/
vue官方學習視頻： https://learning.dcloud.io/#/?vid=0
學習版本：2.6.11 (官網已經有3.X 版本的了)
HBuilderX 編輯器3.1.2下載地址： https://www.onlinedown.net/soft/1217175.htm
hbuilder綠色版
uni-app官網： https://uniapp.dcloud.io/
uni-app 是一個使用 Vue.js 開發所有前端應用的框架，開發者撰寫一套代碼，可發布到iOS、Android、Web（回應式）、以及各種小程式（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應用等多個平臺，

HbuilderX 編譯器的使用
less
node
npm
cnpm
vue-cli
webpack
uni-app

在這里插入圖片描述
v-**** 內容
v-model v-bind v-if v-else v-else-if v-for v-html v-is v-on v-cloak

Vue.js 視頻教程

https://learning.dcloud.io/#/?vid=14

序言 vue.js介紹
第1節安裝與部署
第2節創建第一個vue應用
第3節資料與方法
第4節生命周期
第5節模板語法-插值
第6節模板語法-指令
第7節 class與style系結
第8節條件渲染
第9節串列渲染
第10節事件系結
第11節表單輸入系結
第12節組件基礎
第13節組件注冊
第14節單檔案組件
第15節免終端開發vue應用

序言 vue.js 介紹

vue.js 漸進式的 javaScript框架
優點：
體積小 33K
虛擬DOM
雙向資料系結
vue.js 框架多？生態豐富？

第1節安裝與部署

在這里插入圖片描述

開發版本： https://cn.vuejs.org/js/vue.js
生產版本： https://cn.vuejs.org/js/vue.min.js
下載開發版本后將其放到與.html 同一檔案夾下，這樣新建頁面就可以用 src="./vue.js" 參考vue了

index01addvuejs.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" charset="UTF-8" src="./vue.js"></script>
	</head>
	<body>
		<script> 
		</script>
	</body>
</html>

第2節創建第一個vue應用

1.引入vue.js
2.撰寫視圖區 div
3.撰寫腳本區 js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" charset="UTF-8" src="vue.js" ></script>		
	</head>
	<body>
		<!-- 視圖區 -->
		<div id="app">
		  {{ message }} ----{{name}}
		</div>
		
		<!-- 腳本區 
		el== element  
		
		-->
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					message: 'Hello Vue!',
					name : "Vue"
				}
			});
			
		</script>
	</body>
</html>

第3節資料與方法

  // 記錄 foo  變數  改變前 ，改變后的值 
	vm.$watch('foo',function(newVal,oldVal){
		console.log(newVal,oldVal);
	})

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" charset="UTF-8" src="vue.js">
			
		</script>
	</head>
	<body>
		
		<div id="app">
			{{ foo }}
			<!-- {{ a }} {{ b }} -->
		</div>
	
	<script type="text/javascript">
		
		var obj1={
			foo: 'bar1'
		}
		// Object.freeze(obj1);
		
		//var vmdata={a:11 , b: 22 ,c : obj1};
		var vm=new Vue({
			el: "#app",
			data: obj1
			//data: vmdata
		});
		// 記錄 foo  變數  改變前 ，改變后的值 
		vm.$watch('foo',function(newVal,oldVal){
			console.log(newVal,oldVal);
		})		
		vm.$data.foo="ssss";
		vm.$data.foo="s2";
		vm.$data.foo="s3";				
	</script>	
	</body>
</html>

第4節生命周期

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="vue.js" charset="UTF-8">
			
		</script>
	</head>
	<body>
		<div id="app">
			{{ a }}
		</div>
		
		<script type="text/javascript">
			var vmdata={ a: 1 };
			
			var vm=new Vue({
				el: '#app',
				data: vmdata,
				beforeCreate:function(){
					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("beforeDestroy");
				},
				destroyed() {
					console.log("destroyed");
				}
			});
			
			setTimeout(function(){
				vm.$data.a="change ...3 sec";
			},3000);
			setTimeout(function(){
				vmdata.a="change ... 6 sec";
			},6000);
		</script>
	</body>
</html>

第5節模板語法-插值

v-once
v-html
— v-bind:屬性 =""
v-bind:id=""
v-bind:class=“color01”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" charset="UTF-8" src="vue.js">
			
		</script>
	</head>
	<body>
		<div id="app"  >
			{{ a }} 
			<p>
				Using mustaches:{{ rawHtml }}
			</p> 
			<p>
				Using v-html directive: <span v-html="rawHtml"></span>
			</p> 
			<div v-bind:class="color">test v-bind </div> 
			<div>{{ number +1 }}</div>
			<div>
				{{ ok?'yes':'no' }}
			</div>	
			<div>{{message}}</div>
			<div>
				{{ message.split('').reverse().join('')}}
			</div>
		</div>
		
		<!-- <span style="color: red;">this is a red span </span> -->
		<script type="text/javascript">
			var vmdata={
				a:2,
				rawHtml: '<span style="color: red;">this is a red span </span>',
				color: 'red',
				number: 10,
				ok: 1,
				message : '123456789abcd'
			};
			var vm=new Vue({
				el: '#app',
				data:vmdata
			})
		</script>
		<style type="text/css">
			.red{color:red;}
			.blue{color: blue; font-size: 100px;}
			.white{color: white;}
		</style>
	</body>
</html>

第6節模板語法-指令

6.1 指令
v-if=“true”
6.2 引數
一些指令能夠接收一個引數，在指令名稱之后冒號表示
v-bind:href=“url”
v-on:click=“click1”

< div v-on:click=“click1”> 等同于
< div @click=“click1”>

6.3 修飾符
@click.stop
當前的click事件一旦執行，就要停下啦

修飾符：

.stop - 呼叫 event.stopPropagation()，
.prevent - 呼叫 event.preventDefault()，
.capture - 添加事件偵聽器時使用 capture 模式，
.self - 只當事件是從偵聽器系結的元素本身觸發時才觸發回呼，
.{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回呼，
.native - 監聽組件根元素的原生事件，
.once - 只觸發一次回呼，
.left - (2.2.0) 只當點擊滑鼠左鍵時觸發，
.right - (2.2.0) 只當點擊滑鼠右鍵時觸發，
.middle - (2.2.0) 只當點擊滑鼠中鍵時觸發，
.passive - (2.3.0) 以 { passive: true } 模式添加偵聽器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" charset="UTF-8" src="vue.js">
			
		</script>
	</head>
	<body>
		
		<div id="app">
			{{ a }}
			<p v-if="see"> you can see me </p>
			<a v-bind:href="url">........</a>
			<!-- v-on:click ==  @click  -->
			<div v-on:click="click1">
				<div v-on:click="click2">
					click me 
				</div>
			</div>
			<!-- v-on:click ==  @click  -->
			<div @click="click1">
				<div @click="click2">
					click me 2222
				</div>
			</div>
		</div>
		
		<script type="text/javascript">
			var vmdata={ 
				a: 1 ,
				see: true,
				url: "http://www.baidu.com/"
			};
			var vm= new Vue({
				el: '#app',
				data: vmdata,
				methods:{
					click1:function(){
						console.log('click 1 ....');
					},
					click2:function(){
						console.log('click 2 ....');
					}
				}
						
			});
		</script>
	</body>
</html>

第7節 class與style系結

 <div  			
		v-bind:class="[ isRed ? 'activeRed' : '' , isGreen ? 'activeGreen': '']"
		style="width: 50px; height: 50px; background-color: aquamarine;">
			hi vue 
		</div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" charset="UTF-8" src="vue.js">
			
		</script>
	</head>
	
	<!--
	v-bind class 物件形式
	v-bind:class="{activeRed:isRed,activeGreen:isGreen}" 
	v-bind class 陣列形式1 2 3
	v-bind:class='["activeRed","activeGreen"]'
	v-bind:class="[ isRed ? 'activeRed' : '' , isGreen ? 'activeGreen': '']"
	v-bind:class='[ isRed ? "activeRed" :"" , isGreen ? "activeGreen": ""]'
	
	-->
	<body>
		<div id="app">
			{{ a }}	
					
		
			
			<div 
			class="commClass"
			
			v-bind:class="[ isRed ? 'activeRed' : '' , isGreen ? 'activeGreen': '']"
			style="width: 50px; height: 50px; background-color: aquamarine;">
				hi vue 
			</div>
			<div :style="{ color: styColorRed, fontSize: stySize }">
				 hi i am style 
			</div>
		</div>
		
		<script type="text/javascript">
			var vmdata={
				a:1,
				isRed: true ,
				isGreen: true,
				styColorRed: '#FF0000',
				stySize: '50px',
				
			};
				
			var vm=new Vue({
				el: '#app',
				data:vmdata
			})
		</script>
		<style>
			.commClass{ font-weight: 900;}
			.activeRed{ color: #FF0000;}
			.activeGreenBack{ background-color: green;}
		</style>
		
	</body>
</html>

第8節條件渲染

v-if
v-else-if
v-else

v-show ----- display:none

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" charset="UTF-8" src="vue.js">
			
		</script>
	</head>
	<body>
		<div id="app">
			{{ a }}
			
			<div v-if="type=='A'">
				A 
			</div>
			<div v-else-if="type==='B'">
				B
			</div>
			<div v-else-if="type==='C'">
				C 
			</div>
			<div v-else>
				Not A/B/C 
			</div>
			
			
			<div v-show="isOK">
				hello v-show 
			</div>
		</div>
		
		
		<script type="text/javascript">
			var vmdata={ 
				a: 1,
				type: "A",
				isOK: false,
			};
			
			var vm=new Vue({
				el: "#app",
				data:vmdata,
			});
			
		</script>
	</body>
</html>

第9節串列渲染

v-for

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" charset="UTF-8" src="vue.js">
			
		</script>
	</head>
	<body>
		<div id="app">
			{{ a }}
			<ul>
				<li v-for="item,index in items" v-bind:key="index" >
					{{ index }}   ::  {{ item.message }}
				</li>
			</ul>
			<br>
			<ul>
				<li v-for="value,key  in object" v-bind:key="key">
					{{ key }}  :  {{ value }}
				</li>
			</ul>			
		</div>
		
		
		<script type="text/javascript">
			var vmdata={ 
				a:1 ,
				items:[
					{message: 'foo'},
					{message: 'bar'},
					{message: 'haha'}
				],
				object:{
					title: '好人老李全傳',
					author: '老李',
					publicAd: '人名錄',
				}
			};			
			var vm =new Vue({
				el: '#app',
				data:vmdata,
			});
			
			
		</script>
	</body>
</html>

第10節事件系結

v-on:[事件] — 可以系結所有Html 事件
v-on:click=“counter+=1”
v-on:dblclick=“greet”
v-on:click=“greet2(‘li’,$event)”
v-on:click.stop=“doThis” ----事件修飾符

事件修飾符：
.stop
.prevent
.capture
.self
.once
.passive

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" charset="UTF-8" src="vue.js">
			
		</script>
	</head>
	<body>
		<div id="app">
			{{ a }}
			<br>
			<button v-on:click="counter+=1">數值：{{ counter }}</button>
			<br>
			<button v-on:dblclick="greet">greet</button>
			<br>
			<button type="button" v-on:click="greet2('li',$event)">eventshow</button>
			
		</div>
		<script type="text/javascript">
			var vmdata={ 
				a: 1,
				counter: 0,
				name: '老李',
			}
			var vm=new Vue({
				el:'#app',
				data:vmdata,
				methods:{
					greet: function(){
						alert('hi'+ this.name);
					},
					greet2: function (str,e){
						alert(str);
						console.log(e);
					}
				}
				
			})
		</script>
	</body>
</html>

第11節表單輸入系結

v-model="message"
text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 欄位將 value 作為 prop 并將 change 作為事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" charset="UTF-8" src="vue.js">
			
		</script>
	</head>
	<body>
		<div id="app">
			{{ a }}
			<div id="example-1">
				<input v-model="message" placeholder="edit me">
				<p>Message is: {{ message }}</p>
				<textarea v-model="message" placeholder="edit me">
					
				</textarea>
				<p style="white-space: pre-line;"> message is : {{message}}</p>
			</div>
			<div id="example-2">
				<input type="checkbox" name="jack" id="jack" value="Jack" v-model="checkedNames" />
			    <label for="jack">Jack</label>
				<input type="checkbox" name="john" id="john" value="John" v-model="checkedNames" />
				<label for="john">John</label> 
				<input type="checkbox" name="mike" id="mike" value="Mike" v-model="checkedNames" />
				<label for="mike">Mike</label>
				<br>
				<span id="span1">
					Checked names: {{ checkedNames }}
				</span>
			</div>
			<div id="example-3">
				<input type="radio" name="one" id="one" value="One" v-model="radioName" />
				<label for="one">One</label>
				<input type="radio" name="two" id="two" value="Two" v-model="radioName" />
				<label for="two">Two</label>
				<br>
				<span>
					Checked Radio: {{ radioName }}
				</span>
			</div>
			
			<button type="button" @click="submit2">submit</button>
		</div>
		
		<script type="text/javascript">
			var vmdata={ 
				a: 1 ,
				message: "",
				checkedNames:["Jack",""],
				radioName:'',
			 };
				
				var vm =new Vue({
					el: '#app',
					data: vmdata,
					methods:{
						submit:function(){
							console.log(this.radioName)
						},
						submit2: function(){
							var postObj={
								msg1: this.message,
								msg2: this.checkedNames,
								mesg3: this.radioName,
							}
							console.log(postObj);
							
						}
					}
				})
		</script>
		
	</body>
</html>

第12節組件基礎

Vue.component(“button-counter1”,{ … … });
slot

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" charset="UTF-8" src="vue.js" >
			
		</script>
		
	</head>
	<body>
		<div id="app">
			{{ a }}
			<br>
			<button-counter1></button-counter1>
			<br>
			<button-counter1></button-counter1>
			<br>
			<br>
			<!-- v-on:clicknow_inner="clicknow_outer"   事件系結 將控制元件內部的clicknow_inner事件  系結到頁面clicknow_outer事件中   -->
			<button-counter2 prop_name="laoli" v-on:clicknow_inner="clicknow_outer"></button-counter2>
			<br>
			<br>
			<button-counter3 prop_name="laoliu" @clicknow_inner="clicknow_outer">
				<!-- this is for  slot -->
				<h1>slot 1111</h1>
				<h2>slot 2222</h2>
			</button-counter3>
			
		</div>
		
		<script type="text/javascript">
			Vue.component("button-counter1",{
				data: function(){
					return { 
						count:0 ,
						}
				},
				template:'<button v-on:click="count++">You click me{{ count }} times.</button>'
			});
			
			Vue.component('button-counter2',{
				template:'<button v-on:click="clickfun"> {{ prop_name }}  You click me {{ count }} times .</button>',
				data: function(){
					return {
						count:0,
					}
				},
				props:["prop_name"],
				methods:{
					clickfun : function(){
						this.count++;
						this.$emit('clicknow_inner',this.count);
					}
				}
			})
			
			Vue.component("button-counter3",{
				template:'<div><slot></slot><button v-on:click="clickfunc"> {{ prop_name }} ,You click me {{ count }} times . </button></div>',
				data: function(){
					return {
						count:0,
					}
				},
				props:["prop_name"],
				methods:{
					clickfunc: function(){
						console.log(this.count)
						this.count++;
						this.$emit('clicknow_inner',this.count);
					}
				}
			})
			
			
			
			var vmdata={ 
				a:1,
				b:2,
			}
			var vm =new Vue({
				el: "#app",
				data:vmdata,
				methods:{
					clicknow_outer: function(str1){
						//alert('click now :'+ str1);
						console.log('click now :'+ str1);
					}
				}
			})
		</script>
		<style type="text/css">
			
		</style>
	</body>
</html>

第12節附屬圖片 – 自定義事件執行呼叫程序

在這里插入圖片描述

第13節組件注冊

建議使用第一種羊肉串方式
使用 kebab-case Vue.component(‘my-component-name’, { /* … / })
使用 PascalCase Vue.component(‘MyComponentName’, { / … */ })

全域注冊
區域注冊

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" charset="UTF-8" src="vue.js">
			
		</script>
	</head>
	<body>
		<div id="app">
			{{ a }}
			<br>
			<!-- 全域組件 -->
			<my-button title2="mytitle" v-on:inner_click="out_click" >mybtn2</my-button>
			<!-- 區域組件 -->
			<local_component2 v-on:inner_click2="out_click_4_innerComp" ></local_component2>
			
		</div>
		<script type="text/javascript">
			// 全域組件
			Vue.component("my-button",{
				template:'<div><button name="lili" v-on:click="myclick" >MyButton</button></div>',
				data:function(){
					return {
						count:0,
					}
				},
				props: ["title2"],
				methods:{
					// 在myclik事件中觸發 inner_click 事件,
					// inner_click 事件是個中介 ,用于觸發 用戶自定義的out_click 事件 
					myclick: function(){
						alert("I am myclick ");
						this.count++;						
						this.$emit('inner_click',this.count)
					}
				}
			});
			
			var vmdata={ 
				a:1,
			};
			var vm =new Vue({
				el: "#app",
				data: vmdata,
				methods:{
					out_click: function( str ){
						alert("I am out click "+ str );
					},
					out_click_4_innerComp:function(){
						alert(" I am inner Comp ");
					},
				},
				components:{
					// 區域組件 
					local_component2:{
						template:"<div><h2>LocalComponent_123456</h2><button v-on:click='myclick2' name='innerCompBtn'>ClickBtn</button></div>",
						data: function(){								
							return {
							}
						},
						props:[],
						methods:{
							myclick2:function(){
								console.log("myclick2");
								this.$emit('inner_click2');
							}
						}
					}
				}
			});
			
		
			
		</script>
		<style type="text/css">
			
		</style>
	</body>
</html>

第13節附屬圖片全域vs區域組件

在這里插入圖片描述

第14節單檔案組件

npm 相關知識參考
Node.js 學習筆記：https://blog.csdn.net/wei198621/article/details/116350962

在這里插入圖片描述

1.  node.js 安裝
2.  修改默認node鏡像下載地址
3.  安裝淘寶鏡像 
    npm install -g cnpm --registry=https://registry.npm.taobao.org
4.  cnpm install -g @vue/cli
5.  cnpm install -g webpack

6.  進入目錄
    cd C:\workspace\workspace_front\vue\vue官方demo\vueCliCreate
7.  執行  vue  ui 指令  會進入vue cli 的圖形化管理界面
C:\workspace\workspace_front\vue\vue官方demo\vueCliCreate>vue ui
    Starting GUI...
    Ready on http://localhost:8000

在這里插入圖片描述

新建專案

http://localhost:8000/project/select
在這里插入圖片描述
兩分鐘后，自動創建成功
http://localhost:8000/dashboard

默認新建的目錄結構

新增組件

新增一個組件 comp02.vue

<template>
	<h2 class="red"> test ....  {{ msg }}</h2>
</template>

<script>		
	export default{
		name: 'comp02',
		props:{
			msg:{
				type: String,
				default:"test msg",
			}
		},
		methods:{			
		},
		data(){
			return {				
			}
		}
	}
</script>

<style>
	.red{ color: red;}
</style>

在這里插入圖片描述

用戶控制元件使用三大步 1.匯入 2.注冊 3.使用

用戶控制元件使用三大步 0.創建用戶控制元件 1.匯入 2.注冊 3.使用
在這里插入圖片描述

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
	<!--- 03 use 使用comp02 -->
	<comp02></comp02>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
//--- 01 defined   匯入自定義的組件 
import comp02 from './components/comp02.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
	//--- 02 registered  注冊 comp02 
	comp02,
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

第15節免終端開發vue應用 uniapp

nniapp 官網：
https://uniapp.dcloud.io/
uniapp 組件：
https://uniapp.dcloud.io/component/README
uniapp 插件市場：
https://ext.dcloud.net.cn/

uni-app 和HBuilderX 都是DCloud公司出品的，前者是框架，后者是idea,
它們互相搭配，使得基于vue.js 開發專案變得更加簡單和高效，
讓開發者將精力放在業務邏輯上，

新建uni-app 應用

打開HbuilderX 編輯器，檔案–》新建–》專案

在這里插入圖片描述

uni-app生成目錄結構介紹

在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/282636.html

標籤：其他

上一篇：冒泡、簡單選擇、直接插入、希爾、快速、歸并、堆排序演算法：JavaScript實作+分析

下一篇：axios發出請求，獲取后端圖片檔案流，中文亂碼問題，急需解決，非常感謝！！

Vue 官網學習筆記

VUE介紹

Vue.js 視頻 教程

序言 vue.js 介紹

第1節 安裝與部署

第2節 創建第一個vue應用

第3節 資料與方法

第4節 生命周期

第5節 模板語法-插值

第6節 模板語法-指令

第7節 class與style系結

第8節 條件渲染

第9節 串列渲染

第10節 事件系結

第11節 表單輸入系結

第12節 組件基礎

第12節 附屬圖片 – 自定義事件執行呼叫程序

第13節 組件注冊

第13節 附屬圖片 全域vs區域組件

第14節 單檔案組件

新建專案

新增組件

用戶控制元件使用三大步 1.匯入 2.注冊 3.使用

第15節 免終端開發vue應用 uniapp

新建uni-app 應用

uni-app生成目錄結構介紹

Vue.js 視頻教程

第1節安裝與部署

第2節創建第一個vue應用

第3節資料與方法

第4節生命周期

第5節模板語法-插值

第6節模板語法-指令

第8節條件渲染

第9節串列渲染

第10節事件系結

第11節表單輸入系結

第12節組件基礎

第12節附屬圖片 – 自定義事件執行呼叫程序

第13節組件注冊

第13節附屬圖片全域vs區域組件

第14節單檔案組件

第15節免終端開發vue應用 uniapp