VUE2从入门到精通（一）
****************************************************************************************************************************************************************************
1、课程概述 【1】前置储备：HTML+CSS+JS、WebAPI、Ajax、Node.js 【2】1天：前端工程化+Webpack。2天：vue的使用步骤、指令、调试工具。3天：过滤器、监听器、计算属性、axios、vue-cli。 4天：组件与生命周期。5天：ref+购物车案例。6天：vue组件的高级用法、动态组件、插槽的使用。7天：路由。8天：黑马头条.
****************************************************************************************************************************************************************************
2、前端工程化 【1】模块化、组件化、规范化、自动化。 【2】前端工程化：在企业级的前端项目开发中，把前端相关的技术规划化、标准化。 【3】主流的工程化方案：webpack 网址：https://www.webpackjs.com
****************************************************************************************************************************************************************************
3、webpack的基本使用 【1】它提供了友好的前端开发支持，以及代码混淆、处理浏览器js的兼容性、性能优化等强大功能。 【2】程序员放心的写高级代码，webpack负责转换成低版本浏览器也能跑，就完事了。
****************************************************************************************************************************************************************************
4、webpack正式使用
【1】列表隔行变色需求的实现。
npm init -y
******************************************
新建src文件+index.html+index.js
******************************************
npm install jquery -S (-S 就是记录参数到package.json里去 就是--save的缩写，开发和上线都需要的包)
******************************************
通过es6导入jQuery
【2】Uncaught SyntaxError: Cannot use import statement outside a module 语法错误
【3】报错的解决
npm install webpack@5.42.1 webpack-cli@4.7.2 -D (-D是说明记录到package.json，但是它是记录到devDependencies节点，只在开发阶段会用到的包，
上线不需要--save-dev的简写)
******************************************安装后配置
在项目跟目录下，创建webpack.config.js文件。并初始化基本配置：
module.exports = {mode: 'development' // 用来指定构建模式
}
******************************************在package.json的scripts节点，新增dev脚本
"scripts":{"dev": "webpack" // 通过npm run dev运行的就是这个脚本webpack
}
******************************************终端运行命令
npm run dev
******************************************然后在dist下面生成了main.js文件，这个文件就是对index.js的兼容性升级，引入后
最后访问index.html就能成功使用了！！！！！！！！！！！！！
【4】大小压缩
// 使用nodejs导出一个webpack对象
module.exports = {mode: 'production' // production（小，慢，上线的时候用） development（大，快，开发的时候用）
}
*******************************************
asset main.js 88.5 KiB 大小变小了4倍多。
****************************************************************************************************************************************************************************
8、webpack.config.js执行过程
【1】在执行npm run dev之前就会被读取，然后根据配置运行webpack
【2】默认约定是打包src下面的index.js，输出是dist下面的main.js
【3】通过个性化配置可以改变输出路径。entry指定打包的路径，output可以指定打包输出路径。
【4】每次修改index.js 都需要重新打包webpack，再访问才能生效...
【5】通过插件来解决，使用webpack-dev-server npm i webpack-cli -D(注意版本之间的兼容性)
npm install webpack-dev-server@3.11.2 -D
******************************************修改脚本命令内容
"scripts":{"dev": "webpack serve"
}
******************************************执行命令
npm run dev
******************************************访问发现可以访问，但是修改代码颜色没有变化
webpack output is served from / 根据这个提示改配置。
<!--这里使用的是内存里的main.js-->
<script src="/main.js"></script>
******************************************就解决了修改代码，颜色不变化的问题
牛批呀！！！！！！！！！！！！！
****************************************************************************************************************************************************************************
11、安装配置html-webpack
【1】优化不点击src就能看到index的页面
【2】安装html-webpack-plugin
npm i html-webpack-plugin@5.3.2 -D
【3】配置
// 使用nodejs导出一个webpack对象
// 1.导入html-webpack-plugin
const HtmlPlugin = require("html-webpack-plugin");
// 2.new构造函数，创建实例对象
const htmlPlugin = new HtmlPlugin({template: './src/index.html', // 被复制文件路径filename: './index.html' // 复制的文件路径
});module.exports = {mode: 'development', // production development// 插件的数组 webpack在运行时会加载并调用这些插件plugins: [htmlPlugin]
}
【4】重新运行，npm run dev 访问localhost:8080就会访问复制出来的index.html 它是存在内存中的。
【5】而且html-webpack-plugin会自动加载内存中的main.js，不用写加载代码也可以。
【6】自动打开浏览器访问，并指定端口号
module.exports = {mode: 'development', // production development// 插件的数组 webpack在运行时会加载并调用这些插件plugins: [htmlPlugin],devServer: {open: true, // 自动打开浏览器port: 80}
}
****************************************************************************************************************************************************************************
14、webpack里的loader
【1】如果不是.js文件，需要loader加载器进行正常的打包。
【2】比如不要li前面的点，需要引入css文件，如果用loader来处理？
npm i style-loader -D
****************************************安装处理器
npm i css-loader -D
****************************************执行
npm run dev
【3】这样就成功实现了加载css文件的loader处理。
【4】会先转交给后一个loader，然后再给style-loader，再把处理结果转给webpack，webpack把处理结果合并到main.js
module.exports = {mode: 'development', // production development// 插件的数组 webpack在运行时会加载并调用这些插件plugins: [htmlPlugin],devServer: {open: true, // 自动打开浏览器port: 80},module: {rules: [// 定义了不同模块对应的loader{test: /.css$/, use: ['style-loader', 'css-loader']}]}
}
【5】打包less功能
npm i less-loader less -D
****************************************安装处理器
module.exports = {mode: 'development', // production development// 插件的数组 webpack在运行时会加载并调用这些插件plugins: [htmlPlugin],devServer: {open: true, // 自动打开浏览器port: 80},module: {rules: [// 定义了不同模块对应的loader{test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']},{test: /.css$/, use: ['style-loader', 'css-loader']}]}
}
****************************************************************************************************************************************************************************
17、webpack打包图片
【1】图片转成base64后展示，但是体积转换后可能变大点。所以大图片就不建议转了。
【2】用webpack打包图片的路径。
npm i url-loader file-loader -D
**********************************************index.js
import "./css/index.less"
// 导入样式 在webpack中一切皆模块，都可以通过es6进行导入和使用
import "./css/index.css" // 就需要合适的loader来处理// 1.导入图片
import logo from "./res/1.jpg"console.log(logo);
// 2. 给img标签的src动态赋值
$(".box").attr("src", logo)// 使用es6导入语法 导入jquery
import $ from 'jquery'
// 定义jquery的入口函数
$(function () {// 实现行变色效果$('li:odd').css('background-color', 'red');$('li:even').css('background-color', 'yellow');
})
************************************************webpack.config.js
// 使用nodejs导出一个webpack对象
// 1.导入html-webpack-plugin
const HtmlPlugin = require("html-webpack-plugin");
// 2.new构造函数，创建实例对象
const htmlPlugin = new HtmlPlugin({template: './src/index.html', // 被复制文件路径filename: './index.html' // 复制的文件路径
});module.exports = {mode: 'development', // production development// 插件的数组 webpack在运行时会加载并调用这些插件plugins: [htmlPlugin],devServer: {open: true, // 自动打开浏览器port: 80},module: {rules: [// 定义了不同模块对应的loader{test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']},{test: /.css$/, use: ['style-loader', 'css-loader']},{test: /.jpg|png|gif$/, use: 'url-loader?limit=22229'}]}
}
****************************************************************************************************************************************************************************
20、是否需要接收 【1】如果接收到的对象为undefined，这import .. from 的from就不用接收了，直接import就可以了。 【2】?limit=22229 文件的大小上限，不能大于22229字节，就是2.2M左右。
****************************************************************************************************************************************************************************
22、webpack如果打包高级语法
【1】就是如何打包一些架构的高级代码语法？
npm i babel-loader @babel/core @babel/plugin-proposal-decorators -D
*************************************************************************************安装装饰器{test: /.js$/, use: 'babel-loader', exclude: /node_modules/} // 一定要排除node_modules，因为第三方包不需要你管
【2】在项目根目录下，创建名字为babel.config.js配置文件，定义配置如下：
module.exports={plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]
}
****************************************************************************************************************************************************************************
23、发布上线
【1】加一个命令如下：
"scripts": {"dev": "webpack serve","build": "webpack --mode production" // 这里使用production发布，覆盖serve里那个development},
*****************************************************************
dist下就会生成对应的打包发布后的文件。
****************************************************************************************************************************************************************************
24、发布的资源分类存储
【1】js文件放到js文件夹下面，完整配置如下
// 使用nodejs导出一个webpack对象
const path = require("path"); // 首先我们在webpack.config.js中引入path模块
// 1.导入html-webpack-plugin
const HtmlPlugin = require("html-webpack-plugin");
// 2.new构造函数，创建实例对象
const htmlPlugin = new HtmlPlugin({template: './src/index.html', // 被复制文件路径filename: './index.html' // 复制的文件路径
});module.exports = {mode: 'development', // production development// 插件的数组 webpack在运行时会加载并调用这些插件output: {path: path.join(__dirname, 'dist'),filename: "js/main.js"},plugins: [htmlPlugin],devServer: {open: true, // 自动打开浏览器port: 80},module: {rules: [// 定义了不同模块对应的loader{test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']},{test: /.css$/, use: ['style-loader', 'css-loader']},{test: /.jpg|png|gif$/, use: 'url-loader?limit=22229&outputPath=images'},// 处理高级语法// {test: /.js$/, use: 'babel-loader', exclude: /node_modules/}]}
}
【2】图片放到images文件下面
*********************************************************module: {rules: [// 定义了不同模块对应的loader{test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']},{test: /.css$/, use: ['style-loader', 'css-loader']},{test: /.jpg|png|gif$/, use: 'url-loader?limit=22229&outputPath=images'},// 处理高级语法// {test: /.js$/, use: 'babel-loader', exclude: /node_modules/}]}
****************************************************************************************************************************************************************************
25、每次打包发布自动删除原有文件
【1】安装插件
npm i clean-webpack-plugin -D
【2】新的配置
// 使用nodejs导出一个webpack对象
const path = require("path"); // 首先我们在webpack.config.js中引入path模块
// 1.导入html-webpack-plugin
const HtmlPlugin = require("html-webpack-plugin");
// 2.new构造函数，创建实例对象
const htmlPlugin = new HtmlPlugin({template: './src/index.html', // 被复制文件路径filename: './index.html' // 复制的文件路径
});
const {CleanWebpackPlugin} = require("clean-webpack-plugin"); //！！！！！！！！！！！！！！！！！！！！！！！！！ 解构赋值module.exports = {mode: 'development', // production development// 插件的数组 webpack在运行时会加载并调用这些插件output: {path: path.join(__dirname, 'dist'),filename: "js/main.js"},plugins: [htmlPlugin, new CleanWebpackPlugin()], //！！！！！！！！！！！！！！！！！！！！！！！！！devServer: {open: true, // 自动打开浏览器port: 80},module: {rules: [// 定义了不同模块对应的loader{test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']},{test: /.css$/, use: ['style-loader', 'css-loader']},{test: /.jpg|png|gif$/, use: 'url-loader?limit=22229&outputPath=images'},// 处理高级语法// {test: /.js$/, use: 'babel-loader', exclude: /node_modules/}]}
}
****************************************************************************************************************************************************************************
27、Source Map
【1】记录原来的行号，方便程序员快速定位报错的行。
// 使用nodejs导出一个webpack对象
const path = require("path"); // 首先我们在webpack.config.js中引入path模块
// 1.导入html-webpack-plugin
const HtmlPlugin = require("html-webpack-plugin");
// 2.new构造函数，创建实例对象
const htmlPlugin = new HtmlPlugin({template: './src/index.html', // 被复制文件路径filename: './index.html' // 复制的文件路径
});
const {CleanWebpackPlugin} = require("clean-webpack-plugin");module.exports = {mode: 'development', // production developmentdevtool: 'eval-source-map', // 看这里！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！// 插件的数组 webpack在运行时会加载并调用这些插件output: {path: path.join(__dirname, 'dist'),filename: "js/main.js"},plugins: [htmlPlugin, new CleanWebpackPlugin()],devServer: {open: true, // 自动打开浏览器port: 80},module: {rules: [// 定义了不同模块对应的loader{test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']},{test: /.css$/, use: ['style-loader', 'css-loader']},{test: /.jpg|png|gif$/, use: 'url-loader?limit=22229&outputPath=images'},// 处理高级语法// {test: /.js$/, use: 'babel-loader', exclude: /node_modules/}]}
}
【2】生产环境需要注释掉devtool选项，这样才更安全！！！！！！！！！！！！！！
【3】或者生产环境只暴露行号，nosources-source-map使用这个值。这个非常好！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
// 使用nodejs导出一个webpack对象
const path = require("path"); // 首先我们在webpack.config.js中引入path模块
// 1.导入html-webpack-plugin
const HtmlPlugin = require("html-webpack-plugin");
// 2.new构造函数，创建实例对象
const htmlPlugin = new HtmlPlugin({template: './src/index.html', // 被复制文件路径filename: './index.html' // 复制的文件路径
});
const {CleanWebpackPlugin} = require("clean-webpack-plugin");module.exports = {mode: 'development', // production developmentdevtool: 'nosources-source-map',// 插件的数组 webpack在运行时会加载并调用这些插件output: {path: path.join(__dirname, 'dist'),filename: "js/main.js"},plugins: [htmlPlugin, new CleanWebpackPlugin()],devServer: {open: true, // 自动打开浏览器port: 80},module: {rules: [// 定义了不同模块对应的loader{test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']},{test: /.css$/, use: ['style-loader', 'css-loader']},{test: /.jpg|png|gif$/, use: 'url-loader?limit=22229&outputPath=images'},// 处理高级语法// {test: /.js$/, use: 'babel-loader', exclude: /node_modules/}]}
}
****************************************************************************************************************************************************************************
30、实际开发中需要自己配置webpack吗？
【1】不需要，都是默认配置好的...
【2】../../这种层级太多不方便理解，建议使用@表示src源代码目录，从外往里找，不要使用../从里往外找
// 使用nodejs导出一个webpack对象
const path = require("path"); // 首先我们在webpack.config.js中引入path模块
// 1.导入html-webpack-plugin
const HtmlPlugin = require("html-webpack-plugin");
// 2.new构造函数，创建实例对象
const htmlPlugin = new HtmlPlugin({template: './src/index.html', // 被复制文件路径filename: './index.html' // 复制的文件路径
});
const {CleanWebpackPlugin} = require("clean-webpack-plugin");module.exports = {mode: 'development', // production developmentdevtool: 'nosources-source-map',// 插件的数组 webpack在运行时会加载并调用这些插件output: {path: path.join(__dirname, 'dist'),filename: "js/main.js"},plugins: [htmlPlugin, new CleanWebpackPlugin()],devServer: {open: true, // 自动打开浏览器port: 80},module: {rules: [// 定义了不同模块对应的loader{test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']},{test: /.css$/, use: ['style-loader', 'css-loader']},{test: /.jpg|png|gif$/, use: 'url-loader?limit=22229&outputPath=images'},// 处理高级语法// {test: /.js$/, use: 'babel-loader', exclude: /node_modules/}]},resolve: {alias: {// 告诉webpack @表示src这一层目录 ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！'@': path.join(__dirname, './src/')}}
}
****************************************************************************************************************************************************************************
32、vue概述（第2天的内容了） 【1】vue一套用于构建 用户界面 的前端 框架 【2】学习vue就是学习框架中规定的用法 【3】指令、组件、路由、Vuex，只有掌握所有内容，才有开发vue的能力 【4】数据驱动视图、双向数据绑定。 页面结构——（自动渲染）——vue监听数据变化——（变化）——页面所依赖的数据 ****************************************** 数据驱动视图，页面自动渲染。程序员只管数据就行了，不用操作dom了！！！ ****************************************** 双向数据绑定，form表单采集数据，ajax负责提交数据。页面上表达采集的数据发生变化时，会被vue获取到，并更新到js数据中 ****************************************** M V VM 核心原理。Model(页面渲染时用的数据源) View(当前页面的DOM结构) ViewModel(vue的实例，它是m v vm的核心) View——（自动渲染）——ViewModel(vue)——（变化）——Model 【5】vue的版本 vue1被淘汰了，vue2 vue3两个版本在用。
****************************************************************************************************************************************************************************
35、基本使用
【1】基础项目
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>主页</title>
</head>
<body>
<div id="app">{{name}}
</div>
</body>
<!--1.导入vue.js-->
<script src="./src/lib/vue.js"></script>
<!--2.创建vue实例-->
<script>const vm = new Vue({el: '#app',data: {name: '陈翔'}})
</script>
</html>
****************************************************************************************************************************************************************************
37、内容渲染指令
【1】指令就是模板语法，辅助开发者渲染页面基本结构的。最常用、最基础、最简单的知识。
【2】六大类：内容渲染、属性绑定、事件绑定、双向绑定、条件渲染、列表渲染六大指令。
【3】v-text会覆盖元素内容原有的内容，用的不多。 {{}}胡子语法，解决内容覆盖问题的，使用频率高。 v-html，如果想保留富文本数据的格式。
<div id="app"><p v-text="name"></p><p>性别：{{age}}</p><p v-html="info"></p>
</div>
*****************************************************************************const vm = new Vue({el: '#app',data: {name: '陈翔',age: 21,info: '<h1> 搞笑</h1>'}})
*****************************************************************************
****************************************************************************************************************************************************************************
39、属性绑定指令
【1】v-bind:属性，可以简写为:属性。对元素的属性进行动态绑定，用的非常多，非常多！！！所以建议简写为:属性。
<div id="app"><input :placeholder="tips"/>
</div>
******************************************************const vm = new Vue({el: '#app',data: {name: '陈翔',age: 21,tips: '请输入用户名称'}});
****************************************************************************************************************************************************************************
40、胡子函数与属性绑定可以写简单的运算
【1】{{age+2}}、反转运算等也可以
【2】:id="'list-'+id"
****************************************************************************************************************************************************************************
41、事件绑定
【1】v-on:click="addAge"，简写为@click="addAge"
<div id="app">年龄：{{age}}<br/><br/><button v-on:click="addAge">过年+1</button><button v-on:click="backAge">回忆-1</button>
</div>
****************************************************************************const vm = new Vue({el: '#app',data: {name: '陈翔',age: 21,},methods: {addAge() {this.age = this.age + 1;},backAge() {this.age = this.age - 1;}}});
****************************************************************************************************************************************************************************
44、绑定函数并传参
【1】传参需要加个小括号
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>主页</title>
</head>
<body>
<div id="app">年龄：{{age}}<br/><br/><button v-on:click="addAge(2)">过年+2</button><button v-on:click="backAge(3)">回忆-3</button>
</div>
</body>
<!--1.导入vue.js-->
<script src="./src/lib/vue.js"></script>
<!--2.创建vue实例-->
<script>const vm = new Vue({el: '#app',data: {name: '陈翔',age: 21,},methods: {addAge(m) {this.age = this.age + m;},backAge(n) {this.age = this.age - n;}}});
</script>
</html>
【2】@click @input @keyup监听其他事件
****************************************************************************************************************************************************************************
46、事件绑定$event
【1】这个就是解决传参时获取原生事件而使用的。$event是固定写法
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>主页</title>
</head>
<body>
<div id="app">年龄：{{age}}<br/><br/><button v-on:click="addAge(2)">过年+2</button><button v-on:click="backAge(3,$event)">回忆-3</button>
</div>
</body>
<!--1.导入vue.js-->
<script src="./src/lib/vue.js"></script>
<!--2.创建vue实例-->
<script>const vm = new Vue({el: '#app',data: {name: '陈翔',age: 21,},methods: {addAge(m) {this.age = this.age + m;},backAge(n, e) {this.age = this.age - n;// 判断this.age的值是否为偶数let button = e.target;if (this.age % 2 == 0) {button.style.backgroundColor = 'red';} else {button.style.backgroundColor = 'green';}}}});
</script>
</html>
****************************************************************************************************************************************************************************
47、事件修饰符
【1】阻止默认跳转,@click.stop阻止事件冒泡
<a href="https://www.baidu.com" @click.prevent="jump">跳转到百度首页</a>
methods: {jump() {console.log("点击了a链接")}}
**************************************
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>主页</title>
</head>
<body>
<div id="app"><a href="https://www.baidu.com" @click="jump">跳转到百度首页</a>
</div>
</body>
<!--1.导入vue.js-->
<script src="./src/lib/vue.js"></script>
<!--2.创建vue实例-->
<script>const vm = new Vue({el: '#app',data: {name: '陈翔',age: 21,},methods: {jump(e) {e.preventDefault();console.log("点击了a链接")}}});
</script>
</html>
****************************************************************************************************************************************************************************
49、事件绑定-按键修饰符
【1】@keyup.enter="submit" @keyup.esc="clear"
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>主页</title>
</head>
<body>
<div id="app"><input type="text" @keyup.esc="clear"/>
</div>
</body>
<!--1.导入vue.js-->
<script src="./src/lib/vue.js"></script>
<!--2.创建vue实例-->
<script>const vm = new Vue({el: '#app',data: {name: '陈翔',age: 21,},methods: {clear(e) {let input = e.target;input.value = "";}}});
</script>
</html>
****************************************************************************************************************************************************************************
50、双向绑定-v-model
【1】不操作dom的前提下，拿到表单提交的数据 :value="name"是单向绑定。而v-model="name"则是双向绑定了！！！！！！！！！
【2】只有表单元素使用v-model才有意义，不然其他的使用了就相当于:value，因为不能输入所以还是单向的。
【3】常见使用元素：input textarea select
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>主页</title>
</head>
<body>
<div id="app"><input type="text" v-model="name"/><hr/>{{name}}<input type="text" :value="name"/>
</div>
</body>
<!--1.导入vue.js-->
<script src="./src/lib/vue.js"></script>
<!--2.创建vue实例-->
<script>const vm = new Vue({el: '#app',data: {name: '陈翔',age: 21,}});
</script>
</html>
****************************************************************************************************************************************************************************
51、v-model修饰符
【1】v-model.number。修饰符就是简单的过滤器。v-model.trim自动过滤用户输入的首尾空格字符。v-model.lazy 比如删除5个字符，只有在最后删除才同步。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>主页</title>
</head>
<body>
<div id="app"><input type="text" v-model.number="dog"/>+ <input type="text" v-model.number="cat"/>=<span>{{dog+cat}}</span>
</div>
</body>
<!--1.导入vue.js-->
<script src="./src/lib/vue.js"></script>
<!--2.创建vue实例-->
<script>const vm = new Vue({el: '#app',data: {name: '陈翔',dog: 2,cat: 1}});
</script>
</html>
****************************************************************************************************************************************************************************
52、条件渲染指令
【1】v-if每次都是真的删除或创建。 v-show是切换样式的（如果频繁的切换用这个）
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>主页</title>
</head>
<body>
<div id="app"><span v-if="flag">v-if</span><hr/><span v-show="flag">v-show</span><hr/><button @click="flag=!flag">点击我换一下</button>
</div>
</body>
<!--1.导入vue.js-->
<script src="./src/lib/vue.js"></script>
<!--2.创建vue实例-->
<script>const vm = new Vue({el: '#app',data: {name: '陈翔',age: 20,flag: true}});
</script>
</html>
****************************************************************************************************************************************************************************
53、v-if配套指令
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>主页</title>
</head>
<body>
<div id="app"><h1 v-if="flag">Vue is awesome!</h1><h1 v-else>Oh no!!!</h1><hr/><button @click="flag=!flag">点我</button>
</div>
</body>
<!--1.导入vue.js-->
<script src="./src/lib/vue.js"></script>
<!--2.创建vue实例-->
<script>const vm = new Vue({el: '#app',data: {name: '陈翔',age: 20,flag: false}});
</script>
</html>
****************************************************************************************************************************************************************************
54、v-for基本用法
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>主页</title>
</head>
<body>
<div id="app"><table class="table table-bordered table-hover table-striped"><thead><tr><td>索引</td><td>ID</td><td>姓名</td></tr></thead><tbody><tr v-for="(temp,index) in list"><td>{{index}}</td><td>{{temp.id}}</td><td>{{temp.name}}</td></tr></tbody></table></div>
</body>
<link rel="stylesheet" href="./src/lib/bootstrap.css">
<!--1.导入vue.js-->
<script src="./src/lib/vue.js"></script>
<!--2.创建vue实例-->
<script>const vm = new Vue({el: '#app',data: {list: [{id: 1, name: '陈翔'},{id: 2, name: '球球'},{id: 3, name: '米线'},]}});
</script>
</html>
****************************************************************************************************************************************************************************
55、v-for循环中key 【1】用到了v-for，就要绑定一个:key，而且建议用id绑定。最好使用数值类型的。提升性能，又防止列表乱序。index当key没有意义，因为index会不断变化。<tr v-for="(temp,index) in list" :key="temp.id">
****************************************************************************************************************************************************************************
57、练习案例
【1】启用、停用
<input text="checkbox" v-model="temp.status">
<lable v-if="flag">已启用</lable>
<lable v-else>已禁用</lable>
【2】属性绑定
【3】删除单个商品
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>主页</title>
</head>
<body>
<div id="app"><table class="table table-bordered table-hover table-striped"><thead><tr><td>索引</td><td>ID</td><td>姓名</td><td>操作</td></tr></thead><tbody><tr v-for="(temp,index) in list" :key="temp.id"><td>{{index}}</td><td>{{temp.id}}</td><td>{{temp.name}}</td><td><a href="#" @click="remove(temp.id)">删除</a></td></tr></tbody></table></div>
</body>
<link rel="stylesheet" href="./src/lib/bootstrap.css">
<!--1.导入vue.js-->
<script src="./src/lib/vue.js"></script>
<!--2.创建vue实例-->
<script>const vm = new Vue({el: '#app',data: {list: [{id: 1, name: '陈翔'},{id: 2, name: '球球'},{id: 3, name: '米线'},]},methods: {remove(id) {this.list = this.list.filter(item => item.id !== id)}}});
</script>
</html>
【4】添加的功能
<input type="text" v-model.trim="inputName" />
***********************************************************************完整代码
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>主页</title>
</head>
<body>
<div id="app"><table class="table table-bordered table-hover table-striped"><thead><tr><td>索引</td><td>ID</td><td>姓名</td><td>操作 <a href="#" @click="add('新的')">新增</a></td></tr></thead><tbody><tr v-for="(temp,index) in list" :key="temp.id"><td>{{index}}</td><td>{{temp.id}}</td><td>{{temp.name}}</td><td><a href="#" @click="remove(temp.id)">删除</a></td></tr></tbody></table></div>
</body>
<link rel="stylesheet" href="./src/lib/bootstrap.css">
<!--1.导入vue.js-->
<script src="./src/lib/vue.js"></script>
<!--2.创建vue实例-->
<script>const vm = new Vue({el: '#app',data: {nextId: 4,list: [{id: 1, name: '陈翔'},{id: 2, name: '球球'},{id: 3, name: '米线'},]},methods: {remove(id) {this.list = this.list.filter(item => item.id !== id)},add(name) {// 如果是空字符串则return出去if (name === "") {console.log("品牌名称为空");return}// 执行添加let temp = {id: this.nextId, name: name};this.list.push(temp);this.nextId++;}}});
</script>
</html>
****************************************************************************************************************************************************************************
64、过滤器在vue3就不能用了
【1】简单了解即可。场景胡子表达式、v-bind属性绑定。
【2】管道符 |就能调用，过滤器本质上是一个函数。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>主页</title>
</head>
<body>
<div id="app"><p>{{dog | myFilter}}</p>
</div>
</body>
<link rel="stylesheet" href="./src/lib/bootstrap.css">
<!--1.导入vue.js-->
<script src="./src/lib/vue.js"></script>
<!--2.创建vue实例-->
<script>const vm = new Vue({el: '#app',data: {name: "陈翔",dog: "see"},filters: {myFilter(val) {// 强调 过滤器中一定要有返回值 val是 | 前面的值let tempChar = val.charAt(0).toUpperCase();return val.replace(val.charAt(0), tempChar) + 'abc'}},methods: {}});
</script>
</html>
****************************************************************************************************************************************************************************
65、全局过滤器filter
【1】一般都是用全局过滤器
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>主页</title>
</head>
<body>
<div id="app"><p>{{dog | myFilter}}</p>
</div>
</body>
<link rel="stylesheet" href="./src/lib/bootstrap.css">
<!--1.导入vue.js-->
<script src="./src/lib/vue.js"></script>
<!--2.创建vue实例-->
<script>// 这里！！！！！！！！！！！！！！！！！！！！！！！！！！！！Vue.filter('myFilter', (str) => {// 强调 过滤器中一定要有返回值 val是 | 前面的值let tempChar = str.charAt(0).toUpperCase();return str.replace(str.charAt(0), tempChar) + 'abc'})const vm = new Vue({el: '#app',data: {name: "陈翔",dog: "see"}});
</script>
</html>
****************************************************************************************************************************************************************************
67、过滤器的其他用法
【1】可以调用多个过滤器。{{name | myFilter1 | myFilter2 | myFilter3}}
【2】调用过滤器也可以传参{{name | myFilter1(arg1,arg2)}}。过滤器本质就是函数
****************************************************************************************************************************************************************************
68、vue侦听器watch
【1】监视数据变化的。监听谁，就把谁当做watch里的方法名。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>主页</title>
</head>
<body>
<div id="app"><input type="text" v-model="name"/>
</div>
</body>
<!--1.导入vue.js-->
<script src="./src/lib/vue.js"></script>
<!--2.创建vue实例-->
<script>const vm = new Vue({el: '#app',data: {name: "陈翔",age: 21},watch: {name(newV, oldV) { // 方法名和属性名保持一致需要console.log(newV, oldV)}}});
</script>
</html>
****************************************************************************************************************************************************************************
69、判断用户名是否被占用
【1】主要是属性变化时，和当前值进行比较。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>主页</title>
</head>
<body>
<div id="app"><input type="text" v-model="name"/>
</div>
</body>
<!--1.导入vue.js-->
<script src="./src/lib/vue.js"></script>
<!--2.创建vue实例-->
<script>const vm = new Vue({el: '#app',data: {name: "陈翔",age: 21},watch: {name(newV, oldV) { // 方法名和属性名保持一致需要console.log(newV, oldV)let list = ['陈翔', '球球', '蘑菇头'];list = list.filter(item => item === newV)if (list.length > 0) {console.log("用户名已存在");}}}});
</script>
</html>
****************************************************************************************************************************************************************************
70、侦听器immediate选项
【1】函数形式的侦听器，刚进来不会被触发？？？？
【2】对象格式的侦听器。可以通过immediate自动触发一次。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>主页</title>
</head>
<body>
<div id="app"><input type="text" v-model="name"/>
</div>
</body>
<!--1.导入vue.js-->
<script src="./src/lib/vue.js"></script>
<!--2.创建vue实例-->
<script>const vm = new Vue({el: '#app',data: {name: "陈翔",age: 21},watch: {name: { // 对象形式的handler(newV, oldV) {console.log(newV, oldV)let list = ['陈翔', '球球', '蘑菇头'];list = list.filter(item => item === newV)if (list.length > 0) {console.log("用户名已存在");}},immediate: true}}});
</script>
</html>
****************************************************************************************************************************************************************************
71、侦听器 deep
【1】如果监听的是对象，对象里面的属性不会被监听。可以通过deep选项，让监听器深度监听。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>主页</title>
</head>
<body>
<div id="app"><input type="text" v-model="info.name"/>
</div>
</body>
<!--1.导入vue.js-->
<script src="./src/lib/vue.js"></script>
<!--2.创建vue实例-->
<script>const vm = new Vue({el: '#app',data: {info: {name: "陈翔"}},watch: {info: { // 对象形式的handler(newV, oldV) {console.log(newV, oldV)let list = ['陈翔', '球球', '蘑菇头'];list = list.filter(item => item === newV.name)if (list.length > 0) {console.log("用户名已存在");}},immediate: true,deep: true // 深度监视}}});
</script>
</html>
****************************************************************************************************************************************************************************
73、计算属性！！！！
【1】很重要。通过一些列运算之后，得到的一个属性值。这个属性值可以在模板或者methods中使用。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>主页</title>
</head>
<body>
<div id="app">R: <input type="text" v-model="r"/><br/>G: <input type="text" v-model="g"/><br/>B: <input type="text" v-model="b"/><hr/><div :style="{backgroundColor:`rgb(${r},${g},${b})`}">{{`rgb(${r},${g},${b})`}}</div><button @click="">随机获取颜色</button>
</div>
</body>
<link rel="stylesheet" href="./src/lib/bootstrap.css">
<!--1.导入vue.js-->
<script src="./src/lib/vue.js"></script>
<!--2.创建vue实例-->
<script>const vm = new Vue({el: '#app',data: {r: 0,g: 0,b: 0}});
</script>
</html>
【2】每次动态拼接值，很麻烦，怎么解决呢？？？
****************************************************************************************************************************************************************************
74、计算属性的使用
【1】定义的时候是普通方法。使用的时候当成普通属性使用。实现代码复用。自动求值（只要依赖的数据源变化，计算属性会自动重新求值）
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>主页</title>
</head>
<body>
<div id="app">R: <input type="text" v-model="r"/><br/>G: <input type="text" v-model="g"/><br/>B: <input type="text" v-model="b"/><hr/><div :style="{backgroundColor:rgb}">{{rgb}} <!--这里是当做属性用--></div>
</div>
</body>
<link rel="stylesheet" href="./src/lib/bootstrap.css">
<!--1.导入vue.js-->
<script src="./src/lib/vue.js"></script>
<!--2.创建vue实例-->
<script>const vm = new Vue({el: '#app',data: {r: 0,g: 0,b: 0},// 计算属性，定义到这个节点下面computed: {rgb() { // 返回的是rgb属性return `rgb(${this.r},${this.g},${this.b})` // es6语法}}});
</script>
</html>
****************************************************************************************************************************************************************************
75、axios使用
【1】专注于网络请求的库。无论vue还是react都是用axios发送网络请求。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>主页</title>
</head>
<body>
<div id="app"><button @click="myRequest">发送axios请求</button>
</div>
</body>
<link rel="stylesheet" href="./src/lib/bootstrap.css">
<!--1.导入vue.js-->
<script src="./src/lib/vue.js"></script>
<script src="./src/lib/axios.js"></script>
<!--2.创建vue实例-->
<script>const vm = new Vue({el: '#app',data: {name: "陈翔"},methods: {myRequest() {const result = axios({method: "POST",url: "http://localhost:8002/user/login",// URL中查询参数params: {},// 请求体data: {"name": "admin","password": "123456"}})result.then(res => {console.log(res);})}}});
</script>
</html>
****************************************************************************************************************************************************************************
76、结合async与await调用
【1】只要某个方法的返回值是Promise实例，则前面可以添加async...await。这时候就不用使用then了
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>主页</title>
</head>
<body>
<div id="app"><button @click="myRequest">发送axios请求</button>
</div>
</body>
<link rel="stylesheet" href="./src/lib/bootstrap.css">
<!--1.导入vue.js-->
<script src="./src/lib/vue.js"></script>
<script src="./src/lib/axios.js"></script>
<!--2.创建vue实例-->
<script>const vm = new Vue({el: '#app',data: {name: "陈翔"},methods: {async myRequest() {const result = await axios({method: "POST",url: "http://localhost:8002/user/login",// 请求体data: {"name": "admin","password": "123456"}})console.log(result)}}});
</script>
</html>
【2】解构与赋值
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>主页</title>
</head>
<body>
<div id="app"><button @click="myRequest">发送axios请求</button>
</div>
</body>
<link rel="stylesheet" href="./src/lib/bootstrap.css">
<!--1.导入vue.js-->
<script src="./src/lib/vue.js"></script>
<script src="./src/lib/axios.js"></script>
<!--2.创建vue实例-->
<script>const vm = new Vue({el: '#app',data: {name: "陈翔"},methods: {async myRequest() {const {data} = await axios({ //!!!!!!!!!!!!!!!!!!!!!!!!!!!method: "POST",url: "http://localhost:8002/user/login",// 请求体data: {"name": "admin","password": "123456"}})console.log(data)}}});
</script>
</html>
****************************************************************************************************************************************************************************
78、axios.get与axios.post
【1】主流post请求使用
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>主页</title>
</head>
<body>
<div id="app"><button @click="myRequest">发送axios请求</button>
</div>
</body>
<link rel="stylesheet" href="./src/lib/bootstrap.css">
<!--1.导入vue.js-->
<script src="./src/lib/vue.js"></script>
<script src="./src/lib/axios.js"></script>
<!--2.创建vue实例-->
<script>const vm = new Vue({el: '#app',data: {name: "陈翔"},methods: {myRequest() {axios.post("http://localhost:8002/user/login", {name: "admin",password: "123456"}).then(res => {console.log(res.data);})}}});
</script>
</html>
****************************************************************************************************************************************************************************
79、vue-cli概述与安装 【1】单页面应用程序。麻雀虽小，五脏俱全。 【2】vue-cli是vue.js开发的标准工具。简化了程序员基于webpack创建工程化Vue项目的过程。程序员只需要专注写应用，而不必花几天去纠结webpack配置。 【3】安装和使用 npm i -g @vue/cli -force ************************************************** vue -V 查看是否安装成功 ************************************************** vue create day_app ************************************************** Manually select features选择这个 ************************************************** CSS Pre-processors通过空格选中 ************************************************** 2.x版本先选择 ************************************************** less选择后回车 ************************************************** In dedicated config files选择 ************************************************** y选择 ************************************************** HIT-2023
****************************************************************************************************************************************************************************
81、vue-cli创建项目的启动效果 【1】npm run serve 【2】访问localhost:8080
****************************************************************************************************************************************************************************
82、项目目录概述 【1】node_modules 第三方包。src源代码目录。 【2】assets静态资源。components 组件的集合，程序员封装的可复用的组件都要放在这下面。 【3】main.js是项目的入口文件。相当于index.js文件 【4】App.vue是项目的根组件
****************************************************************************************************************************************************************************
84、vue项目的运行过程
【1】很单纯，就是通过main.js把App.vue渲染到index.html的指定区域中。
*****************************************************
import Vue from 'vue'
// 导入App.vue组件，将来要把App.vue中的结构渲染到HTML页面中
import App from './App.vue'Vue.config.productionTip = falsenew Vue({// 通过render函数指定组件，渲染到HTML页面中render: h => h(App),
}).$mount('#app')
【2】$mount('#app') 就相当于 el:"#app"
****************************************************************************************************************************************************************************
86、vue组件的三个组成部分
【1】组件化就是对UI结构的封装与复用。
【2】组件的后缀名都是.vue。App组件。
【3】template 组件的模板结构。script 组件的js行为。style组件的样式。
<!--第1部分-->
<template><h1 class="box">App.vue组件---{{name}}</h1>
</template><!--第2部分-->
<script>export default {data() { // 组件里的data不能指向对象，必须要写成方法return {name: '陈翔',}},}
</script><!--第3部分-->
<style>.box {background-color: pink;}
</style>
****************************************************************************************************************************************************************************
87、vue组件中定义方法
【1】属性只能以方法的形式定义。
<!--第1部分-->
<template><div><h1 class="box">App.vue组件---{{name}}</h1><button @click="changeName">修改姓名</button></div>
</template><!--第2部分-->
<script>export default {data() { // 组件里的data不能指向对象，必须要写成方法return {name: '陈翔',}},methods: {changeName() {this.name = "球球"}},watch: {},computed: {},filters: {}}
</script><!--第3部分-->
<style>.box {background-color: pink;}
</style>
****************************************************************************************************************************************************************************
88、启用less语法以及唯一根节点
【1】template下面只能放一个唯一的div，外面必须有个最大的div
【2】<style>
<!--第1部分-->
<template><div><h1>App.vue组件---{{name}}</h1><button @click="changeName">修改姓名</button></div>
</template><!--第2部分-->
<script>export default {data() { // 组件里的data不能指向对象，必须要写成方法return {name: '陈翔',}},methods: {changeName() {this.name = "球球"}},watch: {},computed: {},filters: {}}
</script><!--第3部分！！！！！！！！！！！！！！！！！！！！！！-->
<style>.box {background-color: pink;h1 {color: red;}}
</style>
****************************************************************************************************************************************************************************
90、使用组件的三个步骤
【1】父子关系。组件封装好之后是彼此独立的。
【2】当App.vue使用了Left.vue与Right.vue之后，才形成了父子关系。
【3】分为下面三个步骤使用。
步骤1：import语法导入需要的组件
import Left from "@/components/Left";
*******************************************************************
步骤2：使用components节点注册组件components: {Left,Right},data() { // 组件里的data不能指向对象，必须要写成方法return {name: '陈翔',}},
*******************************************************************
步骤3：以标签的形式使用注册后的组件
<Left></Left>
<Right></Right>
*******************************************************************
<!--第1部分-->
<template><div><h1>App.vue组件---{{name}}</h1><button @click="changeName">修改姓名</button><Left></Left><Right></Right></div>
</template><!--第2部分-->
<script>// 导入需要使用的组件import Left from "@/components/Left";import Right from "@/components/Right";export default {components: {Left,Right},data() { // 组件里的data不能指向对象，必须要写成方法return {name: '陈翔',}},methods: {changeName() {this.name = "球球"}},watch: {},computed: {},filters: {}}
</script><!--第3部分-->
<style>.box {background-color: pink;h1 {color: red;}}
</style>
****************************************************************************************************************************************************************************
93、Vue.components的使用
【1】通过components注册的是私有子组件。如果在A的components注册了F，F只能在A中使用，不能用于其他组件。如果其他组件要使用，F也要在对应组件注册。
【2】如果某个组件被频繁的使用，则该组件可以注册为全局组件。在main.js注册为全局的组件。
// 导入App.vue组件，将来要把App.vue中的结构渲染到HTML页面中
import App from './App.vue'
import Vue from 'vue'
import Count from "@/components/Count"; // ！！！！！！！！！！！！Vue.config.productionTip = false
Vue.component("Count", Count) // ！！！！！！！！！！！！new Vue({// 通过render函数指定组件，渲染到HTML页面中render: h => h(App),
}).$mount('#app')
****************************************************************************************************************************************************************************
95、组件里的props
【1】如果两个组件都分别使用了Count.vue组件，如何给Count指定属性赋初始值。props就可以解决这个问题，极大的提高了组件的复用性。
<template><div>我是Count.vue组件<p>count的值是{{init}}</p><button @click="init=init+1">点击+1</button></div>
</template><script>export default {name: "Count",props: ['init'],data() {return {count: 0}},methods: {}}
</script><style scoped>.box {background-color: gray;}
</style>
***************************************************************************
<template><div>我是Left.vue组件<Count :init="1"></Count></div>
</template><script>export default {name: "Left"}
</script><style scoped>.box {background-color: yellow;}
</style>
*****************************************************************************
<template><div>我是Right.vue组件<Count :init="20"></Count></div>
</template><script>export default {name: "Right"}
</script><style scoped>.box {background-color: green;}
</style>
****************************************************************************************************************************************************************************
97、props是只读的。
【1】比如直接修改init在控制台console中会报错Avoid mutating a prop directly since the value will be overwritten whenever
the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "init"
【2】说明props是只读的。所以初始值赋给count，然后count=count+1
<template><div>我是Count.vue组件<p>count的值是{{count}}</p><button @click="count=count+1">点击+1</button></div>
</template><script>export default {name: "Count",props: ['init'],data() {return {count: this.init //！！！！！！！！！！！！！！！！！！！！！！！！！！！！！}},methods: {}}
</script><style scoped>.box {background-color: gray;}
</style>
****************************************************************************************************************************************************************************
98、props给默认值
【1】如果用户不传给默认值0。props: {init: {default: 0}},data() {return {count: this.init}}
【2】type值类型，这样直接传就行了，不用额外加:init就能接收到数值类型。props: {init: {default: 0,type: Number // ！！！！！！！！！ String Boolean}}
****************************************************************************************************************************************************************************
100、props-required必填项
【1】不传就会报错！！！！！！！！props: {init: {default: 0,type: Number,required: true}}
**************************************************************************
vue.runtime.esm.js?c320:4605 [Vue warn]: Missing required prop: "init"
****************************************************************************************************************************************************************************
101、组件间的样式冲突
【1】就是父组件的样式，不应该覆盖子组件的样式。scoped
<style scoped>.box {background-color: yellow;}
</style>
****************************************************************************************************************************************************************************
102、样式穿透 【1】使用第三方组件库的时候，如果需要修改组件默认样式，需要用到/deep/ 来修改
****************************************************************************************************************************************************************************
103、vue组件的实例对象 【1】<Count :init="0"></Count>用标签的形式使用组件，该组件就被实例化了。Count使用的时候就被实例化了。
****************************************************************************************************************************************************************************
104、生命周期 【1】一个组件（比如Count.vue）从创建-运行-销毁的整个阶段，强调的是时间段。 【2】创建阶段：beforeCreate、created、beforeMount、mounted 【3】组件运行阶段：beforeUpdate、updated 【4】组件销毁阶段beforeDestroy、destroyed
****************************************************************************************************************************************************************************
105、组件创建
【1】main.js-App.vue-Left.vue/Right.vue-Count.vue
【2】注册组件Test到App中使用。
<template><div><h3>Test.vue组件</h3></div>
</template><script>export default {name: "Test"}
</script><style scoped>.box {background-color: pink;height: 200px;}
</style>
****************************************************************************************************************************************************************************
106、beforeCreated、created
【1】beforeCreated这个函数不重要，因为很多东西还做不了。下面做了演示。
<template><div><h3>Test.vue组件</h3></div>
</template><script>export default {name: "Test",props: ['info'],data() {return {name: "陈翔"}},methods: {show() {console.log("Test组件的show方法")}},beforeCreate() {//console.log(this.info);//console.log(this.name);this.show();}}
</script><style scoped>.box {background-color: pink;height: 200px;}
</style>
【2】created用的多，props data methods都初始化完毕了。这个函数很重要，这个阶段可以发起axios请求去拿数据。
****************************************************************************************************************************************************************************
107、beforeMount、mounted
【1】created阶段不能操作dom。因为一些模板结构还没有生成。
【2】beforeMount只是在内存中有结构，页面上还没有dom结构。这个函数没有什么意义
【3】mounted这个阶段是真正的dom渲染阶段。所以ed的用的还是很多的。这个函数也非常重要！！！！！！！！！！！mounted() {let div = document.getElementsByClassName('box');console.log(div);}
****************************************************************************************************************************************************************************
108、组件运行阶段生命周期
【1】beforeUpdate、updated
【2】数据改变时，才会触发beforeUpdate。 <button @click="change">追加后缀+</button>。dom结构还没重新渲染。
<template><div><h3>Test.vue组件-{{name}}</h3><button @click="change">追加后缀+</button></div>
</template><script>export default {name: "Test",props: ['info'],data() {return {name: "陈翔"}},methods: {show() {console.log("Test组件的show方法")},change() {this.name = this.name + "六点半";}},beforeCreate() {//console.log(this.info);//console.log(this.name);// this.show();},created() {console.log(this.info);console.log(this.name);this.show();},mounted() {let div = document.getElementsByClassName('box');console.log(div);},beforeUpdate() {console.log("beforeUpdate")}}
</script><style scoped>.box {background-color: pink;height: 200px;}
</style>
【3】updated代表dom已经重新渲染完毕了。
****************************************************************************************************************************************************************************
109、销毁阶段的生命周期函数
【1】这个阶段极少用。了解下就行了。
<!--第1部分-->
<template><div><h1>App.vue组件---{{name}}</h1><button @click="changeName">修改姓名</button><Left></Left><Right></Right><Test info="您好" v-if="flag"></Test><button @click="flag=!flag">换下Test.vue的展示</button></div>
</template><!--第2部分-->
<script>// 导入需要使用的组件import Left from "@/components/Left";import Right from "@/components/Right";import Test from "@/components/Test";export default {components: {Left,Right,Test},data() { // 组件里的data不能指向对象，必须要写成方法return {name: '陈翔',flag: true}},methods: {changeName() {this.name = "球球"}},watch: {},computed: {},filters: {}}
</script><!--第3部分-->
<style>.box {background-color: pink;border: 3px solid black;h1 {color: red;}}
</style>
****************************************************************
<template><div><h3>Test.vue组件-{{name}}</h3><button @click="change">追加后缀+</button></div>
</template><script>export default {name: "Test",props: ['info'],data() {return {name: "陈翔"}},methods: {show() {console.log("Test组件的show方法")},change() {this.name = this.name + "六点半";}},beforeCreate() {//console.log(this.info);//console.log(this.name);// this.show();},created() {console.log(this.info);console.log(this.name);this.show();},mounted() {let div = document.getElementsByClassName('box');console.log(div);},beforeUpdate() {console.log("beforeUpdate")},destroyed() {console.log("Test.vue组件被销毁了");}}
</script><style scoped>.box {background-color: pink;height: 200px;}
</style>
【2】重要的函数都是以ed结尾的重要！！！
****************************************************************************************************************************************************************************
110、组件之间的数据共享
【1】组件之间最常见的关系是父子关系+兄弟关系。
【2】父->子传数据。App.vue 把 name: '陈翔' 传给Left.vue使用<Left :name="name" :dog="dog"></Left>**************************************************************************props: ['name', 'dog']
**************************************************************************
父组件传过来的人名：{{name}}
父组件传过来的狗子：姓名{{dog.name}} 年龄：{{dog.age}}
****************************************************************************************************************************************************************************
111、父向子传值-演示
【1】父组件App.vue
<!--第1部分-->
<template><div><h1>App.vue组件</h1><Left :group="group" :userInfo="userInfo"></Left></div>
</template><!--第2部分-->
<script>// 导入需要使用的组件import Left from "@/components/Left";export default {components: {Left,},data() { // 组件里的data不能指向对象，必须要写成方法return {group: '万达',userInfo: {name: "王思聪",age: 18}}},}
</script><!--第3部分-->
<style>.box {background-color: pink;border: 3px solid black;h1 {color: red;}}
</style>
【2】子组件Left.vue
<template><div>我是Left.vue组件父组件传过来的group值是{{group}}父组件传过来的userInfo值是{{userInfo}}</div>
</template><script>export default {name: "Left",props: ['group', 'userInfo']}
</script><style scoped>.box {background-color: yellow;}
</style>
【3】实际开发中不要修改父组件传给子组件的值。属性需要子组件中用props:['name','list']声明。
****************************************************************************************************************************************************************************
113、子向父传值
【2】子-父组件。子组件向父组件传值，需要使用自定义事件。
<template><div>我是Left.vue子组件{{count}}<br/><button @click="add">点击+1</button></div>
</template><script>export default {name: "Left",data() {return {count: 0}},methods: {add() {this.count = this.count + 1// 自定义事件 传值给父组件this.$emit('giveValueToFather', this.count) // ！！！！！！！！！！！}}}
</script><style scoped>.box {background-color: yellow;}
</style>
【3】父组件接收
<!--第1部分-->
<template><div><h1>App.vue父组件---{{countFromSon}}</h1><Left @giveValueToFather="fatherGetMethod"></Left> <!--！！！！！！！！！！！！！！！！！！！！--></div>
</template><!--第2部分-->
<script>// 导入需要使用的组件import Left from "@/components/Left";export default {components: {Left,},data() {return {// 定义从子组件传值的属性countFromSon: 0}},methods: {fatherGetMethod(newVal) { // ！！！！！！！！！！！！！！！！！！！！！！this.countFromSon = newVal;}}}
</script><!--第3部分-->
<style>.box {background-color: pink;border: 3px solid black;h1 {color: red;}}
</style>
****************************************************************************************************************************************************************************
114、兄弟组件之间的数据共享
【1】共享方案是EventBus。eventBus.js
import Vue from 'vue'export default new Vue()
【2】 Left.vue
<template><div class="box">我是Left.vue子组件(兄弟A)<br/><button @click="sendMsg">发送数据</button></div>
</template><script>import eventBus from "@/components/eventBus"; // ！！！！！！！！！！！export default {name: "Left",data() {return {msg: '黑云压城城欲摧，甲光向日金鳞开'}},methods: {sendMsg() {// 通过eventBus发送数据eventBus.$emit("sendMsgToBrotherRight", this.msg)// ！！！！！！！！！！！}}}
</script><style scoped>.box {background-color: yellow;}
</style>
【3】Right.vue
<template><div class="box">我是Right.vue子组件(兄弟B)---{{msgFromBrotherLeft}}<br/></div>
</template><script>import eventBus from "@/components/eventBus";export default {name: "Right",data() {return {msgFromBrotherLeft: ''}},created() {eventBus.$on('sendMsgToBrotherRight', getVal => { // ！！！！！！！！！！！this.msgFromBrotherLeft = getVal})}}
</script><style scoped>.box {background-color: deepskyblue;}
</style>
【4】其实这个也可以用于父子传，卧槽！！！！
****************************************************************************************************************************************************************************
117、组件之间的数据共享
【1】父-子传值：自定义属性。父组件绑定属性。子组件生命props接收，这种最简单。
【2】子-父传值：自定义事件。子组件定义属性，子组件this.$emit('giveValueToFather',this.属性)。父组件使用@giveValueToFather="getNewVal" 来更新数据到父组件属性
【3】兄弟组件之间的数据传递：eventBus.js 。 eventBus.$emit("sendMsgToBrotherRight", this.msg)。
***************************************************************************eventBus.$on('sendMsgToBrotherRight', getVal => {this.msgFromBrotherLeft = getVal})
相关文章：
VUE2从入门到精通（一）
**************************************************************************************************************************************************************************** 1、课程概述 【1】前置储备：HTMLCSSJS、WebAPI、Ajax、Node.js 【2】1天&…...
cmake进阶：文件操作之写文件
一. 简介 cmake 提供了 file() 命令可对文件进行一系列操作，譬如读写文件、删除文件、文件重命名、拷贝文件、创建目录等等。 接下来 学习这个功能强大的 file() 命令。 本文学习 CMakeLists.txt语法中写文件操作。 二. cmake进阶：文件操作之写文件…...
ubuntu 安装单节点HBase
下载HBase mkdir -p /home/ellis/HBase/ cd /home/ellis/HBase/ wget https://downloads.apache.org/hbase/2.5.8/hbase-2.5.8-bin.tar.gz tar -xvf hbase-2.5.8-bin.tar.gz安装java jdk sudo apt install openjdk-11-jdksudo vim /etc/profileexport JAVA_HOME/usr/lib/jvm/…...
HTTP 多个版本
了解一下各个版本的HTTP。 上个世纪90年代初期，蒂姆伯纳斯-李（Tim Berners-Lee）及其 CERN的团队共同努力，制定了互联网的基础，定义了互联网的四个构建模块： 超文本文档格式（HTML） …...
【DevOps】探索Linux命令行世界：深入了解Shell的力量
目录 一、Linux Shell 详细介绍 1. Shell基础概念 2. Shell的功能特性 3. 常用Shell命令与技巧 4. 高级Shell特性与实践 二、常见的Shell及其比较 1. Bash (Bourne Again SHell) 2. Zsh (Z Shell) 3. Fish (Friendly Interactive SHell) 4. Ksh (Korn SHell) 5. Csh …...
互斥量的使用
文章目录 前言一、互斥量与二进制信号量二、优先级反转与优先级继承三、递归锁 前言 通过学习上一章互斥量理论基础，这一章我们来做一些实验进行验证。 一、互斥量与二进制信号量 互斥量使用和二进制信号量类似 互斥量有优先级继承功能，二进制信号量没有…...
关于面试真题的压迫
1.请描述一下您在使用JavaScript进行DOM操作时，如何提高页面性能和用户体验？ 使用事件委托：在父元素上监听事件，而不是为每个子元素都添加事件监听器。这样可以减少事件处理程序的数量，提高性能。 缓存DOM查询&#x…...
1700java进销存管理系统Myeclipse开发sqlserver数据库web结构java编程计算机网页项目
一、源码特点 java web进销存管理系统是一套完善的java web信息管理系统，对理解JSP java编程开发语言有帮助，系统具有完整的源代码和数据库，系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发，数据库为sqlser…...
mysql数据库（排序与分页）
目录 一. 排序数据 1.1 排序规则 1.2 单列排序 1.我们也可以使用列的别名，给别名进行排序 2.列的别名只能在 ODER BY 中使用， 不能在WHERE中使用。 3.强调格式：WHERE 需要在 FROM 后， ORDER BY 之前 1.3 二级排序&…...
Android 实时监听Activity堆栈变化（系统应用）
private val mIActivityManager: IActivityManager ActivityManagerNative.asInterface(ServiceManager.getService(Context.ACTIVITY_SERVICE)) 方式一（registerProcessObserver） ： mIActivityManager.registerProcessObserver(mIProcess…...
双目深度估计原理立体视觉
双目深度估计原理&立体视觉 0. 写在前面1. 双目估计的大致步骤2. 理想双目系统的深度估计公式推导3. 双目标定公式推导4. 极线校正理论推导 0. 写在前面 双目深度估计是通过两个相机的对同一个点的视差来得到给该点的深度。 标准系统的双目深度估计的公式推导需要满足:1)两…...
Redis探索之旅（基础）
目录 今日良言：满怀憧憬，阔步向前 一、基础命令 1.1 通用命令 1.2 五大基本类型的命令 1.2.1 String 1.2.2 Hash 1.2.3 List 1.2.4 Set 1.2.5 Zset 二、过期策略以及单线程模型 2.1 过期策略 2.2 单线程模型 2.3 Redis 效率为什么这么高 三…...
C语言/数据结构——每日一题（链表的中间节点）
一.前言 今天我在LeetCode刷到了一道单链表题，想着和大家分享一下这道题：https://leetcode.cn/problems/middle-of-the-linked-list。废话不多说让我们开始今天的知识分享吧。 二.正文 1.1题目描述 1.2题目分析 这道题有一个非常简便的方法——快慢指…...
这是用VS写的一个tcp客户端和服务端的demo
服务端： 客户端： 其实这里面的核心代码就两行。 客户端的核心代码： //套接字连接服务端 m_tcpSocket->connectToHost(_ip,_port);//通过套接字发送数据m_tcpSocket->write(ui.textEditSend->toPlainText().toUtf8());//如果收到信…...
代码随想录算法训练营day18 | 102.二叉树的层序遍历、226.翻转二叉树、101. 对称二叉树
102.二叉树的层序遍历 迭代法 层序遍历使用队列，同时记录每层的个数 class Solution:def levelOrder(self, root: Optional[TreeNode]) -> List[List[int]]:res []if not root:return resqueue collections.deque()queue.append(root)while queue:size len…...
工厂自动化升级改造参考（01）--设备通信协议详解及选型
以下是整合了通信协议的特点、应用场景、优缺点以及常用接口方式的描述： 以太网/IP: 来历: 以太网是一种局域网技术，由罗伯特梅特卡夫和大卫博格在1973年开发。IP是网络层协议，负责在网络中的设备间传输数据。特点：基于标准的以太网技术，使用TCP/IP协议栈，支持高速数据传…...
数据结构与算法之经典排序算法
一、简单排序 在我们的程序中，排序是非常常见的一种需求，提供一些数据元素，把这些数据元素按照一定的规则进行排序。比如查询一些订单按照订单的日期进行排序，再比如查询一些商品，按照商品的价格进行排序等等。所以&a…...
VSCode通过SSH连接虚拟机Ubuntu失败
问题说明 最近使用VSCode通过SSH连接Ubuntu，通过VSCode访问Ubuntu进行项目开发，发现连接失败 在VSCode中进行SSH配置 这些都没有问题，但在进行连接时候出现了问题，如下： 出现了下面这个弹窗 解决方法 发现当…...
在Codelab对llama3做Lora Fine tune微调
Unsloth 高效微调大模型的工具，通过Unsloth微调Llama3, Mistral, Gemma 速度提升2-5倍，内存减少70%！ Codelab 创建一个jupyter notebook 选择 T4 GPU 安装Fine tune 相关的lib %%capture import torch major_version, minor_version torch…...
KEIL 5.38的ARM-CM3/4 ARM汇编设计学习笔记13 - STM32的SDIO学习5 - 卡的轮询读写擦
KEIL 5.38的ARM-CM3/4 ARM汇编设计学习笔记13 - STM32的SDIO学习5 - 卡的轮询读写擦 一、前情提要二、目标三、技术方案3.1 读写擦的操作3.1.1 读卡操作3.1.2 写卡操作3.1.3 擦除操作 3.2 一些技术点3.2.1 轮询标志位的选择不唯一3.2.2 写和擦的卡状态查询3.2.3 写的速度 四、代…...
【C++】HP-Socket（三）：UdpClient、UdpServer、UdpCast、UdpNode的区别
1、简述 UDP是无连接的，在UDP传输层中并没有客户端和服务端的概念。但是可以在应用层定义客户端和服务端，可以灵活的互换客户端和服务端，或者同时既是客户端也是服务端。 HP-Socket中在应用层定义了四种UDP组件：UdpClient、UdpS…...
java设计模式六 访问者
访问者模式（Visitor Pattern）是一种设计模式，它允许你将算法附加到对象结构中的各个元素上，而不必修改对象结构本身。它主要用于处理对象结构非常稳定，但频繁需要在此结构上执行不同操作的场景。访问者模式通过将操作移…...
中间件研发之Springboot自定义starter
Spring Boot Starter是一种简化Spring Boot应用开发的机制，它可以通过引入一些预定义的依赖和配置，让我们快速地集成某些功能模块，而无需繁琐地编写代码和配置文件。Spring Boot官方提供了很多常用的Starter，例如spring-boot-star…...
libcity笔记：添加新模型（以RNN.py为例）
创建的新模型应该继承AbstractModel或AbstractTrafficStateModel 交通状态预测任务——>继承 AbstractTrafficStateModel类轨迹位置预测任务——>继承AbstractModel类 1 AbstractTrafficStateModel 2 RNN 2.1 构造函数 2.2 predict 2.3 calculate_loss...
Ansible---自动化运维工具
一、Ansible概述 1.1 Ansible简介 Ansible是一款自动化运维工具，通过ssh对目标主机进行配置、应用部署、任务执行、编排调度等操作。它简化了复杂的环境管理和自动化任务，提高了工作效率和一致性，同时，Ansible的剧本(playbooks)…...
5.Git
Git是一个分布式版本控制工具，主要用于管理开发过程中的源代码文件（Java类、xml文件、html文件等）。通过Git仓库来存储和管理这些文件，Git仓库分为两种 本地仓库：开发人员自己电脑上的Git仓库远程仓库：远程…...
探索中位数快速排序算法：高效寻找数据集的中间值
在计算机科学领域，寻找数据集的中位数是一个常见而重要的问题。而快速排序算法作为一种高效的排序算法，可以被巧妙地利用来解决中位数查找的问题。本文将深入探讨中位数快速排序算法的原理、实现方法以及应用场景，带你领略这一寻找中间值的高…...
密码学《图解密码技术》 记录学习 第十五章
目录 十五章 15.1本章学习的内容 15.2 密码技术小结 15.2.1 密码学家的工具箱 15.2.2 密码与认证 15.2.3 密码技术的框架化 15.2.4 密码技术与压缩技术 15.3 虚拟货币——比特币 15.3.1 什么是比特币 15.3.2 P2P 网络 15.3.3地址 15.3.4 钱包 15.3.5 区块链 15.3.…...
如何在 Ubuntu 16.04 上为 Nginx 创建自签名 SSL 证书
简介 TLS，即传输层安全协议，及其前身SSL，即安全套接字层，是用于将普通流量包装在受保护的加密包装中的网络协议。 使用这项技术，服务器可以在服务器和客户端之间安全地发送流量，而不会被外部方拦截。证书…...
5.协议的编解码
本章内容其实没有多大难度，主要考察大家的细心程度.计算数据长度然后截取相应字节数组并按照协议进行解码，编码则反之。 1.基础消息的编解码 Override public BasicMessage decode(byte[] bytes) {int dataLength ByteUtil.bytesToInt(ByteUtil.extra…...
中山做网站建设联系电话/网络营销的网站建设
2751: [HAOI2012]容易题(easy) Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1087 Solved: 477[Submit][Status][Discuss]Description 为了使得大家高兴，小Q特意出个自认为的简单题（easy）来满足大家，这道简单题是描述如下&a…...
企业建网站得多少钱/提高工作效率的工具
转载于:https://www.cnblogs.com/kekeoutlook/p/7475547.html...
如何测试网站速度/网络营销企业有哪些公司
B题“同心协力”策略研究“同心协力”(又称“同心鼓”)是一项团队协作能力拓展项目。该项目的道具是一面牛皮双面鼓，鼓身中间固定多根绳子，绳子在鼓身上的固定点沿圆周呈均匀分布，每根绳子长度相同。团队成员每人牵拉一根绳子，使鼓…...
wordpress如何屏蔽特定国家的用户/电商运营培训班
目录 一、部署 zabbix 代理服务器 1.1 设置 zabbix 的下载源，安装 zabbix-proxy 1.2 安装 zabbix 所需的数据库 1.3 添加数据库用户，以及 zabbix 所需的数据库信息 1.4 导入数据库信息 1.5 修改 zabbix-proxy 配置文件 1.6 启动 zabbix-proxy 1.…...
苏州网站建设seo/百度站长工具域名查询
【简讯】IS0 C委员会正式批准了C编程语言国际标准最终草案(FDIS)。标准本身已经完成，接下来将是根据委员会会议修改意见更新工作草案，预计将用三周时间完成FDIS草案，然后交给日内瓦的ITTF，最新的C标准将在夏天发布，先前…...
java 电商网站/seo页面链接优化
JNI是Java Native Interface的缩写。从Java 1.1开始，JNI标准成为java平台的一部分，它允许Java和其他语言进行交互。JNI一开始为C和C而设计的，但是它并不妨碍你使用其他语言，只要调用约定受支持就可以了。使用java与本地已编译的代…...