Vue 官网学习笔记

最新推荐文章于 2025-02-24 15:53:40 发布

wei198621

最新推荐文章于 2025-02-24 15:53:40 发布

阅读量1.2w

点赞数 18

分类专栏：大前端知识

本文链接：https://blog.youkuaiyun.com/wei198621/article/details/116330582

版权

本文是关于Vue.js的详细学习笔记，涵盖Vue.js 2.6.11的基础到高级特性，包括安装、创建应用、数据与方法、生命周期、模板语法、组件注册、单文件组件等内容，并介绍了免终端开发的uni-app框架。通过阅读，你可以全面了解Vue.js的使用和uni-app的开发流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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