Vue 官网学习笔记

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/钉钉/淘宝)、快应用等多个平台。

本人学习过程代码git地址: https://github.com/wei198621/front_vue_offical_demo

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生成目录结构介绍

在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页