系列文章目录
day2 学习vue2 笔记 过滤器 侦听器 计算属性 axios
day4 vue 学习笔记 组件 生命周期 数据共享 数组常用方法
day5 vue 笔记 axios 动态组件 插槽 自定义指令 ESLints
文章目录
前言
提示：vue2的基础学习：
一、vue的指令与过滤器
过滤器（Filters）是vue为卡发着提供的功能，常用与文本格式化。过滤器可以用在两个地方：差值表达式和 v-bind 属性绑定
过滤器应该被添加在JavaScript 表达式的尾部，由“管道符”进行调用，实例代码如下：
私有过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue 的指令过滤器</title>
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
<span>message 的值是：{{message | capi}}</span>
</div>
</body>
<script>
const cm = new Vue({
el: '#app',
data: {
message:'ABC',
},
methods:{
},
// 过滤器函数，必须定义到 filters 节点之下
// 过滤器本质就是一个函数
filters:{
// 注意 过滤器函数先中的 val 永远都是 “管道符 | ” 前面的那个值
capi(val){
// 过滤器中一定需要有返回值
//charAt 将这方法接受所有值，表示字符串中把索引对应的字符，获取出来
console.log()
// toLowerCase() 将字符串转为小写
// toUpperCase() 将字符串转为大写
var fist = val.charAt(0).toLowerCase()
// substring 截取字符串 [)
fist += val.substring(1,val.length)
return fist;
},
},
})
</script>
</html>
注意：
1、要定义到 filters 节点下，本质是一个函数；
2、在过滤器函数中，一定要有 return 值；
3、在过滤器的形参中，就可以“管道符”前面的的那个值；
4、如果全局过滤器与私有的过滤器名称相同，则按照就近原则，调用私有过滤器；
全局过滤器和私有过滤器
在filters 节点下定义的过滤器称为“私有过滤器”，因为他只能在当前 VM实例所在的 el 区域使用。如果希望在多个Vue实例之间共享过滤器，则可以按照如下的格式定义全局过滤器；
私有过滤器
代码如上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全局过滤器</title>
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
<span>message 的值是：{{message | capi}}</span>
</div>
<div id="app2">
<span>message 的值是：{{message | capi}}</span>
</div>
</body>
<script>
// 使用 Vue 定义全局过滤器
// 全局过滤器 独立于每一个 VM 实例之外
// Vue.filter() 方法接受两个参数；
// 第一个参数，是全局过滤的“名字”
// 第二个参数，是全局过滤器的“处理函数”
Vue.filter('capi',(str)=>{
var val = str;
var fist = val.charAt(0).toLowerCase();
// substring 截取字符串 [)
fist += val.substring(1,val.length);
return fist;
})
const cm = new Vue({
el: '#app',
data: {
message:'ABC',
},
methods:{},
// 过滤器函数，必须定义到 filters 节点之下
// 过滤器本质就是一个函数
filters:{
// 注意 过滤器函数先中的 val 永远都是 “管道符 | ” 前面的那个值
capi(val){
// 过滤器中一定需要有返回值
//charAt 将这方法接受所有值，表示字符串中把索引对应的字符，获取出来
// toLowerCase() 将字符串转为小写
// toUpperCase() 将字符串转为大写
var fist = val.charAt(0).toLowerCase()
// substring 截取字符串 [)
fist += val.substring(1,val.length)+"~~~"
return fist;
},
},
})
const cm2 = new Vue({
el: '#app2',
data: {
message:'DEF',
},
methods:{},
filters:{},
})
</script>
</html>
过滤器可以串联多个过滤器·
过滤器的本质是JavaScript 函数，因此可以接受参数，格式如下：
过滤器的兼容性
过滤器仅才vue2.x 和 1.x 中受支持，在 vue3.x 的版本中删除了过滤器相关的功能。
在企业级项目中
如果使用的是 2.x 版本的vue， 则依然可以使用过滤器相关的功能
如果项目已经升级到了 vue3.x 版本的vue ，官方建议计算属性方法代替被删除的过滤器功能
二、侦听器
1、什么是watch侦听器
watch 侦听器允许开发者件事数据的变化，从而针对数据的变化做出特定的操作。
语法格式如下：
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>侦听器</title>
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="user_name"/>
<select v-model="user_type">
<option value="">请选择类型</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<hr>
<span>用户名:</span>
<input v-model="user_info.user_name"/>
<br>
<span>用户类型:</span>
<select v-model="user_info.user_type">
<option value="">请选择类型</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
</body>
<script>
const cm = new Vue({
el: '#app',
data: {
user_name:'ABC',
user_type:'',
user_info:{
user_name:'',
user_type:'',
},
},
// 所有侦听器都应该放到 watch 节点下
watch:{
/**
* 侦听器本质是一个函数，要监视那个数据的变化就把数据名作为方法名即可
* 监听到 user_name 的值变化一次触发一次
* @param {Object} newVal 新值
* @param {Object} oldVal 原值
* 新值在前，旧值在后
*/
// user_name(newVal,oldVal){
// console.log("监听user_name的值变化",newVal,oldVal)
// },
// ==============函数式监听器====================
user_type(newVal,oldVal){
console.log("监听user_name的值变化",newVal,oldVal)
},
// ==============================定义对象格式的侦听器================
/**
*定义对象格式的监听器
* 可以刚进入页面时，自动触发一次
*/
user_name:{
// handler 侦听器的处理函数
handler(newVal,oldVal){
console.log("监听user_name的值变化",newVal,oldVal)
},
/**
* immediate 选项默认值是false
* immediate 的作用是，控制监听器是否自动触发一次
*/
immediate:true,
},
// ==================================深度监听===================
user_info:{
handler(newVal,oldVal){
console.log(newVal,oldVal)
},
/**
* 开启深度监听，只要对象中如何一个属性变化，都会触发“对象侦听”
*/
deep:true,
/**
* 访问页面时触发一次 侦听器
*/
immediate:true
},
// ================只侦听 对象中某一个属性 ====================
/**
* 如果侦听的是对象的子属性的变化，则必须包裹一层单引号
*/
'user_info.user_name'(newVal,oldVal){
console.log(newVal,oldVal)
},
},
})
</script>
</html>
侦听器的格式
1、方法格式的侦听器
缺点1：无法在刚进入页面的时候，自动触发 1 次；
缺点2：如果侦听的是一个对象，如果对象中的属性发生变化，不会触发侦听器；
2、对象格式的侦听器
优点1：可以通过 immediate 选线，让监听器刚进入页面时触发一次；
优点2：可以通过 deep 选项，让侦听器深度监听对象中每个属性的变化；
2、深度监听
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>深度侦听</title>
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
<span>用户名:</span>
<input v-model="user_info.user_name"/>
<br>
<span>用户类型:</span>
<select v-model="user_info.user_type">
<option value="">请选择类型</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
</body>
<script>
const cm = new Vue({
el: '#app',
data: {
user_info:{
user_name:'',
user_type:'',
},
},
watch:{
// user_info:{
// handler(newVal,oldVal){
// console.log(newVal,oldVal)
// },
// /**
// * 开启深度监听，只要对象中如何一个属性变化，都会触发“对象侦听”
// */
// deep:true,
// /**
// * 访问页面时触发一次 侦听器
// */
// immediate:true
// },
/**
* 如果侦听的是对象的子属性的变化，则必须包裹一层单引号
*/
'user_info.user_name'(newVal,oldVal){
console.log(newVal,oldVal)
},
},
})
</script>
</html>
总结：
1、如果想让 watch 侦听器进入页面立即执行，则需要使用对象侦听，并使用 immediate 选项；
2、如果需要监听对象，那么则使用对象格式的侦听器，并使用 deep 选项；或者通过方法格式实现 ‘对象.属性’ 进行实现；
三、计算属性
计算属性指的是 通过一系列运算 之后，最终得到的 属性值。
这个动态计算出来的属性值 可以被模板结构或 methods 方法使用。
·· 用来拼接值
<span>{{ '用户名：'+`${user_name} 角色：${user_role}`+`${age}`+' 性别：'+sex }}</span>
属性中定义对象需要单引号对属性包裹起来
<div :style="{'background-color':`rgb(${r},${g},${b})`,'width': `${w}`+'px','height':`${h}`+'px'}"> 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
<span>红色:</span>
<input type="number" min="0" v-model="r"/>
<span>绿色:</span>
<input type="number" min="0" v-model="g"/>
<span>蓝色:</span>
<input type="number" min="0" v-model="b"/>
<span>宽:</span>
<input type="number" min="0" v-model="w"/>
<span>高:</span>
<input type="number" min="0" v-model="h"/>
<hr>
<!-- 在属性中 : 表示 v-bind 属性绑定 -->
<!-- 在js中{}表示对象 : 属性后的 -->
<!-- :style="{backgroundColor: `rgd(${r},${g},${b})`};" 表示：给style 绑定了样式，绑定内容是个对象
backgroundColor :背景颜色
当前的样式中包含
-->
<div :style="{'background-color': rgb,'width': `${w}`+'px','height':`${h}`+'px'}">
{{rgb}}
</div>
</div>
</body>
<script>
const cm = new Vue({
el: '#app',
data: {
// 红色
r:0,
// 绿色
g:0,
// 蓝色
b:0,
// 宽
w:500,
// 高：
h:100,
},
methods:{
},
/**
* 所有的计算属性都需要放到 computed 节点之下
* 计算属性在定义的时候，要定义成“方法格式”
*
*/
computed:{
/**
* rgb 作为一个计算属性， rgb 被定义成了方法格式
* 最终，在方法中，要返回一个生成好的 rgb(x,x,x) 的字符串
*/
rgb(){
return`rgb(${this.r},${this.g},${this.b})`
},
},
})
</script>
</html>
特点：
1、定义的时候，要被定义为方法；
2、在使用计算属性的时候，当普通属性使用即可；
好处：
1、实现了代码的复用；
2、只要计算的属性中依赖的数据源变化了，他都会自动的重新求职；
四、vue-cli
1、什么是单页面应用程序
单页面应用程序（Single Page Application）简称SPA ,顾明思议，指的是一个 web 网站中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。
2、什么是 vue-cli
vue-cli 是 vue.js 开发的标准工具。简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。
引用自 vue-cli 官网的一句话：
程序员可以专注撰写应用上，而不必花好几天去纠结 webpack 配置的问题。
中文官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js
3、安装和使用
vue-cli 是 npm 上的一个全局包，使用 npm install 命令，即可方便的吧它安装到自己的电脑上
npm install -g @vue/cli
# 安装 vue-cli
npm install --global vue-cli -->这是2.0版本
npm install --global @vue/cli -->版本为3.0的基于 vue-cli 快速生成工程化的Vue项目：
#vue 2.0版本创建脚手架==============================
vue init webpack vue-obj (注意名字命名)
vue init webpack +命名（最好用vue-obj 2.0）
#vue 3.0版本创建脚手架===============================
Vue create vue-obj (3.0以上的)
4、卸载vue
# 运行下面的命令来卸载vue.js：
npm uninstall vue-cli -g
# 卸载之前版本
npm uninstall vue-cli -g
# 安装最新版本
npm install -g @vue/cli5、vue-cli 的使用
第一步、
#vue 2.0版本创建脚手架==============================
vue init webpack vue-obj (注意名字命名)
vue init webpack +命名（最好用vue-obj 2.0）
#vue 3.0版本创建脚手架===============================
Vue create vue-obj (3.0以上的)
第二步、
上下键进行选择
第三步、
打着学星号的是必须安装；
Choose vue version：是 VUE 版本
Babel : 解决 js demo
TypeScript : TS
Progressive Web App (PWA) Support：渐进式框架
Router：路由
Vuex：
CSS Pre-processors： CSS预处理器
Linter / Formatter：默认选中，约束代码风格，一般不用
Unit Testing: 单月测试
E2E Testing:测试
（初学建议安装如下）
第四步：选择Vue版本
第五步：选择 CSS预处理器（less）
第六步：询问配置文件放置位置
默认第一项
第二项：是所有的配置都放到 package.json 中
第七步骤：设置预设（下次创建项目会按照这个模板进行创建）
选择 y 则需要进行取名
创建成功
运行
6、项目
启动项目的命令是 server,在文件 package.json 文件中可以看到打包和启动项目的命令
1、项目构成图：
2、vue项目中 src 目录的构成
assets 文件夹，存放项目中用到的静态资源文件，例如css样式表，图片资源等；
components 文件夹：程序员封装的，可复用的组件，都要放到 components 目录下；
main.js 是项目的入口文件，整个项目的运行，要先执行 main.js ；
App.vue 是项目木的根组件；
3、vue 的运行流程
在工程话的项目中，vue要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html。html 的指定区域中。
main.js:
//导入 vue包，得到 Vue 构造函数
import Vue from 'vue'
//导入 App.vue 根组件，将来要把 App.vue 中的模板结构，渲染到 HTML 页面中
import App from './App.vue'
Vue.config.productionTip = false
// 常见 vue 的实例对象
new Vue({
// 把 render 函数指定的组件，渲染到 HTML 页面中
render: h => h(App),
// $mount('#app') 和 el:'#app' 效果一样
}).$mount('#app')
// vue 实例中的 $mount() 作用和el 属性完全一样
- App.vue 用来别写带渲染的模板结构
- index.html 中需要预留一个 el 区域；
- main.js 把 App.vue 渲染到了 index.html 所预留的区域中；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 中 $mount 测试</title>
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<div id="app2">
{{message}}
</div>
</body>
<script>
const cm = new Vue({
data: {
message:'ABC',
}
})
cm.$mount('#app')
const cm2 = new Vue({
el:'#app2',
data: {
message:'DEF',
}
})
</script>
</html>
五、vue 组件
1、什么是组件化开发
组件化开发指的是：根据封装的思想，把页面上可重用的UI结构封装为组件，从而方便项目的开发和维护
2、vue 中的组件化开发
vue 是一个支持组件化开发的前端框架。
vue 中规定：组件的后缀名是.vue 。 之前接触到的App.vue 文件本质上就是一个 vue 的组件。
3、vue 组件的三个组成部分
每一个 .vue 组件都由3部分构成，分别是：
- template --> 组件的 模板结构
- script --> 组件的 JavaScript 行为
- style --> 组件的 样式
<template>
<div class="test_box">
<span>{{user_name}}</span>
<button @click="changeName">确定</button>
</div>
</template>
<script>
//<!-- 默认导出，这是固定写法-->
export default {
name: "demo_test",
// data 数据源
// 注意 vue 组件中的 data 不能像之前一样，不能指向对象。
// 注意： 组件中的 data 必须是一个函数
data(){
//这个return 出去的 {} 中，可以定义数据
return {
user_name:'张三',
}
},
//方法函数区
methods:{
changeName(){
/**
* 在组件中 this 就表示当前实例的对象
*/
console.log(this)
this.user_name='李四'
}
},
// 当前组件中的侦听器
watch:{},
// 当前组件中的计算属性
computed:{},
// 当前组件中在过滤器
filters:{},
}
</script>
<style scoped>
.test_box{
background-color: coral;
}
</style>
//如果需要使用到 这样的样式结构 需要在 style 后加上 lang="less" 属性
<style scoped lang="less">
.test_box{
background-color: coral;
span {
color: red;
}
}
</style> 
注意：
1、 在 template 中只能存在唯一个根节点，也就是在 template 中所有的内容都要放在一个<div></div>中；
2、在style 标签中如果不加 lang="less" 属性 默认则是 CSS语法，需要启用 less 语法就增加lang="less"属性；
六、axios
axios 是一个 专注于网络数据请求 的库！
1、axios 基础语法
2、通过 axios 请求返回的数据结构如下图
const result = axios({
method:'GET',
url:"http://www.liulongbin.top:3006/api/getbooks"
})
result.then(function(datas){
console.log(datas)
})axios({
method:'GET',
url:"http://www.liulongbin.top:3006/api/getbooks"
}).then(function(result){
console.log(result)
})3、GET
传参：
await axios({
method:'GET',
url:"http://www.liulongbin.top:3006/api/getbooks",
// GET 参数: URL 中的查询参数
params:{
id:1
},
// POST 参数
data:{},
}).then(function(result){
console.log(result)
})1、如果用的是GET 请求那么使用 params 进行传参；
2、如果用的是 POST 请求那么使用 data 进行传参；
可以根据需求进行选择。
4、POST
axios({
method:'POST',
url:"http://www.liulongbin.top:3006/api/post",
// POST 参数
data:{
name:'zs',
age:'20'
},
}).then(function(result){
console.log(result)
})5、await
1、如果调用某一个方法的返回值是 promise 实例，则前面可以添加 await
2、await 只能用在被 async “修饰” 的 方法中
async fun_01() {
// 如果调用某一个方法的返回值是 promise 实例，则前面可以添加 await
await axios({
method: 'POST',
url: "http://www.liulongbin.top:3006/api/post",
// POST 参数
data: {
name: 'zs',
age: '20'
},
}).then(function(result) {
console.log(result)
})
}
async fun_01() {await axios({
method: 'POST',
url: "http://www.liulongbin.top:3006/api/post",
// POST 参数
data: {
name: 'zs',
age: '20'
},
}).then(function(result) {
console.log(result)
})
}
获取 data 中真实的数据
async fun_02() {
// 结构赋值的时候 ，使用 : 进行重命名
/**
* 1、调用 axios 之后，使用 async/await 进行简化
* 2、使用结构赋值，从 axios 封装的大对象中，把 data 属性结构出来
* 3、吧结构出来的 data 属性，使用，冒号 进行重命名，一般重命名为 res
*/
const { data:res } = await axios({
method: 'POST',
url: "http://www.liulongbin.top:3006/api/post",
// POST 参数
data: {
name: 'zs',
age: '20'
},
})
console.log(res)
},
6、 axios.get
// ================== axios.get =============
async fun_03() {
const {data : res} = await axios.get('http://www.liulongbin.top:3006/api/getbooks')
console.log(res)
},
// 传参
async fun_04() {
const {data : res} = await axios.get('http://www.liulongbin.top:3006/api/getbooks',{
params:{
id:1
}
})
console.log(res)
},7、axios.post
async fun_05() {
const {data : res} = await axios.post('http://www.liulongbin.top:3006/api/post',
{
name:'zs',
gender:'女'
},
)
console.log(res)
},总结
1、侦听器
需要试听那个数据就将其名称定义为函数名；
函数形式的侦听器看不会一进入页面就会被侦听到需要将其改为对象的形式。
deep 选项 侦听对象中的所有属性变化
侦听对象中的某一个属性的变化；
2、计算属性
3、vue-cli
1、安装node.js
2、安装 vue-cli
npm install -g @vue/cli
-g 表示全局安装
3、创建vue项目
vue create 项目名称
4、vue项目构成
5、vue 项目启动
npm run serve
4、vue 组件
每一个 .vue 组件都由3部分组成，分别是：
- template 组件的模板结构
- script 组件的 JavaScript 行为
- style 组件的样式
其中style 中需要加上一个 lang='less'
数据需要定义到data节点的return 中，data是一个函数
export default {
data(){
//这个return 出去的 {} 中，可以定义数据
return {
user_name:'张三',
}
}
}
921
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
