系列文章目录
day2 学习vue2 笔记 过滤器 侦听器 计算属性 axios
day4 vue 学习笔记 组件 生命周期 数据共享 数组常用方法
day5 vue 笔记 axios 动态组件 插槽 自定义指令 ESLints
目录
1、什么是vue
1、构建用户界面
- 用vue往html页面中填充数据，非常方便
2、框架
- 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务逻辑功能
- 要学习vue，就是在学习vue框架中规定的用法
- vue的指令，组件（是对UI结构的复用）、路由，Vuex、vue组件库
只有把上面的掌握，才有开发vue项目的能力
2、vue的两个特性
1、数据驱动视图
- 数据的变化会驱动视图的自动更新
- 好处：程序员只管吧数据维护好，那么页面结构会被vue自动渲染出来
2、双向数据绑定
在网页中，form表单负责采集数据，Ajax负责提交数据
- js 的变化会被自动渲染到页面上
- 页面上表单采集的数据发生变化的时候，会被vue自动获取到，并更新到js数据中
注意：数据驱动视图和双向绑定的底层原理是MVVM（model：数据源，View：视图，ViewModel：vue实例）
3、vue 调试工具 vue-devtoos
ghrome浏览器 安装 vue-devtools:
FireFox 浏览器 安装 cue-devtools:
https://addons.mozilla.org/firefox/downloads/file/3975216/vue_js_devtools-6.2.1.xpi
4、指令的概念
指令（Directives） 是vue为开发者提供的模板语法，用于辅助开发者渲染页面结构的基本内容
vue中的指令按照不同的用途可以分为如下6大类：
- 内容渲染指令
- 属性绑定指令
- 事假绑定指令
- 双向绑定指令
- 条件渲染指令
- 列表渲染指令
注意：指令是vue开发中最基础、最常用、最简单的知识点
1、内容渲染指令
内容渲染指令用来辅助开发者渲染DOM元素的文本内容。常用的内容渲染指令有如下3种：
v-text：
注意：v-text 指令会覆盖元素内默认的值
{{}}: vue提供的 {{ }} 语法，专门用来解决v-text 会覆盖默认文本内容的问题。这种{{}语法的专业名称是插值表达式（英文名为:Mustache)。在实际运用中用的最多，只是内容的占位符不会覆盖原有的内容
在vue提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持JavaScript表达式的运算，例如：
v-html : v-text指令和插值表达式只能渲染纯文本内容。如果要把包含HTML标签的字符串渲染为页面的HTML元素，则需要用到v-html这个指令:
总结：
- v-text 缺点会覆盖元素内部原有内容
- {{ }}：插入表达式，在实际开发中用的最多，只是内容占位符，不会覆盖原有的内容
- v-html ：作用可以把带有标签的字符串，渲染成为真正的HTML内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内容渲染指令</title>
</head>
<body>
<div id="app">
<h1>{{username}}</h1>
<h1 v-text='v_txt_s'>测试v-txt</h1>
<h1 v-html='v_html_s'>v-html</h1>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const cm = new Vue({
el:'#app',
data:{
username:'张三 {{}} 插入表达式，不会覆盖内容',
v_txt_s:'v_txt的使用，会覆盖内容',
v_html_s:'<span style="color: red;">渲染含有html的内容，会覆盖内容</span>'
}
})
</script>
</html>
2、 属性绑定
注意点：差值表达式只能用在元素的内容节点中，不能用在元素的属性节点中，
1、使用 v-bind: 或者 :
正确用法：v-bind:是给元素添加属性的时候使用
一般情况可直接使用英文冒号 “ : ”即可替代 v-bind: 进行: 来进行动态绑定值
在使用v-bind属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：
3、事件绑定指令
vue提供了v-on 事件绑定指令，用来辅助程序员为DOM元素绑定事件监听。语法格式如下
1、v-on：用于绑定事件，简写为 @
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件绑定指令</title>
</head>
<body>
<div id='app'>
<span>cont的值:{{count}}</span>
<br>
<button type="button" v-on:click="add(10)">+1</button>
<button type="button" @click="sub(5)">-1</button>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const vu = new Vue({
el:'#app',
data:{
count:100,
},
// methods的作用是定义事件处理函数
methods:{
add:function(n){
this.count=this.count+n
},
//es6中的语法可以省略 :function()
sub(n){
this.count=this.count-n
}
}
})
</script>
</html> 
在绑定事件的时候可以通过小括号来进行传参。
注意：原始的DOM对象有onclik,oninput,onkeyup等原生事件，替换为Vue的时间绑定形式后，分别为：v-on:click、v-on:input、v-on:keyup ---》 @clik,@input,@keyup ...原始事件将原来的事件加@去掉on即可
//不传参会接收到 事件对象 e ==》是一个鼠标事件
//如果传参了就会覆盖原来的 e
//解决有传参不覆盖e 对象
// vue 提供了一个内置的变量，名字叫 $event ，他是原生的 DOM 的事件对象 e
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件绑定指令</title>
</head>
<body>
<div id='app'>
<span>cont的值:{{count}}</span>
<br>
<span>如果count 是偶数那么将背景颜色改为红色</span>
<button type="button" v-on:click="add(1,$event)">+1</button>
<button type="button" @click="sub">-1</button>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const vu = new Vue({
el: '#app',
data: {
count: 100,
},
// methods的作用是定义事件处理函数
methods: {
add: function(n, e) {
this.count = this.count + n
console.log(e)
if (this.count % 5 == 0) {
e.target.style.backgroundColor = 'red'
} else {
e.target.style.backgroundColor = ''
}
},
//es6中的语法可以省略 :function()
//不传参会接收到 事件对象 e ==》是一个鼠标事件
//如果传参了就会覆盖原来的 e
//解决有传参不覆盖e 对象
// vue 提供了一个内置的变量，名字叫 $event ，他是原生的 DOM 的事件对象 e
sub(e) {
console.log(e)
this.count = this.count - 1
if (this.count % 2 == 0) {
//是偶数
//将button 修改背景颜色
e.target.style.backgroundColor = 'red'
} else {
//是奇数
e.target.style.backgroundColor = ''
}
}
}
})
</script>
</html>
事件修饰符：一般在事件后边
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双向事件绑定</title>
</head>
<body>
<div id="app">
<a href="http://www.baidu.com" @click='show'>百度一下 ,阻止跳转到百度</a>
<br>
<a href="http://www.baidu.com" @click.prevent='show2'>百度一下，vue提供的阻止跳转到百度</a>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const cm = new Vue({
el:'#app',
data:{
},
methods:{
show(e){
console.log('点击了a标签')
e.preventDefault()//阻止页面跳转属性 preventDefault 原生的写法
},
show2(e){
console.log('点击了a标签')
// 简写为在点击事件上写上 @click.pravent 即可
}
}
})
</script>
</html>
常见的时间修饰符
阻止冒泡：点击里面的事假，不向外传播，里面的事件是里面的外面的是外面的
使用方法是在事件后面增加
按键修饰符：
@keyup :按键监听事件，@keyup.按键='方法',即可触发相应的事件，并在方法中处理相应的条件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按键修饰符</title>
</head>
<body>
<div id="app">
<!-- @keyup：键盘事件 ， @keyup.esc==>是按键esc -->
<input @keyup.esc='clearInput'@keyup.enter='commitAjax' type="text"/>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const cm = new Vue({
el:'#app',
data:{},
methods:{
clearInput(e){
console.log("触发了清空方法")
e.target.value=''
},
commitAjax(e){
// 回车处理事件
console.log("回车出发事件")
console.log(e.target)
},
},
})
</script>
</html>4、双向绑定指令
vue提供了在 v-model 双向数据绑定指令，用来辅助开发者在不操作DOM的前提下，快算获取表单的数据。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双向数据绑定</title>
</head>
<body>
<div id="app">
<span>用户名</span>
<input type="text" v-model="user.username"/>
<br>
<span>密码</span>
<input type="password" v-model="user.pswd"/>
<!-- :value 是单项绑定，v-model=是双向绑定 -->
<!-- v-model可以和表单元素使用，和div等元素使用不能使用，因为用户操作不了 -->
<br>
<button @click='login'>登陆</button>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const cm = new Vue({
el:'#app',
data:{
user:{
username:'admin',
pswd:'123456',
},
},
methods:{
login(){//通过this 获取数据
console.log(this.user)
}
},
})
</script>
</html>
- input输入框:type=‘radio’ type='checkbox' type='xxxx'
- select
- textarea
Vue 的指令与过滤器
v-modlel 指令的修饰符
为了方便对用户输入的内容进行处理，vue为 v-model 指令提供了3个修饰符，分别是
5、条件渲染指令
条件渲染指令 用来复制开发者按需控制DOM 的显示与隐藏。缇欧爱安指令有如下两个，分别是：
v-if
v-show
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>条件渲染指令</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="v-if控制" @click="v_if_k_z"/>
<span v-if="flag">隐藏显示的内容 v-if 控制</span>
<hr>
<input type="button" value="v-show控制" @click="show_k_Z"/>
<span v-show="flag_show">隐藏显示的内容 v-if 控制</span>
</div>
</body>
<script type="text/javascript">
const cm = new Vue({
el:'#app',
data:{
// 如果flag 为true测显示 反之则隐藏
flag:true,
flag_show:true,
},
methods:{
show_k_Z(){
if(this.flag_show == true){
this.flag_show = false;
}else{
this.flag_show = true;
}
},
v_if_k_z(){
if(this.flag == true){
this.flag = false;
}else{
this.flag = true;
}
},
},
})
</script>
</html>
1、v-if 的原理是每次动态创建或移除元素从而实现元素的显示与隐藏
v-els-if 指令，顾名思义，充当 v-if 的 else-if 块，可以连续使用：
注意： v-else-if 指令必须配合 v-if 指令使用，否则它将不会被识别！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>条件渲染指令</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="v-if控制" @click="v_if_k_z"/>
<span v-if="flag">隐藏显示的内容 v-if 控制</span>
<hr>
<input type="button" value="v-show控制" @="show_k_Z"/>
<span v-show="flag_show">隐藏显示的内容 v-if 控制</span>
<hr>
<select v-model="if_type">
<option value="">请选择</option>
<option value="A">优秀</option>
<option value="B">良好</option>
<option value="C">一般</option>
</select>
<h1>v-else-if 的简单实例</h1>
<div v-if="if_type =='A'">优秀</div>
<div v-else-if="if_type == 'B'">良好</div>
<div v-else-if="if_type == 'C'">一般</div>
<div v-else>请选择</div>
</div>
</body>
<script type="text/javascript">
const cm = new Vue({
el:'#app',
data:{
// 如果flag 为true测显示 反之则隐藏
flag:true,
flag_show:true,
if_type:'',
},
methods:{
show_k_Z(){
if(this.flag_show == true){
this.flag_show = false;
}else{
this.flag_show = true;
}
},
v_if_k_z(){
if(this.flag == true){
this.flag = false;
}else{
this.flag = true;
}
},
},
})
</script>
</html>2、v-show： 的原理是动态为元素添加或移除 display:none 这个样式，实现元素的显示与隐藏
小结：
1、v-show 的原理是动态为元素添加或移除 display:none 这个样式，实现元素的显示与隐藏
2、v-if 的原理是每次动态创建或移除元素从而实现元素的显示与隐藏
如果平凡的隐藏和显示 v-show 性能会更好；
如果刚进入以免的时候，某些默认不需要被显示，而且后期一不虚要被展示出来，此时 v-if 性能会更好；
在实际开发中，我一般用 v-if
6、列表渲染指令
vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使用 item in items 显示的特殊语法，其中：
items 是带循环的数组
item 是被循环的每一项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表渲染</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<table>
<thead>
<th>索引</th>
<th>id</th>
<th>姓名</th>
<th>性别</th>
</thead>
<tbody>
<tr>
<td>0</td>
<td>0</td>
<td>aa</td>
<td>男</td>
</tr>
<!-- 官方建议：只要要到 v-for 指令，那么一定要绑定一个 :key 属性
而且，尽量把 id 作为 key 的值
官方对key 的值类型，是有要求的，字符串或数字类型
key 的值是不能重复的，否则终端会报错 Duplicate key detected
-->
<tr v-for="(item,index) in list_arr" :key="item.id" :title="item.name + index">
<td>{{index}}</td>
<td>{{item.id}}</td>
<!-- 通过索引获取元素 -->
<td>{{list_arr[index].name}}</td>
<!-- <td>{{item.name}}</td> -->
<td v-if="item.sex == '1'">男</td>
<td v-else-if="item.sex == '0'">女</td>
<td v-else>未知</td>
</tr>
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
const cm = new Vue({
el:"#app",
data:{
list_arr:[
{id:1,name:"张三",sex:'1'},
{id:2,name:"李四",sex:'1'},
{id:3,name:"王五",sex:''},
{id:4,name:"郝建",sex:'0'},
]
},
methods:{
}
})
</script>
</html>v-for 指令还支持一个可选的第二参数，即当前想的索引。语法格式为(item,index) in item；
官方建议：只要要到 v-for 指令，那么一定要绑定一个 :key 属性 而且，尽量把 id 作为 key 的值，key的值类型，是有要求的，字符串或数字类型，key不能重复
总结
1、什么是vue
1、构建用户界面
- 用vue往html页面中填充数据，非常方便
2、框架
- 蹙额框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写子的业务逻辑功能！
- 要学习vue，就是在学习vue框架中规定的用法；
- vue的指令、组件（具体是对UI结构的复用）、路由、vuex、vue组件库；
2、vue 的两个特性
1、数据驱动地图：
- 数据的变化会驱动视图自动更新；
- 好处：程序员只用管吧数据维护好，那么页面结构会被vue自动渲染出来；
2、双向数据绑定
在网页中，form表单负责采集数据、ajax负责提交数据。
- js数据的变化、会被自动渲染到页面上
- 页面上表单采集的数据发生变化的时候，会被vue自动获取到，并更新到js数据中
注意：数据驱动视图和双线工属具绑定的底层原理是MVVM（Mode数据源、View视图、ViewModel就是vue的实例）
3、vue指令
1、内容渲染指令
- v-text 指令的缺点：会覆盖元素内部原有的内容；
- {{}} 插值表达式：在实际开发中用的最多，只是内部的占位符，不会覆盖原有的内容
- v-html 指令的作用：可以吧带有标签的字符串，渲染成真正的HTML内容
2、属性绑定指令
注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中；
- 在vue中，可以使用 v-bind 指令，为元素的属性动态绑定值；
- 简写就是英文的 :
- 在使用v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如
<div :title="'box'+index">这是一个div</div>3、事假绑定
- v-on :简写 @
- 语法格式为：
<button @click="add"></button> methods:{ add(){ //如果在方法中需要修改data中的数据，可以通过this访问到 this.count += 1; } } - $event 的运用场景，如果默认的事件对象e被覆盖（有传参，无传参则可以直接使用），则可以手动传递一个 $event，例如：
<button @click="add(10,$event)"></button> methods:{ add(n,e){ //如果在方法中需要修改data中的数据，可以通过this访问到 this.count += n; } }
1、事件修饰符
- .prevent ：
<a @click:prevent="ssss">连接到....</a> - .stop
<button @clic.stop="XX">按钮</button>
2、按键修饰符
- @keyup：按键修饰符，修饰按键按下松开事件；例如
<input @keyup.esc='clearInput'@keyup.enter='commitAjax' type="text"/>
<!-- 按下esc触发clearInput事件，安下回车键enter触发commitAjax事件，这些事件需要在methods中 -->4、双向绑定事件
v-model
v-model 的修饰符：
| 修饰符 | 作用 | 示例 |
| .number | 自动将用户输入的值转为数值类型 | <input v-model.number='age' /> |
| .trim | 自动过滤用户输入的首尾空白自字符串 | <input v-model.trim='msg'/> |
| .lazy | 在'change'时而非"input" 时更新 | <input v-model.lazy='msg'> |
5、条件渲染指令
1、 v-if ：原理是每次动态创建或移除严肃从而实现元素的显示与隐藏
2、 v-show ：原理是动态为元素添加或移除 display:none 这个杨思，实现元素的显示与隐藏
6、列表渲染指令
v-for 开发者基于一个数组来循环渲染一个列表结构，在使用 v-for 是就需要存在 :key 属性，其值建议为 id ,数据类型必须是字符串或数字类型，必须是唯一的。
key 的注意事项：
- key 的值只能是字符串或数字类型
- key 的值必须具有唯一性 （即：key的值不能重复）
- 建议把数据项 id 属性的值作为key的值（因为 id 属性的值是具有唯一性）
- 使用 index 的值当做 key 的值没有意义（因为 index 的值不具有唯一性）
- 建议使用 v-for 指令时一定要指定key 的值（既提升了虚拟，有防止了列表状态紊乱）
162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
