Vue.js

1. v-text v-text主要用来更新textContent，可以等同于JS的text属性。 <span v-text="msg"></span> 这两者等价： <span>{{msg}}</span> 2. v-html 双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。 <div v-html="rawHtml"></div> 这个div的内容将会替换成属性值rawHtml，直接作为HTML进行渲染。 3. v-pre v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。 <div id="app"> <span v-pre>{{message}}</span> //这条语句不进行编译 <span>{{message}}</span> </div> 最终仅显示第二个span的内容 4. v-cloak 这个指令是用来保持在元素上直到关联实例结束时进行编译。 <div id="app" v-cloak> <div> {{message}} </div> </div> <script type="text/javascript"> new Vue({ el:'#app', data:{ message:'hello

vue中的axios.post使用json数据传输，出现请求头字段内容类型是不被允许的情况的解决方案 参考文章： （1）vue中的axios.post使用json数据传输，出现请求头字段内容类型是不被允许的情况的解决方案 （2）https://www.cnblogs.com/Tohold/p/9163773.html 备忘一下。 来源： oschina 链接： https://my.oschina.net/u/4428122/blog/4921086

来源 | https://www.cnblogs.com/xhyccc/p/14242492.html React 社区最火的全局状态管理库必定是 Redux，但是 Redux 本身就是为了大型管理数据而妥协设计的——这就会让一些小一点的应用一旦用上 Redux 就变得复杂无比。 后来又有了 Mobx，它对于小型应用的状态管理确实比 Redux 简单不少。可是不得不说 Mobx+React 简直就是一个繁琐版本的 Vue。所以我也不太喜欢，不如直接用 Vue3。 总而言之，不管是 react-redux 还是 mobx，他们使用的时候都非常复杂，甚至需要你去组件函数或是组件类上修修改改，从审美角度上来说就令人不太喜欢。 直到后来某一天用了 Angular，我就开始对 SOA 产生好感，ng 的 Service 的写法与依赖注入控制反转着实惊艳到了我。 Service 是 Angular 的逻辑复用方法，并且解决了共享状态的问题，那 React 的自定义 Hook 可以达到类似的效果嘛？ 可以，并且会比 Angular 更简洁！！！ 什么是 Service 我们先来想一下，Service 到底是什么？ Service 包含 n 个方法； Service 包含有状态； Service 应该是个单例。 这些方法与状态应该是高度整合的，一个 Service 解决的是一个模块的问题。

本文涉及的slot有：<slot>，v-slot吗，vm.$slots，vm.$scopedSlots 废弃的使用特性：slot，slot-scope，scope（使用v-slot，2.6.0）。 <slot>为vue的内置标签：用于给组件定义一个插槽，在这个插槽里传入内容（可以是模板代码或者组件），达到动态改变组件的目的。 v-slot指令：绑定内容到指定插槽，v-slot 只能添加在一个 <template> 上（当父组件中只提供了默认插槽的内容，v-slot可以写在组件上，见下面默认插槽缩写语法） 给插槽设置默认内容，在没有提供内容的时候被渲染。 < button type ="submit" > < slot > Submit </ slot > </ button > 具名插槽 栗子：<base-layout> 组件 < div class ="container" > < header > < slot name ="header" ></ slot > </ header > < main > < slot ></ slot > //默认插槽，不带 name 的 <slot> 出口会带有隐含的名字“default”。 </ main > < footer > < slot name ="footer" ></ slot > </ footer > </ div >

子:vue <template> <div> <div v-for="(items, indexs) in list" :key="indexs"> <slot :listItem="items"> </slot> </div> <Loadding v-show="show"></Loadding> <Not v-show="!show"></Not> </div> </template> <script> import Loadding from "~/components/loadding.vue" import Not from "~/components/Not.vue" import { getScrollHeight, getScrollTop, getWindowHeight, } from "~/plugins/common" export default { components: { // eslint-disable-next-line vue/no-unused-components Loadding, // eslint-disable-next-line vue/no-unused-components Not, }, props: { show: {}, list: {}, total: {}, flag: {}, }, watch: { flag

Vue全局异常捕获 参考文章： （1）Vue全局异常捕获 （2）https://www.cnblogs.com/fangshidaima/p/10175417.html 备忘一下。 来源： oschina 链接： https://my.oschina.net/u/4437974/blog/4919011

这次老板新接了一个四点半官网页面，使用vue来写。emm……我感觉整个人都不好了，两天半解决了20个静态页面。还好vue写页面简直飞快，遇到一个vue的新坑，使用百度地图。 研究了好一会，总是报错BMap is not defined 我只有一个页面需要用到地图，所以我是使用cdn引入的方式来写的，并没有像网上一些教程一样使用npm引入安装。 直接简单粗暴的根据百度地图api来写，虽然报错。那就解决报错的bug就行了。好了，下面开始说说步骤 在需要页面的处引入cdn： < script type ="text/javascript" src ="http://api.map.baidu.com/api?v=2.0&ak=您的密钥" ></ script > 我的是在 </ template > 标签结尾后引用的 在webpack配置里module.exports中加个externals： module.exports = { context: path.resolve(__dirname, '../'), entry: { // app: './src/main.js' app: ["babel-polyfill", "./src/main.js"] //引入babel-polyfill 兼容IE }, externals: { "BMap": "BMap" }, } 此处依旧报错