Vue.js官网版教程

前言这是vue官网案例学习，记录一下序言 vue.js介绍Vue.js 渐进式 JavaScript 框架https://learning.dcloud.io/#/?vid=0第1节安装与部署https://learning.dcloud.io/#/?vid=1<script src="https://cdn.jsdeli

互联网小队

3313人浏览 · 2021-03-23 18:47:10

互联网小队 · 2021-03-23 18:47:10 发布

前言

这是vue官网案例学习，记录一下

序言 vue.js介绍

Vue.js 渐进式 JavaScript 框架
https://learning.dcloud.io/#/?vid=0

Xnip2021-03-14_23-00-28

Xnip2021-03-14_23-02-22

第1节安装与部署

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

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 线下版本开发 -->
<script src="vue.js" type="text/javascript" charset="utf-8"></script>

第2节创建第一个vue应用

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

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

第3节数据与方法

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{a}}
		</div>

		<script type="text/javascript">
			var data = {
				a: 1
			};
			var vm = new Vue({
				el: "#app",
				data: data
			});

			vm.$watch('a', function(newVal, oldVal) {
				console.log(newVal, oldVal);
			})

			vm.$data.a = "test...."
		</script>

	</body>
</html>

第4节生命周期

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	{{msg}}
</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#app",
    data : {
      msg : "hi vue",
    },
    //在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
    beforeCreate:function(){
      console.log('beforeCreate事件配置之前被调用');
    },
    /* 在实例创建完成后被立即调用。
    在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
    然而，挂载阶段还没开始，$el 属性目前不可见。 */
    created:function(){
      console.log('create在实例创建完成后被立即调用');
    },
    //在挂载开始之前被调用：相关的渲染函数首次被调用
    beforeMount:function(){
      console.log('beforeMount在挂载开始之前被调用');
    },
    //el 被新创建的 vm.$el 替换, 挂在成功
    mounted:function(){
      console.log('mounted挂在成功');
    },
    //数据更新时调用
    beforeUpdate:function(){
      console.log('beforeUpdate数据更新时调用');
    },
    //组件 DOM 已经更新, 组件更新完毕
    updated:function(){
      console.log('updated组件更新完毕');
    }
});
</script>
</body>
</html>

第5节模板语法-插值

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    {{msg}}
    <p>html:{{html}}</p>
    <p v-html="html"></p>
    <div v-bind:class="color">
      test---
    </div>
    <p>{{number+1}}</p>
    <p>{{ 1 == 1 ? 'Yes' : 'No' }}</p>
    <p>{{msg}}</p>
    <p>{{msg.split('')}}</p>
    <p>{{msg.split('').reverse()}}</p>
    <p>{{msg.split('').reverse().join('')}}</p>
</div>
<script type="text/javascript">
    var vm = new Vue({
      el : "#app",
      data : {
        msg : "hi vue",
        html:'<span style="color:red">red</span>',
        color:'blue',
        number:10,
        ok:1,
        msg:"vue"
      }
    });
</script>
<style type="text/css">
    .red{color:red;}
    .blue{color:blue; font-size:100px;}
</style>
</body>
</html>

第6节模板语法-指令

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p v-if="seen">IF看到我了</p>
			<a v-bind:href="url">...</a>
			<div @click="click1">
				<div @click.stop="click2">
					click me
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
					seen : false,
					url : "https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4"
				},
				methods:{
					click1:function(){
						console.log('click1');
					},
					click2:function(){
						console.log('click2');
					},
				}
			})
		</script>
	</body>
</html>

第7节 class与style绑定

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<div 
	class="test" 
	v-bind:class="[ isActive ? 'active' : '', isGreen ? 'green' : '']" 
	style="width:200px; height:200px; text-align:center; line-height:200px;">
		hi vue
	</div>
	
	<div 
	:style="{color:color, fontSize:size, background: isRed ? '#d291ff' : ''}">
		hi vue
	</div>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		isActive : true,
		isGreen : true,
		color : "#FFFFFF",
		size : '50px',
		isRed : true
	}
});
</script>
<style>
.test{font-size:30px;}
.green{color:#00FF00;}
.active{background:#FF0000;}
</style>
</body>
</html>

第8节条件渲染

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<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>
	<h1 v-show="ok">Hello!</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		type : "B",
		ok : true
	}
});
</script>
<style type="text/css">

</style>
</body>
</html>

第9节列表渲染

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{message}}--{{name}}
			<ul>
				<li v-for="item,index in items"
				:key="index">
				{{index}}--{{item.message}}</li>
			</ul>
			<ul>
				<li v-for="value,key in object">
					{{key}}:{{value}}
				</li>
			</ul>
		</div>
		
		
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
					message: 'Hello ',
					name : " Vue",
					items:[
						{message:'foo'},
						{message:'bar'}
					],
					object:{
						title:'title',
						author:'Doe',
						push:'2020-12-20'
					}
				}
			})
			console.log(vm);
		</script>
	</body>
</html>

第10节事件绑定

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{message}}--{{name}}
			<button v-on:click="count += 1">数值：{{count}}</button>
			<button type="button" v-on:click="greet('abc',$event)">Greet</button>
		</div>
		
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
					count:0,
					message: 'Hello ',
					name : " Vue"
				},
				methods:{
					greet:function(str,e){
						console.log(str);
						console.log(e);
					}
				}
			})
			console.log(vm);
		</script>
	</body>
</html>

第11节表单输入绑定

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<div id="example-1">
		<input v-model="message" placeholder="edit me">
		<p>Message is: {{ message }}</p>
		<!--  -->
		
		<textarea v-model="message2" placeholder="add multiple lines"></textarea>
		<p style="white-space: pre-line;">{{ message2 }}</p>
		<br />
		<!--  -->
		
		<div style="margin-top:20px;">
			<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
			<label for="jack">Jack</label>
			<!--  -->
			<input type="checkbox" id="john" value="John" v-model="checkedNames">
			<label for="john">John</label>
			<!--  -->
			<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
			<label for="mike">Mike</label>
			<!--  -->
			<br>
			<span>Checked names: {{ checkedNames }}</span>
		</div>
		<!--  -->
		<div style="margin-top:20px;">
			<input type="radio" id="one" value="One" v-model="picked">
			<label for="one">One</label>
			<br>
			<!--  -->
			<input type="radio" id="two" value="Two" v-model="picked">
			<label for="two">Two</label>
			<br>
			<!--  -->
			<span>Picked: {{ picked }}</span>
		</div>
		<!--  -->
		<button type="button" @click="submit">提交</button>
	</div>
	
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		message : "test",
		message2 :"hi",
		checkedNames : ['Jack', 'John'],
		picked : "Two"
	},
	methods: {
		submit : function () {
			console.log(this.message);
			console.log(this.message2);
			console.log(this.picked);
			console.log(this.checkedNames);
			
		}
	}
});
</script>
<style type="text/css">

</style>
</body>
</html>

第12节组件基础

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<button-counter title="title1 : " @clicknow="clicknow">
		<h2>hi...h2</h2>
	</button-counter>
	<button-counter title="title2 : "></button-counter>
</div>
<script type="text/javascript">
Vue.component('button-counter', {
	props: ['title'],
	data: function () {
		return {
		  count: 0
		}
	},
	template: '<div><h1>hi...</h1><button v-on:click="clickfun">{{title}} You clicked me {{ count }} times.</button><slot></slot></div>',
	methods:{
		clickfun : function () {
			this.count ++;
			this.$emit('clicknow', this.count);
		}
	}
})
var vm = new Vue({
	el : "#app",
	data : {
		
	},
	methods:{
		clicknow : function (e) {
			console.log(e);
		}
	}
});
</script>
<style type="text/css">

</style>
</body>
</html>

第13节组件注册

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<button-counter></button-counter>
	<test></test>
</div>
<script type="text/javascript">
Vue.component('button-counter', {
	props: ['title'],
	data: function () {
		return {}
	},
	template: '<div><h1>hi...</h1></div>',
	methods:{
		
	}
})
var vm = new Vue({
	el : "#app",
	data : {
		
	},
	methods:{
		clicknow : function (e) {
			console.log(e);
		}
	},
	components:{
		test : {
			template:"<h2>h2...</h2>"
		}
	}
});
</script>
<style type="text/css">

</style>
</body>
</html>

第14节单文件组件

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

安装 `npm`

npm 全称为 Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器。

npm -v

由于网络原因安装 `cnpm`

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装 `vue-cli`

cnpm install -g @vue/cli

安装 `webpack`

webpack 是 JavaScript 打包器(module bundler)

cnpm install -g webpack

第15节免终端开发vue应用

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

其他

1、免终端开发Vue应用

uni-app + HBuilder X

都是DCloud公司出品的，前者是框架，后者是ide，它们互相搭配，使得基于vue.js开发项目变的更简单和高效！让开发者把更多精力放在业务逻辑上

2、cli方式

cli 是命令行，一个黑色的终端窗体，在里面敲击命令，这要求开发者需要了解终端、node、npm等很多知识，不然在以下方面会困难重重：

1、搭建项目环境

2、运行和发布项目

3、配置less/sass/typescript/babel等预编译器

4、安装各种流行的组件库

3、uni-app项目创建介绍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6thgAh1v-1616496360426)(/Users/mac/Desktop/008eGmZEly1got0l5qgn6j31960c4n0a.png)]

4、v-if VS v-show

Xnip2021-03-15_19-12-22

5、vuecli的GUI化管理界面

vue ui

https://jingyan.baidu.com/article/624e745989d0c975e9ba5a0b.html

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

Xnip2021-03-23_18-41-56

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^