Vue 官网学习笔记

Posted 2021-05-17 wei198621

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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'以上是关于Vue 官网学习笔记的主要内容，如果未能解决你的问题，请参考以下文章 
 Vue3官网-高级指南（十七）响应式计算`computed`和侦听`watchEffect`（onTrackonTriggeronInvalidate副作用的刷新时机`watch` pre）(代码片段
 vue2.0学习笔记之组件
 学习笔记：VUE
 vue视频学习笔记01
 VUE学习笔记之vue cli 构建项目
 学习笔记：python3，代码片段（2017）

Vue 官网学习笔记

VUE介绍

Vue.js 视频 教程

序言 vue.js 介绍

第1节 安装与部署

第2节 创建第一个vue应用

第3节 数据与方法

第4节 生命周期

第5节 模板语法-插值

第6节 模板语法-指令