vue随记-白红宇

vue随记

阅读量：6911 次

发布时间：2019-06-27

本文共 4026 字，大约阅读时间需要 13 分钟。

　（一）使用props传值:

　　props:['nameData']

　　父组件传递复合名称数据时使用小写和中划线（-）组合，子组件接收复合名称数据时使用小驼峰。

　（二）路由去 “#”

　　路由配置：

　　mode:'history'

　（三）路由跳转后回到页面的顶部

　　路由配置： 　　scrollBehavior () {   　　return { x: 0, y: 0 } 　　}

　（四）重定向

　　　　‘重定向’指，用户访问 '/a' 路径时，url会被替换成 '/b' 。

　　　　{  　　　　 　　path:'/a',  　　　　　　redirect:'/b' 　　　　} 　　　　重定向至某个子路由：

　　　　{  　　　　 　　path:'/list', 　　　　　　 name:'list'  　　　　　　children:[

　　　　　　　　{
   　　　　　　　　　　path:'/list', 　　　　　　　　　　redirect:'aa', 　　　　　　　　},

　　　　　　　　{
   　　　　　　　　　　path:'aa', 　　　　　　　　　　name:'a', 　　　　　　　　　　component:A 　　　　　　　　}, 　　　　　　　　{
   　　　　　　　　　　path:'bb', 　　　　　　　　　　name:'b', 　　　　　　　　　　component:B

　　　　　　　　} 　　　　　　] 　　　　}

（五）watch监控复合数据下面的某个属性 　　data(){
   　　　　return{
   　　　　　　opt:{
   　　　　　　　　a:1, 　　　　　　　　b:'abc' 　　　　　　}    　　}

　　} 　　watch:{
   　　　　"opt.b"(){
   　　　　　　// code 　　　　}, 　　　　 　　　　"$route"(){
   　　　　　　// 路由监控 　　　　} 　　} （六）watch深层监控 　　watch：{
   　　　　name:{
   　　　　　　handler(){
   　　　　　　　　// code 　　　　　　}, 　　　　　　deep:true 　　　　} 　　} （七）vue兼容IE

　　因为Vue使用了ES6 Promise，而IE浏览器不支持，解决方法是: 使用babel-polyfill转换 　　 　　　　$ npm install --save-dev babel-polyfill 　　如果使用vue-cli项目，在build/webpack.base.js中添加：

　　　　require('babel-polyfill');

　　　　entry: { app: ['babel-polyfill','./src/main.js'] },

 （八）watch的简便写法

　　组件创建的时获取一次列表，同时监听data中数据变化，每当发生变化的时候重新获取一次筛选后的列表。 　　常规写法： 　　data(){　　// data

　　　　return{

　　　　　　list:[1,2,3]

　　　　}

　　methods:{

　　　　editList(){　　// 定义对list数据处理的方法。

　　　　　　// 编辑list

　　　　}

　　created(){　　// 组件创建时处理list数据

　　　　this.editList();

　　watch:{

　　　　list:{　　// 监控list变化重新编辑一次处理list

　　　　　　handler(){

　　　　　　　　this.editList();

　　　　　　}

　　优化写法：

data(){　　// data

　　　　return{

　　　　　　list:[1,2,3]

　　　　}

　　methods:{

　　　　editList(){　　

　　　　　　// 编辑list

　　　　}

　　watch:{

　　　　list:{　　// 首先，在watchers中，可以直接使用函数的字面量名称；其次，声明immediate:true表示创建组件时立马执行一次。

　　　　　　handler："editList",　　// 直接使用函数的字面量名称

　　　　　　immediate:true　　// 表示创建组件时立马执行一次，即：created时期执行一次

　　　　}

（九）页面加载完成立即执行事件

　　data(){

　　　　list:[]

　　watch:{

　　　　"list"(){

　　　　　　this.$nextTick(){

　　　　　　　　// DOM更新完成，执行事件

　　　　　　}

（十）set / delete

　　1、对vue中复合数据 [ Array || Object ] 的设置做到响应使用vue内置方法set

　　　　this.$set(目标数据，键名，键值) / Vue.set(目标数据，键名，键值)；

　　　　键名存在就修改，不存在就添加。

　　2、删除vue中复合数据中的某个值

　　　　Vue.delete(目标数据，健名) / this.$delete(目标数据，健名) ;

　（十一）v-cloak vue隐藏元素直至当前实例准备完成才编译

　　　　这个指令保持在元素上直到关联实例结束编译。需配合CSS使用

　　　　css：　　

　　　　[v-cloak] {
      　　　　display: none; 　　　　} 　　 　　　　template：

　　　　
    
        　　　　{
       { message }}

（十二）vue-cli打包上线

　　(1).脚手架 + webpack打包必然是npm run build,但是后台用tomcat部署上线的时候,可能会衍生出一点问题,比如,路径问题(这里的路径问题,是因为在项目中,我们使用了绝对路径,这里必须要用相对路径,但是打包后,还是会报错,说是找不到assets文件夹下的各种资源,包括images,css,js,是因为,当初在全局引用的时候,写在了index.html中,安全起见,可以写入app.vue中);

　　(2).在打包前还要在

config文件夹中的index.js中设置一个路径问题,不然也会报错,在js中找到 build:{assetsPublicPath: './'} ,默认路径是 '/' ,需要加上 '.'

（十三）路由别名

　　　　‘别名’指，用户访问 '/b' 路径时，url依旧是 '/b' ，但匹配到的视图是 '/a' 路由的匹配视图，如同访问 '/a' 路由一样。

　　{  　　　　 path:'/a',  　　　　alias:'/b' 　　}

（十四）数据还原状态

　　　　1、初始化时设置的数据：

　　　　data（）{

　　　　　　num:1,

　　　　　　list:[],

　　　　　　opt:{}

　　　　}

　　　　2、经过处理后数据 this.num，this.list，this.opt 状态

　　　　3、使用初始化状态的数据

　　　　　　可使用 this.$options.data() 拿到最初的状态。 　　　　　　示例：　　Object.assign( this.form , this.$options.data().form );

 （十五）在vue-cli项目中使用markdown编辑器：Vue-SimpleMDE 　　　　1、npm install vue-simplemde --save 　　　　2、// 全局引用

　　　　　　import Vue from 'vue'

　　　　　　import VueSimplemde from 'vue-simplemde'

　　　　　　Vue.use(VueSimplemde)

　　　　3、

// 单个组件内引用

　　　　　　import markdownEditor from 'vue-simplemde/src/markdown-editor'

　　　　　　export default {

　　　　　　components: {

　　　　　　 markdownEditor

　　　　　　}

　　　　4、 <template>

　　　　　　　　<markdown-editor v-model="content" ref="markdownEditor"></markdown-editor>

　　　　　　</template>

（十六）$nextTick

　　1、$nextTick(() => {}) 与DOM相关操作写在该函数回调中，确保DOM已渲染。

　　2、在created()钩子函数进行DOM操作一定要放在Vue.nextTick()的回调函数中。（原因：在created()执行时DOM 其实并未进行任何渲染，此时进行DOM操作是获取不到DOM元素，所以一定要将DOM操作的代码放进Vue.nextTick()的回调函数中，确保此时DOM已渲染。）