目录
(1)vue.js :本质就是一个js 核心类库【跟咱使用的其他组件插件而安装他们】:
(1)举例:我们的图片路径、标签的样式、类选择器等等不希望写死,希望实现动态绑定,从vue实例中获取数据:
2,事件监听 v-on (简写 @):常用的就是监听点击事件【也可以监听自定义事件】
□ 我们可以将事件指向表达式,也可以是一个在methods中定义的函数
□ v-on修饰符:① .stop ② .prevent ③ .native ④ .once 等
3,v-if、v-else-if、v-else 【v-show】
② v-model:checkbox (单个勾选框:v-model即为布尔值。当是多个复选框时,因为可以选中多个,所以对应的data中属性是一个数组)
■ v-model的修饰符:① lazy ② number ③ trim
(1-3)js 中数组的高阶函数 map、filter、reduce:
■ filter:过滤(通过回调函数拿到当前数组的每个元素)
■ reduce:汇总(通过回调函数拿到当前数组的每个元素)
遇到不熟悉的可以先看一下官网,然后再看一下一些别人写的优质博文
vue中文官网
一、简单介绍:
(1)vue.js :本质就是一个js 核心类库【跟咱使用的其他组件插件而安装他们】:
■ 安装方式:
- CDN引入【也是通过js标签的src】
- 下载引入 【也是通过js标签的src】
- NPM安装管理
■ 方式一:直接CDN引入
□ 你可以选择引入开发环境版本还是生产环境版本
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
■ 方式二:下载和引入
开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js
■ 方式三:NPM安装
后续通过webpack和CLI的使用,我们使用该方式。
❀ 学习过程一开始就是通过下载引入:
<script type="text/javascript" src="../js/vue.min.js"></script>
(2)小demo了解一下vue.js:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color: goldenrod;
}
.line{
font-style:italic;
}
</style>
</head>
<body>
<div id="app" >{{message}}
<!-- <button @click="{{message + ''">+文字</button>-->
<a :class="{'active':isActive,'line':isLine }">没毛病</a>
<!-- 封装成一个getClass函数 -->
<!-- <div class="tt" :class="getClass()">谢谢</div>-->
<!-- <button @click="btnActive">变变变</button>-->
<div class="tt" :class="getClass()">哈哈哈</div>
</div>
</body>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message:'漂亮',
isActive: true,
isLine: true,
active: 'active',
line: 'line'
},
methods: {
btnActive: function () {
this.isActive = !this.isActive;
},
//对象
// getClass: function () {
// return{active: this.isActive, line: this.line}
// }
//数组
getClass: function () {
return [this.active, this.line];
}
}
});
</script>
</body>
</html>
- 阅读script标签中的代码,会发现创建了一个Vue对象。
- 创建Vue对象的时候,传入了一些options:{}
- {}中包含了el属性:该属性决定了这个Vue对象挂载到哪一个元素上,很明显,我们这里是挂载到了id为app的元素上
- {}中包含了data属性:该属性中通常会存储一些数据
- 这些数据可以是我们直接自定义出来的。
- 也可能是来自网络,从服务器加载的。
(3)响应式:
■ “响应式”,是指当数据改变后,Vue 会通知到使用该数据的代码(例如这里的界面的dom元素)。
■ 效果:就是在界面上可以直观的看见-----数据改变,界面变成使用改变过的数据。
■ 原理:可以看一下官网+优质博文分析
(4)简单了解一下vue的生命周期
二、基本常用的知识:
- 插值操作 {{ }} 将值插入到我们模板的内容当中
- 绑定属性 v-bind (简写:)
- 事件监听 v-on (简写 @)
- v-if、v-else-if、v-else 【v-show】、v-for
- v-model 表单的双向绑定
- 条件判断
- 循环遍历
- 计算属性 computed
□原因:计算属性会进行缓存,如果多次使用时,计算属性只会调用一次。
9.监听属性 watch
10.过滤属性 filters
□ html 页面的使用:参数 | 过滤函数名
1、绑定属性 v-bind (简写:)
☆ 通过绑定属性(数据可以从vue实例中获取)
(1)举例:我们的图片路径、标签的样式、类选择器等等不希望写死,希望实现动态绑定,从vue实例中获取数据:
(2)v-bind绑定class
■ 绑定class有两种方式:
- 对象语法
- 数组语法
● 绑定方式:对象语法
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
(和普通的类同时存在,并不冲突)
- 我们可以利用v-bind:style来绑定一些CSS内联样式【跟绑定class差不多,只是要记得那种属性有连字符- 要给它加单引号‘’】
2,事件监听 v-on (简写 @):常用的就是监听点击事件【也可以监听自定义事件】
□ 我们可以将事件指向表达式,也可以是一个在methods中定义的函数
● v-on:click可以写成@click
□ 事件指向method 带参数问题:
□ v-on修饰符:① .stop ② .prevent ③ .native ④ .once 等
3,v-if、v-else-if、v-else 【v-show】
(1) v-if、v-else-if、v-else
----缓存问题:Vue在进行DOM渲染时,出于性能考虑,会尽可能的复用已经存在的元素,而不是重新创建新的元素。
-----如果我们在有输入内容的情况下,切换了类型,我们会发现文字依然显示之前的输入的内容。
------解决:加上唯一的key属性:
(2) v-show:
□ 当需要在显示与隐藏之间切片很频繁时,使用v-show (本质上就是使用了cloak)
□ 当只有一次切换时,通过使用v-if
(3)v-for 遍历数组、遍历对象:
语法格式:v-for=(item, index) in items
4,v-model 双向绑定的本质
(① 绑定input回显value属性=message ② 监听输入事件,同时事件指向表达式【dom中输入的值赋值给message】)
<input type="text" v-model="message">
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">
① v-model:radio
② v-model:checkbox (单个勾选框:v-model即为布尔值。当是多个复选框时,因为可以选中多个,所以对应的data中属性是一个数组)
③v-model:select
■ v-model的修饰符:① lazy ② number ③ trim
5,计算属性 computed
□ 原因:计算属性会进行缓存,如果多次使用时,计算属性只会调用一次。【缓存作用】
--------- 使用计算属性,可以让我们的代码变得更加简洁(将一大串的方法调用,封装到计算属性中去【计算属性本质就是一个对象(省略了setter方法)】)
三、❀ 辅助函数和js数组的高阶函数
(1-1)响应式函数 (数组更新检测)
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
(1-2)对象更新检测
- 使用Vue.set(object, propertyName, value) 或者 实例.$set(object, propertyName, value);
例如:Vue.set(this.stu,’love’,’sing’);
2.使用Object.assign( )
例如:this.stu = Object.assign({ }, this.stu, {
name: ‘玉山’,
love:‘money’
} )
(1-3)js 中数组的高阶函数 map、filter、reduce:
■ filter:过滤(通过回调函数拿到当前数组的每个元素)
遍历数组,对元素通过设定某种条件,不满足的元素过滤掉了,最终返回经过过滤的数组。
● 要求回调函数返回值是布尔值,为true时,当前的元素添加到内部数组中,为false则过滤掉。
// 1.filter函数的使用(让原数组中元素值小于10的被过滤掉)
let newNums = nums.filter(function (n) {
return n < 10
})
■ map:映射 (通过回调函数拿到当前数组的每个元素)
遍历数组,对元素设定某种处理条件(例如增删改查操作),最终返回经过处理的数组。
● 数组调用map函数,返回值是经过map函数的参数---回调函数处理过的新数组。
● 回调函数的参数(当前数组的元素)
//map函数的使用:(让原数组中的每个元素值翻倍)
let new2Nums = newNums.map(function (n) {
return n * 2
})
■ reduce:汇总(通过回调函数拿到当前数组的每个元素)
遍历数组,对元素进行“累加”,最终返回“累加结果”。
● 数组调用reduce函数(作用就是汇总,从初始值开始不断的“累加”),
所以一般数组调用reduce函数需要有两个参数【第一个是回调函数,第二个是初始值】
● 回调函数(“累加器”--为了实现“累加”作用)往往也是需要两个参数的(+运算符的作用对象就是2个呀,例如1+2(+两边各有一个对象)哈哈哈):
第一个参数:preValue 前一次汇总后return的值, 第二个参数:n 当前元素
// 3.reduce函数的使用(对数组中所有的所有元素进行累加)
//new2Nums是一个数组
let total = new2Nums.reduce(function (preValue, n) {
return preValue + n
}, 0)
<div id="app">
<div>
总价格:{{total | getPrice}}
</div>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
books: [
{name: '算法导论1', date:'2018-1-1', price:100.5099, count:'1'},
{name: '算法导论2', date:'2018-1-1', price:100.9988, count:'1'},
{name: '算法导论3', date:'2018-1-1', price:100.98, count:'1'},
{name: '算法导论4', date:'2018-1-1', price:100.00, count:'1'},
]
},
computed: {
total(){
return this.books.reduce(function (preValue, n) {
return preValue + n.count * n.price;
}, 0);
}
},
filters: {
getPrice(price){
// return '¥' + parseFloat(price).toFixed(2) ;
return '¥' + price.toFixed(2) ;
}
}
</script>