想快速上线一个demo产品，前端也自己一把嗦，但是好久不用vue已经有些忘了，找了个视频重新学习一下。以防以后再重走此路，在此记录。
一、快速开始
1、官网
- vue2
- vue3
2、下载vue.js文件或者使用cdn
3、编写一个html上手网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<h1>Vue.js</h1>
<p>{{message}}</p>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const x = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>二、学习示例
示例1：双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<h1>双向绑定示例</h1>
<input v-model="message" type="text">
<p>{{message}}</p>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const x = new Vue({
el: '#app',
data: {
message: ''
}
});
</script>
</body>
</html>
示例2：条件渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<h1>条件渲染示例</h1>
<p v-if="showMessage">{{message}}</p>
<button @click="toggleMessage">Toggle Message</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const x = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
showMessage: true
},
methods: {
toggleMessage() {
this.showMessage = !this.showMessage;
}
}
});
</script>
</body>
</html>
示例3：列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<h1>列表渲染示例</h1>
<ul>
<li v-for="item in items">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const x = new Vue({
el: '#app',
data: {
items: ['Apple', 'Banana', 'Orange']
}
});
</script>
</body>
</html>
三、模板语法
Vue的模板语法允许我们将数据绑定到HTML模板中，实现动态渲染和交互。以下是一些常用的Vue模板语法：
- 插值
使用双大括号{{ }}语法可以在HTML模板中插入Vue实例的数据：
<div id="app">
<p>{{ message }}</p>
</div>
- 指令
Vue提供了很多内置指令，用于实现常见的DOM操作和数据绑定。例如，v-if指令用于根据条件渲染元素：
<div id="app">
<p v-if="showMessage">{{ message }}</p>
</div>
- 事件绑定
可以使用v-on指令实现事件绑定，让用户与应用程序进行交互：
<div id="app">
<button v-on:click="toggleMessage">Toggle Message</button>
</div>
- 列表渲染
使用v-for指令可以遍历数组或对象，渲染列表：
<div id="app">
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
- bind 指令
Vue提供了v-bind指令，用于动态绑定HTML元素的属性。通过v-bind指令，我们可以将Vue实例的数据绑定到HTML元素的属性上。
例如，我们可以使用v-bind指令将Vue实例的title属性绑定到<h1>标签的title属性上：
<div id="app">
<h1 v-bind:title="title">{{ message }}</h1>
</div>
在上述示例中，title属性的值将会随着Vue实例中的title属性的变化而更新。
标签体中使用差值表达式，属性里使用v-bind指令语法
四、点击事件
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<p>请点击按钮</p>
<button @click="showMessage">点击</button>
<button @click="showMessage2($event,1)">点击(传参)</button>
<button @click="showMessage3($event,$data.message)">点击(data里的传参)</button>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
showMessage: function () {
alert(this.message);
},
showMessage2: function (event,n) {
console.log(this)
console.log(event,n)
alert(this.message +'' + n);
},showMessage3: function (event,msg) {
console.log(this)
console.log(event,msg)
alert(this.message +'' + msg);
}
}
});
</script>
</html>Vue事件修饰符
Vue提供了一些事件修饰符，用于在处理事件时进行更精确的控制。以下是一些常用的Vue事件修饰符：
.stop：阻止事件冒泡在事件处理程序中使用
.stop修饰符可以阻止事件继续向上传播，即停止事件冒泡。示例：
<button @click.stop="handleClick">Stop Event Propagation</button>.prevent：阻止默认行为使用
.prevent修饰符可以阻止元素的默认行为。示例：
<a href="#" @click.prevent="handleClick">Prevent Default Behavior</a>.capture：使用事件捕获模式默认情况下，Vue事件处理程序使用事件冒泡模式。使用
.capture修饰符可以将事件处理程序设置为使用事件捕获模式。示例：
<div @click.capture="handleClick">Capture Event</div>.self：只在事件目标自身触发时触发事件处理程序使用
.self修饰符可以限制事件处理程序只在事件目标自身触发时才执行。示例：
<div @click.self="handleClick">Only Trigger on Self Click</div>.once：只触发一次事件处理程序使用
.once修饰符可以将事件处理程序设置为只触发一次。示例：
<button @click.once="handleClick">Only Trigger Once</button>.passive：提升滚动性能使用
.passive修饰符可以告知浏览器该事件处理程序不会调用preventDefault()方法，从而提升滚动的性能。示例：
<div @touchmove.passive="handleTouchMove">Improve Scrolling Performance</div>
这些事件修饰符可以单独使用，也可以组合使用，以实现更精确的事件控制。
五、键盘事件
在Vue中，有一些常用的按键别名可以用于处理键盘事件。以下是一些常用的Vue按键别名：
.enter：回车键.tab：Tab键.delete：删除键.esc：Esc键.space：空格键.up：上方向键.down：下方向键.left：左方向键.right：右方向键
可以将这些按键别名与v-on指令一起使用，以便在事件处理程序中对相应的按键进行响应。
例如，以下示例演示了如何在按下回车键时触发事件处理程序：
<div id="app">
<input type="text" @keydown.enter="handleEnterKey">
</div>
<script type="text/javascript">
new Vue({
el: '#app',
methods: {
handleEnterKey: function () {
alert('Enter key pressed!');
}
}
});
</script>
在上述示例中，当按下回车键时，将触发handleEnterKey方法，并显示一个弹窗。
这些按键别名可帮助简化键盘事件的处理，使代码更加清晰和易于维护。
六、计算属性
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstName"/><br>
<input type="text" v-model="lastName"/><br>
<h1>{{fullName}}</h1>
<!-- 简写版本 -->
<h1>{{simpleFullName}}</h1>
<!-- 无缓存 -->
<h1>{{getFullName()}}</h1>
<h1>{{getFullName()}}</h1>
<h1>{{getFullName()}}</h1>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
firstName:'张',
lastName:'三'
},
computed:{
fullName:{
get(){
console.log("get 被调用了")
return this.firstName +'-' + this.lastName;
},
},
simpleFullName:function(){
console.log("simpleFullName 被调用了")
return this.firstName +'-' + this.lastName;
}
},
methods: {
getFullName(){
console.log("getFullName 被调用了")
return this.firstName +'-' + this.lastName;
}
}
});
</script>
</html>