Vue基础学习笔记入门必学
作者：互联网
Vue入门学习
1.Vue入门
1.1什么是Vue
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。
- Vue 的核心库只关注视图层，也就是只处理页面。
- Vue提供的一套JS框架，通常称为vue全家桶。
- 渐进式，也就是说可以在已有的项目中部分使用Vue，逐渐过渡到整个项目都使用Vue，最后完全使用Vue全家桶来完成整个项目。可以在HTML导入js当成jquery使用、也可以使用vue全家桶进行单页开发。
1.2MVVM模式
- MVVM（Model-View-ViewModel）是对 MVC（Model-View-Control）和 MVP（Model-View-Presenter）的进一步改进。
- View：视图层（UI 用户界面）
- ViewModel：业务逻辑层（一切 js 可视为业务逻辑）
- Model：数据层（存储数据及对数据的处理如增删改查）
- MVVM 将数据双向绑定（data-binding）作为核心思想，View 和 Model 之间没有联系，它们通过 ViewModel 这个桥梁进行交互。
1.3入门案例
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
message : '我只是一个提示信息'
}
})
</script>
2.基本使用
2.1 插值表达式：{{}}
{{插值表达式}}
1.支持data区域数据的显示。例如：{{message}}
2.支持表达式的计算。例如：{{1+2+3}} 、 {{'Hello' + ' World'}}
3.支持函数的调用。例如：{{'Hello'.split('')}}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 读取data区域数据 -->
{{msg1}} <br/>
<!-- 表达式计算 -->
{{msg1 + msg2}} <br/>
<!-- 调用函数 -->
{{msg2.split('')}} <br/>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
msg1 : 'Hello',
msg2 : 'World'
}
})
</script>
2.2 标签体操作：v-text&v-html
<!-- v-text 以【文本】方式处理标签体 -->
<标签 v-text=””></标签>
<!-- v-html 以【html标签】方式处理标签体 -->
<标签 v-html=””></标签>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 以【文本】处理标签体 -->
<div v-text="msg1"></div>
<div v-text="msg2"></div>
<!-- 以【html代码】处理标签体 -->
<div v-html="msg1"></div>
<div v-html="msg2"></div>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
msg1 : '普通文本',
msg2 : `<a href='http://www.baidu.com'>超链接</a>`
}
})
</script>
2.3 循环语句: v-for
<!--完整写法-->
<标签 v-for=”(变量,索引) in 数组|集合”>
{{变量}} , {{索引}}
</标签>
<!--简化写法-->
<标签 v-for=”变量 in 数组|集合”>
</标签>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>普通数组数据遍历</h2>
<span v-for="(un,index) in arr">
{{index}} {{un}} <br/>
</span>
<h2>对象数组数据遍历</h2>
<table border="1">
<tr>
<td>编号</td>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr v-for="(student,index) in list">
<td>{{index + 1}}</td>
<td>{{student.id}}</td>
<td>{{student.username}}</td>
<td>{{student.age}}</td>
</tr>
</table>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
arr: ['张三','李四','王五'], //普通数组数据
list: [ //对象数组数据
{ id: 's001', username: '张三', age: '18'},
{ id: 's002', username: '李四', age: '21'},
{ id: 's003', username: '王五', age: '25'},
]
}
})
</script>
2.4 属性绑定–普通属性： v-bind:xxx
<!--完整写法-->
<标签 v-bind:属性名=””></标签>
<!--省略写法, v-bind可以省略 -->
<标签 :属性名=””></标签>
1.如果需要显示data区域的数据,直接写. 例如: url
2.如果需要显示普通字符串,需要单引号. 例如: ‘?username=jack’
3.data区域的数据和普通字符串可以通过+连接
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>超链接展示</h2>
<a href="url">第1个链接</a> <br/>
<a v-bind:href="url">第2个链接</a> <br/>
<a :href="url">第3个链接</a> <br/>
<a :href="url + '?uid=' + uid">第3个链接</a> <br/>
<h2>下拉列表展示</h2>
<select >
<option value="">--请选择--</option>
<option v-for="(cls,index) in list" :value="cls.id">{{cls.name}}</option>
</select>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
url: 'httt://www.czxy.com',
uid: 'u001',
list: [
{ id: 'c001', name: 'Java12班', desc: '。。。。'},
{ id: 'c002', name: 'Java34班', desc: '。。。。'},
{ id: 'c003', name: 'Java56班', desc: '。。。。'},
]
}
})
</script>
2.5 属性绑定–class属性: v-bind:class
方式1: 字符串,必须使用单引号
<标签 v-bind:class=”’类名’”></标签>
方式2: 对象,key是类名; value是Boolean值,是否显示. (对象数据可以在data区域)
<标签 v-bind:class=”{’类名’:true , ’类名2’ : false}”></标签>
方式3: 数组,相当于’方法2’的简化版,所有都是true
<标签 v-bind:class=”[’类名’, ’类名2’]”></标签>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
<style>
.myClass {
height : 10px; /*高度*/
width : 300px; /*宽度*/
border: 1px solid #000; /*边框：粗细 样式 颜色*/
background-color: #f00; /*背景色*/
}
.myClass2 {
width : 600px;
}
</style>
</head>
<body>
<div id="app">
<h2>样式展示</h2>
<div class="myClass"></div>
<div v-bind:class="mc"></div>
<div v-bind:class="'myClass'"></div>
<div class="myClass myClass2"></div>
<div v-bind:class="['myClass','myClass2']"></div>
<div v-bind:class="{'myClass': true,'myClass2': true}"></div>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
mc: 'myClass',
}
})
</script>
案例：隔行换色
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
<style>
.cls1 {
background-color: #999;
}
.cls2 {
background-color: #ddd;
}
</style>
</head>
<body>
<div id="app">
<h2>隔行换色展示</h2>
<table border="1">
<tr>
<td>编号</td>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr v-for="(student,index) in list" v-bind:class="student.cls">
<td>{{index + 1}}</td>
<td>{{student.id}}</td>
<td>{{student.username}}</td>
<td>{{student.age}}</td>
</tr>
</table>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
list: [ //对象数组数据
{ id: 's001', username: '张三', age: '18', cls : 'cls1'},
{ id: 's002', username: '李四', age: '21', cls : 'cls2'},
{ id: 's003', username: '王五', age: '25', cls : 'cls1'},
{ id: 's004', username: '王五', age: '25', cls : 'cls2'},
]
}
})
</script>
2.6 属性绑定–style属性: v-bind:style
方式1: 对象, key样式名, value样式值 .
//key和value需要使用单引号
//key可以不使用单引号,需要将含-命名的属性进行驼峰命名 例如:abc-def 写成 abcDef
<标签 v-bind:style=”{’样式名’:’样式值’, ’样式名2’ : ’样式值2’}”></标签>
方式2: 数组, 运行绑定多个对象
<标签 v-bind:class=”[对象名, 对象名2]”></标签>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--
1.key和value需要使用单引号
2.key可以不使用单引号,需要将含-命名的属性进行驼峰命名，例如:font-size 写成 fontSize
3.value如果不使用引号，表示变量
-->
<div v-bind:style="{'background-color':'#f00',fontSize:'40px','text-align': align}">测试数据</div>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
align : 'center'
}
})
</script>
2.7 控制语句: v-show & v-if
<!--控制标签是否显示, 通过display控制显示或隐藏 -->
<标签 v-show=”true|false”></标签>
<!--控制标签是否存在 -->
<标签 v-if=”true|false”></标签>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
变量值：{{isShow}} <br/>
<!-- 通过样式display控制是否显示 -->
<div v-show="isShow">show控制的内容</div>
<!-- 通过html源码是否存在，控制是否显示 -->
<div v-if="isShow">if控制的内容</div>
<input type="button" @click="isShow=!isShow" value="切换">
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
isShow : true
}
})
</script>
2.8 表单数据绑定: v-model
- 通过 v-model 可以完成数据双向绑定.
- 数据data区域 绑定 视图区域, 如果data数据区域的数据发生改变, 自动更新表单标签的显示
- 视图区域 绑定 数据data区域 , 如果表单标签的数据发生改变,自动更新data区域存放的数据.
- <表单元素标签 v-model=”data区域属性名”>
- 案例：数据绑定–变量
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
用户名：{{username}} <br/>
<input type="text" v-model="username">
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
username : 'jack'
}
})
</script>
- 案例：数据绑定–对象
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
用户名 : <input type="text" v-model="user.username"> <br/>
密码 : <input type="password" v-model="user.password"> <br/>
性别 : <input type="radio" v-model="user.gender" value="1">男
<input type="radio" v-model="user.gender" value="0">女 <br/>
显示内容： {{user}}
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
user: {
username : '',
password : '',
gender : ''
}
}
})
</script>
3. 事件操作
3.1 事件绑定: v-on:事件名
- vue 运行通过 v-on:xxx 给标签绑定指定的事件
<标签 v-on:事件名=”函数名”></标签>
<!--简化写法-->
<标签 @事件名=”函数”></标签>
<!--常见事件-->
<标签 v-on:click=”函数”> </标签> //点击事件
<标签 v-on:focus=”函数”> </标签> //获得焦点事件
<标签 v-on:blur=”函数”> </标签> //失去焦点事件
- 在绑定事件时,使用到了”函数”,需要在vue中通过methods 定义函数
<script>
new Vue({
el: '#app',
methods: {
函数名1 : function(){...}, //匿名函数
函数名2 : () => {...}, //箭头函数
函数名3(){...} //简写方式
},
})
</script>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" v-on:click="show" value="第1个按钮"> <br/>
<input type="button" @click="show2" value="第2个按钮"> <br/>
<input type="button" @click="show3" value="第3个按钮"> <br/>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
methods: {
show : function() {
alert('匿名函数')
},
show2 : () => {
alert('箭头函数')
},
show3() {
alert('函数简写')
}
},
})
</script>
3.2 事件绑定–this关键字
- 在vue中,某一个成员需要使用另一个成员,需要通过”this.”进行引用
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
结果： {{isShow}} <br/>
<input type="button" v-on:click="change" value="切换"> <br/>
<input type="button" v-on:click="show" value="调用"> <br/>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data:{
isShow: true
},
methods: {
change() {
this.isShow = !this.isShow
},
show() {
// 调用chang()函数
this.change()
}
},
})
</script>
3.3 案例：查询所有
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<div id="app">
<input type="button" @click="findAll" value="查询"> <br/>
<table border="1">
<tr>
<td>编号</td>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<!-- 遍历数据 -->
<tr v-for="(student,index) in list">
<td>{{index + 1}}</td>
<td>{{student.id}}</td>
<td>{{student.name}}</td>
<td>{{student.age}}</td>
<td>{{student.sex}}</td>
</tr>
</table>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data:{
list: []
},
methods: {
async findAll() {
// ajax 查询
var url = "http://data.javaliang.com/data/jack/student"
let { data } = await axios.get(url)
// 将结果存放到data区域
this.list = data.data
}
},
})
</script>
3.4 事件修饰符
- vue 通过事件修饰符对js事件进行细节控制。
<标签 v-on:事件.修饰符=”函数”>
</标签> - 常见的修饰符有
| 修饰符 | 描述 |
|---|---|
| .prevent | 阻止浏览器默认行为 |
| .stop | 阻止浏览器事件冒泡 |
| .once | 只触发1次 |
- 案例：阻止超链接的默认行为
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<a href="http://www.czxy.com" @click.prevent="go">访问学校官网</a>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
methods: {
go() {
alert('我执行了后，默认跳转到学校官网！添加prevent后将不跳转。')
}
},
})
</script>
3.5 按键修饰符
- vue允许为 v-on 在监听键盘事件时, 使用按键修饰符, 约束事件的触发
- 键盘事件: keyup和keydown
<标签 v-on:事件.修饰符=”函数” >
</标签> - 常见按键修饰符
| 按键修饰符 | 描述 |
|---|---|
| .enter | //回车键 |
| .tab | //Tab键 |
| .delete (捕获 “删除” 和 “退格” 键) | //Backspace键或Delete键 |
| .esc | //Esc键 |
| .space | //空格键 |
| .up | //上键 |
| .down | //下键 |
| .left | //左键 |
| .right | //右键 |
| .ctrl | //Ctrl键 |
| .alt | //Alt键 |
| .shift | //Shift键 |
- 案例：文本框回车触发函数
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 文本框 通过 v-model 绑定数据
在通过keyup监听键盘事件，并在回车(enter)时触发 -->
<input type="text" v-model="keyword" @keyup.enter="show">
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data:{
keyword: ''
},
methods: {
show() {
console.info( this.keyword )
}
}
})
</script>
4. 生命周期&5.计算属性和监听器&6.组件
标签：el,Vue,入门,app,必学,绑定,new,data 来源： https://blog.csdn.net/v3424/article/details/121475382