------------------------------------------❀持续更新❀---------------------------------------------------------
第一章 vue基础
vue的指令
01.v-cloak指令用法
使用v-clock解决插值表达式闪烁的问题（解决在网络慢的情况下先出现了{{}}，再渲染数据的情况）
<style>
[v-block]{
display:none;
}
</style>
<p v-clock>{{ msg }}</p>
02.v-cloak和v-text的区别
v-text没有闪烁问题，但是会覆盖元素中原本的内容
<p v-cloak>++++++++ {{ msg }} ----------</p>
<p v-text="msg">==================</p>
v-clock 会连同符号一起显示： ++++++++ 123----------
v-text 会把等于号覆盖只显示msg: 123
03.什么是双向数据绑定，双向绑定的使用场景
什么是双向数据绑定：
- 当数据发生变化的时候，视图也就发生变化
- 当视图发生变化的时候，数据也会跟着同步变化
双向绑定的使用场景：
v-model是一个指令，限制在 <input>、<select>、<textarea>、 components（组件） 中使用
04.事件函数的调用，事件函数参数传参
如果需要传递参数就使用say(),否则直接写say更简洁一些
如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event
05.事件修饰符
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次
<!-- 使用 .stop 阻止冒泡，执行btnHandler不会连同div1Handler一起执行 -->
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
<!-- 使用 .prevent 阻止默认行为，不会再跳转到百度页面 -->
<a href="http://www.baidu.com" @click.prevent="linkClick">跳转百度</a>
<!-- 使用.capture 实现捕获触发事件的机制 -->
<!-- 点击直接执行div1Handler，不会执行btnHandler -->
<div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
<!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
<!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 -->
<div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
<!-- 使用.once 只触发一次事件处理函数，第一次点击能阻止跳转百度，第二次就不能了
<a href="http://www.baidu.com" @click.prevent.once="linkClick">跳转百度</a>
06.常用按键修饰符
.enter => enter键
.tab => tab键
.delete (捕获“删除”和“退格”按键) => 删除键
.esc => 取消键
.space => 空格键
.up => 上
.down => 下
.left => 左
.right => 右
用法如下：
07.表单域修饰符用法
<div id="app">
<input type="text" v-model.number='age'>
<input type="text" v-model.trim='info'>
<input type="text" v-model.lazy='msg'>
<div>{{msg}}</div>
<button @click='handle'>点击</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
age: '',
info: '',
msg: ''
},
methods: {
handle: function(){
//如果不使用修饰符，假如age是2，那么打印结果为213，变成字符串拼接了，加了修饰符结果为：15
// console.log(this.age + 13)
// console.log(this.info.length)
}
}
});
</script>
trim：直白些就是当你在input 输入框内输入了多余的空格，它能将你收尾的空格去除；
lazy：转换成change事件之后，就是在输入框失去焦点后才触发事件，而不是每输入一个字符就触发一次；
08.自定义指令之获取元素焦点
Vue.directive('focus', {
inserted: function(el){
// el表示指令所绑定的元素
el.focus();
}
});
<input type="text" v-focus>
//这样页面一打开，输入框就自动获取焦点，不用再点击一次input
09.数组相关API–变异方法/替换数组
-
变异方法(修改原有数据，数据是响应式的，调用方法之后页面的数组也会随之发生变化)
⚫ push() ----向数组的末尾添加元素
⚫ pop() -----删除数组中的最后一个元素
⚫ shift() ----删除数组中的第一个元素
⚫ unshift() -----向数组的开头添加元素
⚫ splice() ----去除数组中的指定数据
⚫ sort() ----数组排序
⚫ reverse() ----数组反转 -
替换数组(生成新的数组，不会影响原始数组，页面展示的还是原始的，所以需要重新赋值才能发生变化，this.list = this.list.slice(0,2)😉
⚫ filter()
⚫ concat()
⚫ slice() -
修改响应式数据
⚫ Vue.set(vm.items, indexOfItem, newValue)
⚫ vm.$set(vm.items, indexOfItem, newValue)
① 参数一表示要处理的数组名称
② 参数二表示要处理的数组的索引
③ 参数三表示要处理的数组的值 -
案例：列表的增删改
<div id="app">
<label for="id">编号：</label>
<input type="text" id="id" v-model='id' >
<label for="name">名称： </label>
<input type="text" id="name" v-model='name'>
<button @click='handle' >增加</button>
</div>
<tbody>
<tr :key='item.id' v-for='item in books'>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<a href="" @click.prevent='toEdit(item.id)'>修改</a>
<a href="" @click.prevent='deleteBook(item.id)'>删除</a>
</td>
</tr>
</tbody>
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
books: [{
id: 1,
name: '三国演义',
date: 2525609975000
},{
id: 2,
name: '水浒传',
date: 2525609975000
},{
id: 3,
name: '红楼梦',
date: 2525609975000
}]
},
methods: {
handle: function(){
// 添加图书
var book = {};
book.id = this.id;
book.name = this.name;
this.books.push(book)
},
toEdit: function(id){
// 根据ID查询出要编辑的数据
var book = this.books.filter(function(item){
return item.id == id;
});
// 把获取到的信息填充到表单
this.id = book[0].id;
this.name = book[0].name;
// 编辑图书，就是根据当前的ID去更新数组中对应的数据
this.books.some((item) => {
if(item.id == this.id) {
item.name = this.name;
// 完成更新操作之后，需要终止循环
return true;
}
},
deleteBook: function(id){
// 删除图书
// 根据id从数组中查找元素的索引
// var index = this.books.findIndex(function(item){
// return item.id == id;
// });
// 根据索引删除数组元素
// this.books.splice(index, 1);
// -------------------------
// 方法二：通过filter方法进行删除
this.books = this.books.filter(function(item){
return item.id != id;
});
}
},
});
10. 组件命名方式
⚫ 短横线方式
Vue.component('my-component', { /* ... */ })
⚫ 驼峰方式
Vue.component('MyComponent', { /* ... */ })
第二章 webpack
01.webpack指令
- 删除全局webpack-cli：
npm uninstall -g webpack-cli - 删除本地webpack-cli:
npm uninstall webpack-cli - 删除全局webpack
npm uninstall -g webpack - 删除本地webpack
npm uninstall webpack - 全局安装webpack:（官网不推荐）
npm install --global webpack - 本地安装webpack:
npm install --save-dev webpack - 本地安装webpack -cli (使用 webpack 4+ 版本)
npm install --save-dev webpack-cli - 检查webpack是否安装成功,出现版本号为成功。
如果是全局安装则：webpack -v
如果是本地安装则：node_modules.bin\webpack -v (注意是斜杆的方向)
02.webpack益处
webpack是一个流行的前端项目构建工具(打包工具)，可以解决当前web开发中所面临的困境。
webpack提供了友好的模块化支持,以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。
web开发中所面临的困境：
第三章 vue-cli（vue脚手架）
01.安装与查看版本号
安装：
npm install -g @vue/cli
查看版本号：
vue -V
02.创建vue项目的方式一：基于交互式命令行
1.在你想要放置项目的路径下打开cmd,执行命令：
vue create 项目名称
2.执行完命令后会出现两个选项，点击上下箭头可进行切换，然后回车进入下一步
- default：默认的帮你搭配好功能的，一键创建完毕；
- Manually：手动选择安装自己所需的功能，这里我选择手动安装，好自由搭配自己想要的；
3.上图展示的是供你选择的功能，打*号的代表安装，空的括号代表不安装，点击空格键选中你需要的，然后回车下一步吧
4.接下来会让你选择路由模式，这里我选择哈希模式的路由，所以执行命令n
5.然后需要再选择下ESLint的语法版本，这里推荐选择标准版，如下
6.默认保存时进行ESLint语法校验，所以选择第一项
7.再然后会询问你， Babel, ESLint等等配置文件是单独创建还是全部归于package.json中，为了更好的维护配置文件，选择第一个选项
8.最后，提示你是否将你刚刚选择的配置保存为一个模板，这样下次你就不用再重复这些步骤，直接使用模版即可，y:是 n:否
9.下载完成之后，执行命令cd vue_proj_01进入到项目路径下，然后再执行命令npm run serve运行项目
10.成功创建之后，你只需要在浏览器打开 http://localhost:8080/，就可以看到你刚创建的项目啦
03.创建vue项目的方式二：基于图形化界面
介绍一种更为直观的创建vue项目的方法：
1.打开命令窗口执行命令 vue ui 会在浏览器打开一个创建项目的图形化界面
2.不介绍了，我发现这个项目创建只能默认在C盘，我不愿意，所以结束。。。。
04.分析项目结构
05.vue脚手架自定义配置
1.在项目的根目录创建文件：vue.config.js
2.配置你所需要的配置项，例如端口号，启动项目时是否自动打开网页等等，如下所示：
3.更多配置内容，例如配置项目代理等请移步官网
第四章 vuex基础
01.使用 Vuex 统一管理状态的好处
① 能够在 vuex 中集中管理共享的数据，易于开发和后期维护
② 能够高效地实现组件之间的数据共享，提高开发效率
③ 存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步
02. Vuex 的基本使用
- 安装 vuex 依赖包
npm install vuex --save
- 导入 vuex 包
import Vuex from 'vuex'
Vue.use(Vuex)
- 创建 store 对象
const store = new Vuex.Store({
// state 中存放的就是全局共享的数据
state: { count: 0 }
}
- 将 store 对象挂载到 vue 实例中
new Vue({
el: '#app',
render: h => h(app),
router,
// 将创建的共享数据对象，挂载到 Vue 实例中
// 所有的组件，就可以直接从 store 中获取全局的数据了
store
})
03. Vuex 的核心概念: State / Mutation / Action /Getter
(1) State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储。
// 创建store数据源，提供唯一公共数据
const store = new Vuex.Store({
state: { count: 0 }
})
组件访问 State 中数据的第一种方式：
this.$store.state.全局数据名称
组件访问 State 中数据的第二种方式：
// 1. 从 vuex 中按需导入 mapState 函数
import { mapState } from 'vuex'
通过刚才导入的 mapState 函数，将当前组件需要的全局数据，映射为当前组件的 computed 计算属性：
// 2. 将全局数据，映射为当前组件的计算属性
computed: {
...mapState(['count'])
}
(2)Mutation 用于变更 Store中 的数据。
① 只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据
② 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。
// 定义Mutation
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
add(state) {
// 变更状态
state.count++
}
}
})
// 触发mutation
methods: {
handle1() {
// 触发 mutations 的第一种方式
this.$store.commit('add')
}
}
可以在触发 mutations 时传递参数：
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
addN(state, step) {
// 变更状态
state.count += step
}
} })
// 触发mutation
methods: {
handle2() {
// 在调用 commit 函数，
// 触发 mutations 时携带参数
this.$store.commit('addN', 3)
}
}
this.$store.commit() 是触发 mutations 的第一种方式，触发 mutations 的第二种方式：
// 1. 从 vuex 中按需导入 mapMutations 函数
import { mapMutations } from 'vuex'
通过刚才导入的 mapMutations 函数，将需要的 mutations 函数，映射为当前组件的 methods 方法：
// 2. 将指定的 mutations 函数，映射为当前组件的 methods 函数
methods: {
...mapMutations(['add', 'addN'])
}
(3)Action:用于处理异步任务
如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发 Mutation 的方式间接变更数据。
// 定义 Action
const store = new Vuex.Store({
// ...省略其他代码
mutations: {
add(state) {
state.count++
}
},
actions: {
addAsync(context) {
setTimeout(() => {
context.commit('add')
}, 1000 }
}
})
// 触发 Action
methods: {
handle() {
// 触发 actions 的第一种方式
this.$store.dispatch('addAsync')
}
}
触发 actions 异步任务时携带参数：
// 定义 Action
const store = new Vuex.Store({
// ...省略其他代码
mutations: {
addN(state, step) {
state.count += step
}
},
actions: {
addNAsync(context, step) {
setTimeout(() => {
context.commit('addN', step)
}, 1000)
}
}
})
// 触发 Action
methods: {
handle() {
// 在调用 dispatch 函数，
// 触发 actions 时携带参数
this.$store.dispatch('addNAsync', 5)
}
}
this.$store.dispatch() 是触发 actions 的第一种方式，触发 actions 的第二种方式：
// 1. 从 vuex 中按需导入 mapActions 函数
import { mapActions } from 'vuex'
通过刚才导入的 mapActions 函数，将需要的 actions 函数，映射为当前组件的 methods 方法：
// 2. 将指定的 actions 函数，映射为当前组件的 methods 函数
methods: {
...mapActions(['addASync', 'addNASync'])
}
(4) Getter 用于对 Store 中的数据进行加工处理形成新的数据
① Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。
② Store 中数据发生变化，Getter 的数据也会跟着变化。
// 定义 Getter
const store = new Vuex.Store({
state: {
count: 0
},
getters: {
showNum: state => {
return '当前最新的数量是【'+ state.count +'】'
}
}
})
使用 getters 的第一种方式：
this.$store.getters.名称
使用 getters 的第二种方式：
import { mapGetters } from 'vuex'
computed: {
...mapGetters(['showNum'])
}
扫一扫
1299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
