Vue之webpack
1.webpack概念
前端规范:模块化、组件化、自动化、规范化
为了实现前端项目工程化,webpack诞生,webpack是一种前端工程化的解决方案。
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
webpack的手写过程就先看一遍,后面深入研究
2.Vue
Vue是一套用于构建用户界面的前端框架
两个特点:
1.数据驱动视图,数据一旦变化,视图就变化(页面会重新渲染)。数据驱动视图是单向的
2.数据双向绑定,页面一旦变化,数据也变化。
一个最简单的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 导入vue.js就把vue变成了全局变量 -->
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
{
{ message }}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
3.Vue指令
1.内容渲染指令
内容渲染指令用来渲染DOM元素中的文本内容。常用的内容渲染指令:
- v-text
- { {}}
- v-html
1.v-text:会覆盖标签内原本的内容(缺点)
<p v-text="name">姓名</p>
data: {
name: 'zhangsan'
}
// 结果是zhangsan,覆盖了里面原本的姓名
2.{ {}};插值字符串,不会覆盖原来的内容
<div id="app">
大家好,{
{ message }}
</div>
data: {
message: 'Hello Vue!'
}
3.v-html:会解析里面的html代码
<p v-html="text"></p>
data: {
text: '<span style="color:red;">zhangsan</span>'
}
2.属性绑定指令
- v-bind:属性绑定指令
例子:
<input type="text" v-bind:placeholder="tips">
<!-- 简写形式-->
<!--<input type="text" :placeholder="tips">-->
data: {
tips: '请输入用户名'
}
由于v-bind:使用次数很多,官方推荐简写形式(:)就是一个冒号
内容渲染指令与属性绑定指令也能进行简单运算
3.事件绑定指令
- v-on:事件绑定指令
<p>{
{count}}</p>
<button v-on:click="addCount">+1</button>
<!--<button @click="addCount">+1</button>-->
var vm = new Vue({
el: '#app',
data: {
count: 1
},
methods: {
addCount(){
this.count += 1
}
}
})
可以在方法里使用this.数据去访问数据
v-on的简写属性@
事件可以传递参数,当不传递参数时,方法默认有一个参数,参数是事件对象,事件对象里面的target属性代表事件源对象,可以利用事件源对象改变背景颜色之类的。
当我们传递参数时,事件对象会被覆盖。那我们就是想传参,又想拿到事件对象,那么传递参数时,必须传递另外的参数,参数是固定写法$event
<button @click="addCount(1,$event)">+1</button>
methods: {
addCount(n,e){
...
}
}
4.数据双向绑定指令
注意:上面的指令都只能数据渲染视图,不能视图渲染数据,只有数据双向绑定才能完成
- v-model
v-model只能和表单数据绑定,因为只有表单元素才能给用户修改
5.条件渲染指令
- v-if
- v-show
区别:v-if:每次都是动态的创建元素或删除元素;v-show只是将其display:none而已
v-if配套使用:v-if,v-else-if,v-else
6.列表渲染指令
- v-for
<div id="app">
<p v-for="(item,index) in list" :key="item.id">id是{