• Vue3 -- 入门

    在这里插入图片描述

    Vue3 -- 入门

    Vue2.x官方文档: https://v2.vuejs.org/v2/guide/.

    Vue2.x官方文档: https://vuejs.org/guide/introduction.html.

    在这里插入图片描述在这里插入图片描述

    1.Introduction

    当前，Vue共有三个大版本：

    • 2.x的版本是目前企业级项目开发中的主流版本
    • 3.x的版本于2020-09-18发布，生态还不完善，是未来企业级项目开发的趋势,代号One Piece
    • 1.x的版本几乎被淘汰，基本不再使用

    Vue3.0发布时的介绍: https://github.com/vuejs/core/releases/tag/v3.0.0 .

    在这里插入图片描述
    在这里插入图片描述

    2.Core Function

    2.1 宣告式渲染

    • 宣告式渲染：只告诉程序想要什么结果，如何达成由程序保证，开发者不用关心。不用操作DOM，直接更新数据
      好处：比如在vue中，只需定义好展示数据，并把它放在 template中 合适的位置。
    • 命令式渲染：一步一步告诉程序怎么做，能否达成结果取决于开发者的设计。
      缺点：如果 DOM 发生变化，js 代码也需要做相应的改变，耦合度很强。

    在这里插入图片描述

    2.2 Component

    將公共的部分的元件化之後（component），代表同樣邏輯、同樣模板的東西可以重複拿來使用。

    • 例如我们会将api的部分单独封装成一个component，供给多个页面去呼叫
      在这里插入图片描述

    3.Install

    3.1 Quick start

    • 使用html，必须要导包
      在这里插入图片描述
    <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>hello vue3</title>
	<script src="https://unpkg.com/vue@3"></script>
</head>

<body>
	<div id="app">{{message}}</div>
</body>
<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
		   message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>
</html>	

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    3.2 npm install

    在这里插入图片描述

    4.Syntax

    4.1 v-bind属性绑定

    在这里插入图片描述

    4.2 v-model表单绑定

    • input
      在这里插入图片描述
    • testarea
      在这里插入图片描述
    • checkbox
      在这里插入图片描述
    • radio
      在这里插入图片描述
    • select
      在这里插入图片描述

    4.3 v-on点击事件

    • 点击事件，可以将方法写下下面
      在这里插入图片描述
    • 缩写
      在这里插入图片描述
    • 测试发现bug，alert功能无法实现
      在这里插入图片描述

    4.4 v-if/v-show

    标签显示或隐藏
    在这里插入图片描述

    4.5 v-for

    在这里插入图片描述

    4.6 All Demo

    <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>hello vue3</title>
	<script src="https://unpkg.com/vue@3"></script>
</head>


<body>
	<div id="app">
		<hr>
		<p>1.属性绑定，v-bind</p>
		<p>isBtnDisabled is :{{ isBtnDisabled }}</p>
	
		<button v-bind:disabled="isBtnDisabled" @click="alert1">Click</button>
		<hr>
		<p>2.表单绑定，v-model</p>
		<h6>2.1input</h6> 
			<div id="input1">
				<input v-model="message" placeholder="edit me">
				<p>Message is :{{ message }}</p>
			</div>
	    <hr>
		<h6>2.2testarea</h6> 
			<div id="input1">
				<textarea v-model="message1" placeholder="add multiple lines"></textarea>
				<p>Multiline is :{{ message1 }}</p>
			</div>
	    <hr>
		<h6>2.3radio</h6> 
			<div id="radio1">
				<input type="radio" id="one" value="One" v-model="picked" />
				<label for="one" >One</label>

				<input type="radio" id="two" value="Two" v-model="picked" />
				<label for="two">Two</label>
		
				<div>Picked: {{ picked }}</div>
			</div>
		<hr>	
	    <h6>2.4checkbox</h6> 
			<div id="checkbox1">
				<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>
		
				<div>Checked names: {{ checkedNames }}</div>
			</div>
	    <hr>
		<h6>2.5select</h6> 
		<select v-model="selected">
		  <option disabled value="">Please select one</option>
		  <option>A</option>
		  <option>B</option>
		  <option>C</option>
		</select>
		
		<div>Selected: {{ selected }}</div>
		<p>3.点击事件，v-on</p>
		<div>
			<p>Count:{{ count }}</p>
			<button v-on:click="count++">+1</buttion>
		</div>
		<hr>
		<div>
			<button @click="alert2">Click</button>
		</div>
	    <hr>
		<p>4.条件判断，v-if/v-show</p>
	    <div>
			<div :if="isShow">v-if</div>
			<div :show="isShow">v-show</div>
		</div>
        <hr>
		<p>5.列表渲染v-for</p>
		<div>
			<ul>
				<li v-for="item in arr">{{item}}</li>
			</ul>
		</div>

	</div>
</body>
<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
		isShow: false,
        selected: "",
		isBtnDisabled: false,
		message: 'Hello Vue!',
		message1: '',
		picked: "One",
		checkedNames: [],
		count: 0,
		arr: ['Tom','Jam','Lucy','Lily']
      }
    },
	methods:{
	  alert1:function(){
    	alert("hello");
      },
	  alert2:function(){
    	alert("click success");
      }
    }
  }).mount('#app')
</script>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117

    5.Left Hooks

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    6.vue-cli

    • install
      在这里插入图片描述
    • create project在这里插入图片描述
    • select vue3
      在这里插入图片描述
    • npm run serve
      http://localhost:8080/在这里插入图片描述
      http://localhost:8000/
      在这里插入图片描述

    7.救赎之道，就在其中

    在这里插入图片描述

    在这里插入图片描述

  • 相关阅读:
    Java线程池源码解析
    常用编码格式整理
    用C++实现设计模式中的单件
    HyperLynx（十七）SATA的设计与仿真
    ElasticSearch7.3学习(二十七)----聚合概念（bucket和metric）及其示例
    html5 -- canvas使用(1)
    过去将来时习题
    PgSQL-内核特性-TupleTableSlotOps
    Vue+SpringBoot打造学生综合素质评价系统
    解决九号老C(C30/C40/C60/C80)电动车坐垫感应失灵的问题
  • 原文地址：https://blog.csdn.net/weixin_43916074/article/details/125552839