vue-12个知识点
vue-知识点（周总结）
一.vue.js
1.下载Vue2.0的两个版本：
官方网站：Vue.js
-
开发版本：包含完整的警告和调试模式
-
生产版本：删除了警告，进行了压缩
2.指令：
-
解释：指令 (Directives) 是带有
v-前缀的特殊属性 -
作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
2-1：v-text 更新DOM对象的 textContent
2-2: v-html 更新DOM对象的 innerHTML
2-3: v-bind
-
作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
-
语法：
v-bind:title="msg" -
简写：
:title="msg"
-
2-4: v-on
-
作用：绑定事件
-
语法：
v-on:click="say"orv-on:click="say('参数', $event)" -
简写：
@click="say" -
说明：绑定的事件定义在
methods
2-5: 事件修饰符
.stop 阻止冒泡，调用 event.stopPropagation()
.prevent 阻止默认行为，调用 event.preventDefault()
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时，才会触发事件
.once 事件只触发一次
2-6: v-model
-
作用：在表单元素上创建双向数据绑定
-
说明：监听用户的输入事件以更新数据
-
案例：计算器
Message is: {{ message }}
2-7:v-for 基于源数据多次渲染元素或模板块
{{ item.text }}{{item}} -- {{index}}
{{item}} -- {{key}}
{{item}}
3.样式处理-class和style
-
使用方式：
v-bind:class="expression"or:class="expression" -
表达式的类型：字符串、数组、对象（重点）
-
语法：
===> 解析后 ===>解析后 ===>解析后 --- style ---
3-1 v-if和v-show
-
条件渲染
-
v-if：根据表达式的值的真假条件，销毁或重建元素 -
v-show：根据表达式之真假值，切换元素的 display CSS 属性
这个元素展示出来了吗？？？
这个元素，在HTML结构中吗？？？
3-2 提升性能：v-pre
说明：vue会跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
{{ this will not be compiled }}
二：使用vue-cli2脚手架创建项目
2.1安装步骤：
1、安装webpack
npm install webpack webpack-cli -g webpack -v(小写)
2.安装vue-cli
npm install vue-cli -g vue -V(大写的)
3.使用终端切换到工作空间目录
C:\Users\root>cd /d F:\自定义盘符及文件夹
4.使用脚手架创建项目
vue init webpack vue-first ? Project name vue-first ? Project description A Vue.js project ? Author Aloys <[email protected]> //这里是系统自动识别出个人git邮箱 ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Set up unit tests No ? Setup e2e tests with Nightwatch? No ? Should we run `npm install` for you after the project has been created? (recommended) npm
5.启动项目
cd vue-first npm run dev
6.访问项目
在浏览中访问：http://localhost:8080
1)修改ip和port
在config/index.js中
dev: {
host: '192.168.102.35',
port: 80,
}
7.项目打包
1) 修改build/webpack.prod.conf.js中
minify: {
//保留双引号
removeAttributeQuotes: false
},
2) 修改config/index.js中
找到 build { assetsPublicPath: '/' }，将其设置为：assetsPublicPath: './ ' 即可。
3) 运行npm run build 命令
4) 项目多了dist编译后的静态资源目录
index.html可以打开或部署服务器
8.项目添加less的支持(版本一定不能高，其它的不要配置)
1)npm install [email protected] --save-dev
2)npm install [email protected] --save-dev
3)在页面中使用
三.使用vue-cli3脚手架创建项目
1、安装@vue/cli脚手架工具
npm install @vue/cli -g
2、查看安装后的vue版本
vue -V(大写)
3、创建项目
vue create vue-20210227
4、选择项目的配置
// 选择一个预设
Please pick a preset: Manually select features
// 选择项目的特征
? Check the features needed for your project: (*) Choose Vue version (*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support (*) Router (*) Vuex (*) CSS Pre-processors (*) Linter / Formatter ( ) Unit Testing ( ) E2E Testing
// 选择vue的版本
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
2.x
3.x (Preview)
// 是否使用history路由
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)--->n
// 选择css预处理器
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
// 选择代码格式化检查工具
? Pick a linter / formatter config: ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config > ESLint + Prettier
// 选择格式化代码的时间
? Pick additional lint features: (Pressto select, to toggle all, to invert selection) (*) Lint on save ( ) Lint and fix on commit
// 选择存放配置文件的位置，使用独立的配置
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
In dedicated config files
In package.json
// 是否保存为模板
? Save this as a preset for future projects? (y/N) y ? Save preset as:temp
5、切换目录，启动项目
cd vue-20210227 npm run serve
6、在地址栏中访问
App running at:
-
Local: http://localhost:8080/
-
Network: http://192.168.102.4:8080/
7、修改启动端口号
1)在package.json同级别的目录下，创建vue.config.js文件
2)编写以下内容
module.exports = {
//开发服务器的配置
devServer: {
host: '127.0.0.1',
port: 8888,
https: false
}
}
3)启动后访问 http://127.0.0.1:8888
8、打包项目
1)vue.config.js文件在先配置大包的参数
module.exports = {
runtimeCompiler: true,
//所有资源使用相对路径
publicPath: './',
//打包后资源存放的目录
outputDir: 'dist',
//设置所有标签属性有双引号
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].title = 'vue-first'
args[0].minify = false
return args
})
},
devServer: {
host: '127.0.0.1',
port: 8888,
https: false
}
}
2)执行打包命令
npm run build
在项目中产生dist文件夹，里面就是打包后静态页面和静态资源
四.过滤器 filter
-
作用：文本数据格式化
-
过滤器可以用在两个地方：
{{}}和 v-bind 表达式 -
两种过滤器：1 全局过滤器 2 局部过滤器
1.全局过滤器
-
说明：通过全局方式创建的过滤器，在任何一个vue实例中都可以使用
-
注意：使用全局过滤器的时候，需要先创建全局过滤器，再创建Vue实例
-
显示的内容由过滤器的返回值决定
Vue.filter('filterName', function (value) {
// value 表示要过滤的内容
})
示例：
{{ dateStr | date }}{{ dateStr | date('YYYY-MM-DD hh:mm:ss') }}
2.局部过滤器
说明：局部过滤器是在某一个vue实例的内容创建的，只在当前实例中起作用
{
data: {},
// 通过 filters 属性创建局部过滤器
// 注意：此处为 filters
filters: {
filterName: function(value, format) {}
}
}
五.监视数据变化 - watch
1.watch
-
概述：
watch是一个对象，键是需要观察的表达式，值是对应回调函数 -
作用：当表达式的值发生变化后，会调用对应的回调函数完成响应的监视操作
-
[VUE $watch]
new Vue({
data: { a: 1, b: { age: 10 } },
watch: {
a: function(val, oldVal) {
// val 表示当前值
// oldVal 表示旧值
console.log('当前值为：' + val, '旧值为：' + oldVal)
},
// 监听对象属性的变化
b: {
handler: function (val, oldVal) { /* ... */ },
// deep : true表示是否监听对象内部属性值的变化
deep: true
},
// 只监视user对象中age属性的变化
'user.age': function (val, oldVal) {
},
}
})
六.计算属性
1.computed
-
注意：
computed中的属性不能与data中的属性同名，否则会报错 -
[Vue computed属性原理]
var vm = new Vue({
el: '#app',
data: {
firstname: 'jack',
lastname: 'rose'
},
computed: {
fullname() {
return this.firstname + '.' + this.lastname
}
}
})
七.slot-插槽
具名插槽 和 作用域插槽 引入了一个新的统一的语法 (即v-slot 指令)。它取代了 slot 和 slot-scope
1.内容插槽
定义两个组件 home.vue、test.vue 然后在home.vue组件中引用test.vue组件
插槽内可以包含普通文本
//home.vueHello Word
//test.vue
当组件渲染的时候，Hello Word
插槽内也可以包含任何模板代码，包括HTML
2.插槽内添加其他组件
//home.vue Hello Word
如果
3.在插槽中使用数据
插槽跟模板其他地方一样都可以访问相同的实例属性(也就是相同的"作用域")，而不能访问
//home.vue//插槽可以获取到home组件里的内容 Hello {{enhavo}} data(){ return{ enhavo:'word' } }
//home.vue //这里是获取不到name的，因为这个值是传给的 Hello {{name}}
规则： 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
八.生命周期
1.vue生命周期钩子函数
生命周期钩子函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，这些事件，统称为组件的生命周期函数！
注：钩子函数的名称都是Vue中规定好的！
1.1钩子函数 - beforeCreate()
-
说明：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
-
注意：此时，无法获取 data中的数据、methods中的方法
1.2钩子函数 - created()
-
注意：这是一个常用的生命周期，可以调用methods中的方法、改变data中的数据
-
vue实例生命周期 参考1
-
vue实例生命周期 参考2
-
使用场景：发送请求获取数据
1.3钩子函数 - beforeMounted()
-
说明：在挂载开始之前被调用
1.4钩子函数 - mounted()
-
说明：此时，vue实例已经挂载到页面中，可以获取到el中的DOM元素，进行DOM操作
1.5钩子函数 - beforeUpdated()
-
说明：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
-
注意：此处获取的数据是更新后的数据，但是获取页面中的DOM元素是更新之前的
1.6钩子函数 - updated()
-
说明：组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作
1.7钩子函数 - beforeDestroy()
-
说明：实例销毁之前调用。在这一步，实例仍然完全可用。
-
使用场景：实例销毁之前，执行清理任务，比如：清除定时器等
1.8钩子函数 - destroyed()
-
说明：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
九.组件通讯
1.父组件到子组件
-
方式：通过子组件
props属性来传递数据 props是一个数组 -
注意：属性的值必须在组件中通过
props属性显示指定，否则，不会生效 -
说明：传递过来的
props属性的用法与data属性的用法相同
2.子组件到父组件
方式：父组件给子组件传递一个函数，由子组件调用这个函数
-
说明：借助vue中的自定义事件（v-on:cunstomFn="fn"）
步骤:
-
1、在父组件中定义方法 parentFn
-
2、在子组件 组件引入标签 中绑定自定义事件 v-on:自定义事件名="父组件中的方法" ==> @pfn="parentFn"
-
3、子组件中通过
$emit()触发自定义事件事件 this.$emit(pfn,参数列表)
3.非父子组件通讯
在简单的场景下，可以使用一个空的 Vue 实例作为事件总线。
3.1 $on()：绑定自定义事件
var bus = new Vue()
// 在组件 B 绑定自定义事件
bus.$on('id-selected', function (id) {
// ...
})
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
示例：组件A ---> 组件B
十.SPA -单页应用程序
1.路由：
-
路由即：浏览器中的哈希值（# hash）与展示视图内容（template）之间的对应规则
-
vue中的路由是：hash 和 component的对应关系
1.1基本使用
安装：npm i -S vue-router
首页 登录
1.2重定向
// 将path 重定向到 redirect
{ path: '/', redirect: '/home' }
2.路由传参
路由传参一般出现场景是，当我们点击某个组件的某个按钮时跳转到另一个组件中，并携带参数，便于第二个组件获取数据。下面我就来说说vue路由传参的三种方式：
2.1通过：冒号的的形式传递传参，页面刷新数据不会丢失
getDescribe(id) {
// 直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/describe/${id}`,
})
需要配置的对应路由如下：
{
path: '/describe/:id',
name: 'Describe',
component: Describe
}
需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。 切记是用 params 方法来获取，不是用 query 来获取。
2.2通过params的方式，路径不会显示传递的参数。
在第一个组件中，通过路由属性中的name来确定匹配的路由，通过params来传递参数。
this.$router.push({
name: 'Describe',
params: {
id: id
}
})
2.3通过query的方式也就是 ？的方式路径会显示传递的参数
第一个组件：使用path来匹配路由，然后通过query来传递参数 这种情况下 query传递的参数会显示在url后面?id=？
this.$router.push({
path: '/describe',
query: {
id: id
}
})
第二个组件:通过query获取参数
this.$route.query.id