el： 元素的挂载位置
data
1.如何理解前端渲染
v-pre
v-text
v-html
v-once
mvvm m(model) v(view) vm(view-model)
v > vm > m 事件监听 m > vm > v 数据绑定
stop prevent....
keyup: event, delete 自定义
v-model 底层使用v-bind 和 v-on实现
样式绑定相关语法细节
1.对象绑定和数组绑定可以结合使用
2 class绑定的值可以简化操作
3 默认的class会被保留
v-if, v-else-if,v-else,v-show
v-if, v-else-if, v-else 控制元素有无
v-show 控制显示
number ，trim，lazy
函数体，缓存
beforeCreate，
-
data必须是一个函数
-
组件模板内容必须是单个根元素
-
组件模板内容可以是模板字符串
驼峰式命名方式只能在字符串中调用，在普通模板中要采用短横线方式使用
只能在所注册的父组件中使用
原生ajax、基于Jquery的ajax、fetch、axios
异步处理的
多次异步调用的依赖分析
多次异步请求的顺序不确定
p.then()
p.catch()
text(), json()
- 引入相关的库文件
- 添加路由链接
- 添加路由填充位
- 定义路由组件
- 配置路由规则并创建路由实例
- 把路由挂载到Vue根实例中
给路由规则起个别名
this.$router.push('hash地址')
this.$router.go(h)
每一个js文件都是一个独立的模块
导入 import
导出 export
-
默认导出与默认导入
每个模块只允许使用一次export默认导出数据
-
按需导出与按需导入
-
直接导入并执行模块代码
① 新建项目空白目录，并运行 npm init -y 命令，初始化包管理配置文件 package.json
② 新建 src 源代码目录
③ 新建 src -> index.html 首页
① 运行 npm install webpack webpack-cli -D 命令，安装 webpack 相关的包
② 在项目中，创建名为 webpack.config.js 的webpack 配置文件
③ 在webpack 的配置文件中，初始化如下基本配置:
module.exports = {
// mode 用来指定构建模式，development 打包不压缩， production 打包压缩
mode: "development",
}④ 在 package.json 配置文件中的 scripts 节点下，新增 dev 脚本如下：
{
"scripts": {
// scripts 节点下的脚本, 可以通过 npm run 执行
"dev" : "webpack"
}
}⑤ 在终端中运行 npm run dev 命令，启动 webpack 进行项目打包。
webpack 的 4.x 版本中默认约定：
- 打包的入口文件为 src -> index.js
- 打包的输出文件为 dist -> main.js
如果需要修改打包的入口与出口，可以在 webpack.config.js 中新增如下的配置信息
// 导入 node.js 中专门操作路径的模块
const path = require("path");
module.exports = {
// 打包入口文件的路径
entry: path.join(__dirname, './src/index.js'),
output: {
// 打包输出文件的存放路径
path: path.join(__dirname, 'dist'),
// 输出文件的名称
filename: 'bundle.js'
}
}① 运行 npm install webpack-dev-server -D 命令，安装支持项目自动打包的工具
② 修改 package.json -> scripts 中的 dev 命令如下:
{
"scripts": {
// scripts 节点下的脚本, 可以通过 npm run 执行
"dev": "webpack-dev-server"
}
}③ 将 src -> index.html 中， script 脚本的引用路径修改为 "/bundle.js"
④ 运行 npm run dev 命令，重新进行打包
⑤ 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果
注意：
- webpack-dev-server 会启动一个时时打包的http服务器，打包后生成的文件放在根目录下
① 运行 npm install html-webpack-plugin -D 命令，安装生成预览页面的插件
② 修改 webpack.config.js 文件头部区域，添加如下配置信息：
// 导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({
// 指定要用到的模板文件
template: "./src/index.html",
// 指定生成的文件的名称，改文件存在于内存中，在目录中不显示
filename: "index.html"
})③ 修改webpack.config.js 文件中向外暴露的配置对象，新增如下配置节点：
module.exports = {
// plugins 数组是 webpack 打包期间会用到的一些插件列表
plugins: [ htmlPlugin ]
}修改package.json 中的配置
// --open 打包完成后自动打开浏览器页面
// --host 访问地址
// --port 访问端口
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8080"
},
}① 运行 npm install style-loader css-loader -D 命令，安装处理css文件的loader
② 在webpack.config.js的moudle -> rules 数组中，添加 loader 规则如下：
// 所有第三方文件模块的匹配规则
module: {
rules: [
{ test: /\.css$/, use : {'style-loader', 'css-loader'}}
]
}其中：test 表示匹配的文件类型，use 表示对应要调用的 loader
注意：
- use 数组中指定的 loader 顺序是固定的
- 多个 loader 的调用顺序是：从后往前调用
① 运行 npm install less-loader less -D 命令
② 在 webpack.config.js 中的 module -> rules 数组中，添加 loader 规则如下：
// 所有第三方文件模块的匹配规则
module: {
rules: [
{ test: /\.less$/, use : ['style-loader', 'css-loader', 'less-loader']}
]
}① 运行 npm install sass-loader node- sacc -D 命令
② 在 webpack.config.js 的 module -> rules 数组中，添加loader规则
// 所欲第三方文件模块的匹配规则
module: {
rules: [
{ test: /\.scss$/. use: ['style-loader', 'css-loader', 'sass-loader']}
]
}① 运行 npm install postcss-loader autoprefixer -D 命令
② 在项目根目录中创建 postcss 的配置文件 postcss.config.js，并初始化如下配置：
// 导入自动添加前缀的插件
const autoprefixer = require("autoprefixer");
module.exports = {
// 挂载插件
plugins: [ autoprefixer ]
}③ 在webpack.config.js 的module -> rules 数组中，修改css 的 loader 规则如下：
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader']}
]
}① 运行 npm install url-loader file-loader
② 在 webpack.config.js 的moudle -> rules 数组中，添加 loader 规则如下：
module:{
rules: [
{
test: /\.jpg|png|gif|bpm|ttf|eot|svg|woff|woff2$/,
use: 'url-loader?limit=16940'
}
]
}① 安装babel转换器相关的包：npm install babel-loader @babel/core @babel/runtime -D
② 安装babel语法插件相关的包：npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
③ 在项目根目录中，创建 babel 配置文件 babel.config.js 并初始化基本配置如下：
module.exports = {
presets： [ '@babel/preset-env' ],
plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
}④ 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
// exculde 为排除项，表示babel-loader不需要处理 node_modules 中的js文件
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}① 运行 npm install vue-loader vue-template-compiler -D 命令
② 在 webpack.config.js 配置文件中，添加vue-loader 的配置项如下：
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
module: {
rules: [
// ... 其他规则
{ test: /\.vue$/, loader: "vue-loader"}
]
},
plugins: [
// ...其他插件
new VueloaderPlugin()
]
}① 运行 npm i vue -S 安装 vue
② 在 src -> index.js 入口文件中，通过 import Vue from 'vue' 来导入 vue 构造函数
③ 创建 vue 的实例对象，并制定要控制的 el 区域
④ 通过 render 函数渲染 App 根组件
// 1.导入 Vue 构造函数
import Vue from 'vue'
// 2.导入 App 根组件
import App from './components/App.vue'
const vm = new Vue({
// 3.指定 vm 实例要控制的页面区域
el: '#app',
// 4.通过 render 函数，把指定的组件渲染到 el 区域中
render: h => h(App)
})上线之前需要通过webpack将应用整体打包， 可以通过 package.json 文件配置打包命令:
{
// 在package.json文件中配置 webpack 打包命令
// 该命令默认加载项目根目录中的 webpack.config.js 配置文件
"scripts": {
// 用于打包的命令
"build": "webpack -p",
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8080"
}
}npm install -g @vue/cli
// 1. 基于 交互式命令行 的方式，创建 新版 vue 项目
vue create my-project
// 2. 基于 图形化界面 的方式，创建 新版 vue 项目
vue ui
// 3. 基于 2.x 的旧版本，创建 旧版 vue 项目
npm install -g @vue/cli
vue init webpack my-project// 必须是符合规范的json语法,如下修改端口为8888，并打开浏览器
"vue" : {
"devServer": {
"port": 8888,
"open": true
}
}注意：不推荐使用这种配置方式
① 在项目的根目录创建文件 vue.config.js
② 在该文件中进行相关配置，从而覆盖默认配置
// vue.config.js
module.exports = {
devServer: {
port: 8888,
open: true
}
}① 安装依赖包 npm install element-ui -S
② 导入 Element-UI 相关资源
// 导入组件库
import Element from "element-ui";
// 导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css';
// 配置 Vue 插件
Vue.use(Element)