vue基本知识(111期6天)

不带参数{{msg|过滤器的名字}}

带参数{{msg|过滤器的名字(参数)}}

串联{{msg|过滤器的名字1|过滤器的名字2}}

如果它们都侦听（依赖）同一个数据项，当数据项变化时，会去执行函数

它们表现格式都是： { xx1(){}, xx2(){} }

计算属性:本质是一个函数。如果这个函数中依赖的数据项变化时，这个函数就会重新执行，它必须要有返回结果。

本质是一个函数。当侦听到某个数据变化时，这个函数就会重新执行，但不一定是依赖这个数据直接得到你想要的数。从函数内的代码逻辑来说：侦听器的逻辑一般会更加复杂。侦听器的返回值是没有意义的。

计算属性 > 侦听器

绑定三元表达式

绑定对象

绑定数组

绑定对象形式

绑定数组形式

methods结尾无需return

@事件名.修饰符1.修饰符2="回调"

.stop

.prevent

.once

.self

<input v-model.lazy="msg">

<input v-model.number="age">

<input v-model.trim="msg">

自定义属性名

props

<my-com1 tit="abc"> <!-- template就是逻辑上的一个容器， 不会被渲染成真实的dom --> <template slot="插槽名字"> <ul class="a2"> <li>这里是从父组件传入的结构</li> </ul> <p>xxxxx</p> </template> </my-com1>

<my-com @自定义事件名1="定义在父组件中的回调"></my-com>

this.$emit(自定义事件名1,参数:数组,对象,字符串等)或者$emit(自定义事件名1,参数:数组,对象,字符串等)

注意:$emit里面的事件名一定要采用小写形式,否则报错

function hashChange() { // location.hash： 自动获取地址栏中的hash值 if(location.hash === '#/index') { document.getElementById('content').innerHTML = "我的主页" } else if(location.hash === '#/myfrend') { document.getElementById('content').innerHTML = "朋友" } else if(location.hash === '#/music') { document.getElementById('content').innerHTML = "音乐" } }

hashchange 事件用来监听hash值的变化

hash的改变也会记录到浏览历史中，通过回退和前进可以切换业务场景

location.hash： 自动获取地址栏中的hash值

const abc = new VueRouter({ routes: [ { path: '/', component: { template: `<div>主页</div>` } }, ]})

查询传参 /aricle?id=1001

路径传参 /article/1001

查询传参： this.$route.query.id

路径传参：this.$route.params.id

<router-link to="/list"></router-link>

<!-- 路径传参 路由规则{path:'/article/:id'}--><router-link to="/article/10001"></router-link><!-- 查询传参 路由规则{path:'/article'}--><router-link to="/article?id=10001"></router-link>

this.$router.push('/detail/100')

接收：this.$route.params.id

this.$router.push('/detail?a=100')

接收:this.$route.query.a

- 由于webpack并不是全局安装的，所以并不能直接使用webpack -v来做检验。- npx是npm5.2之后提供的新功能。它在运行时会在node_modules/.bin中去检查命令是否存在。

https://v4.webpack.docschina.org/configuration/devtool/

https://webpack.docschina.org/configuration/devtool/

开产:development

生产:production

src/index.js

entry: 文件的地址

dist/main.js

配置

是以哪种方式生成sourcemap文件

soutce map文件:

例子

安装loader包:npm i postcss postcss-loader autoprefixer -D

单独设置 postcss.config.js

开发依赖

生产依赖

npx webpack

注意

"webpack": "^4.44.2","webpack-cli": "^3.3.12",

例如

备注