精华内容
下载资源
问答
  • vscode创建vue快捷代码片段 (1)打开 文件首选项 —> 用户代码片段 在搜索框搜索vue 选择vue.json文件,如果没有安装vue.json:安装插件VueHelper 修改vue.json文件 <template> <div></div>...

    vscode创建vue快捷代码片段

    (1)打开 文件首选项 —> 用户代码片段
    在这里插入图片描述
    在搜索框搜索vue 选择vue.json文件,如果没有安装vue.json:安装插件VueHelper

    修改vue.json文件

    <template>
      <div></div>
    </template>
    
    <script>
    export default {
      data () {
        return {
        };
      },
    
      components: {},
    
      computed: {},
    
      mounted(){},
    
      watch: {},
    
      methods: {}
    }
    
    </script>
    <style lang='scss' scoped>
    </style>
    

    重启vscode就可以了

    在vue组件页面中输入 vue+tab键就可以快捷生成

    展开全文
  • vue 快捷代码片段

    2021-07-09 20:49:14
    新建全局代码片段/或文件夹代码片段:vue-html.code-snippets { "vue htm": { "scope": "html", "prefix": "vuehtml", "body": [ "<!DOCTYPE html>", "<html lang=\"en\">", "",

    文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段:vue-html.code-snippets

    {
        "vue htm": {
            "scope": "html",
            "prefix": "vuehtml",
            "body": [
                "<!DOCTYPE html>",
                "<html lang=\"en\">",
                "",
                "<head>",
                "    <meta charset=\"UTF-8\">",
                "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
                "    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
                "    <title>Document</title>",
                "</head>",
                "",
                "<body>",
                "    <div id=\"app\">",
                "",
                "    </div>",
                "    <script src=\"vue.min.js\"></script>",
                "    <script>",
                "        new Vue({",
                "            el: '#app',",
                "            data: {",
                "                $1",
                "            }",
                "        })",
                "    </script>",
                "</body>",
                "",
                "</html>",
            ],
            "description": "my vue template in html"
        }
    }
    
    
    展开全文
  • 今天分享10个vue快捷开发技巧助你成为大神级前端工程师! 1.路由参数解耦 export default { methods: { getParamsId() { return this.$route.params.id } } } 在组件中使用 $route 会使之与其对应路由形成...

    今天分享10个vue快捷开发技巧助你成为大神级前端工程师!

    1.路由参数解耦

    export default {
        methods: {
            getParamsId() {
                return this.$route.params.id
            }
        }
    }

    在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。

    正确的做法是通过 props 解耦

    const router = new VueRouter({
        routes: \[{
            path: '/user/:id',
            component: User,
            props: true
        }\]
    })

    将路由的props属性设置为true后,组件内可通过props接收到params参数

    export default {
        props: \['id'\],
        methods: {
            getParamsId() {
                return this.id
            }
        }
    }

    另外你还可以通过函数模式来返回props

    const router = new VueRouter({
        routes: \[{
            path: '/user/:id',
            component: User,
            props: (route) => ({
                id: route.query.id
            })
        }\]
    })
    
    2.函数式组件

    函数式组件是无状态,它无法实例化,没有任何的生命周期和方法。创建函数式组件也很简单,只需要在模板添加 functional 声明即可。一般适合只依赖于外部数据的变化而变化的组件,因其轻量,渲染性能也会有所提高。

    组件需要的一切都是通过 context 参数传递。它是一个上下文对象,具体属性查看 文档 。这里 props 是一个包含所有绑定属性的对象。

    函数式组件

    <template functional>
        <div class="list">
            <div class="item" v-for="item in props.list" :key="item.id" @click="props.itemClick(item)">
                <p>{{item.title}}</p>
                <p>{{item.content}}</p>
            </div>
        </div>
    </template>

    父组件使用

    <template>
        <div>
            <List :list="list" :itemClick="item => (currentItem = item)" />
        </div>
    </template>
    import List from '@/components/List.vue'
    export default {
        components: {
            List
        },
        data() {
            return {
                list: \[{
                    title: 'title',
                    content: 'content'
                }\],
                currentItem: ''
            }
        }
    }

    文档: 渲染函数 & JSX — Vue.js

    3.样式穿透

    在开发中修改第三方组件样式是很常见,但由于 scoped 属性的样式隔离,可能需要去除 scoped 或是另起一个 style 。这些做法都会带来副作用(组件样式污染、不够优雅),样式穿透在css预处理器中使用才生效。

    我们可以使用 >>> 或 /deep/ 解决这一问题:

    <style scoped>
    外层 >>> .el-checkbox {
      display: block;
      font-size: 26px;
    
      .el-checkbox\_\_label {
        font-size: 16px;
      }
    }
    </style>
    <style scoped>
    /deep/ .el-checkbox {
      display: block;
      font-size: 26px;
    
      .el-checkbox\_\_label {
        font-size: 16px;
      }
    }
    </style>

    4.watch高阶使用

    立即执行

    watch 是在监听属性改变时才会触发,有些时候,我们希望在组件创建后 watch 能够立即执行

    可能想到的的方法就是在 create 生命周期中调用一次,但这样的写法不优雅,或许我们可以使用这样的方法

    export default {
        data() {
            return {
                name: 'Joe'
            }
        },
        watch: {
            name: {
                handler: 'sayName',
                immediate: true
            }
        },
        methods: {
            sayName() {
                console.log(this.name)
            }
        }
    }

    深度监听

    在监听对象时,对象内部的属性被改变时无法触发 watch ,我们可以为其设置深度监听

    export default {
        data: {
            studen: {
                name: 'Joe',
                skill: {
                    run: {
                        speed: 'fast'
                    }
                }
            }
        },
        watch: {
            studen: {
                handler: 'sayName',
                deep: true
            }
        },
        methods: {
            sayName() {
                console.log(this.studen)
            }
        }
    }

    触发监听执行多个方法

    使用数组可以设置多项,形式包括字符串、函数、对象

    export default {
        data: {
            name: 'Joe'
        },
        watch: {
            name: \[
                'sayName1',
                function(newVal, oldVal) {
                    this.sayName2()
                },
                {
                    handler: 'sayName3',
                    immaediate: true
                }
            \]
        },
        methods: {
            sayName1() {
                console.log('sayName1==>', this.name)
            },
            sayName2() {
                console.log('sayName2==>', this.name)
            },
            sayName3() {
                console.log('sayName3==>', this.name)
            }
        }
    }

    文档: API — Vue.js

    5.watch监听多个变量

    watch本身无法监听多个变量。但我们可以将需要监听的多个变量通过计算属性返回对象,再监听这个对象来实现“监听多个变量”

    export default {
        data() {
            return {
                msg1: 'apple',
                msg2: 'banana'
            }
        },
        compouted: {
            msgObj() {
                const { msg1, msg2 } = this
                return {
                    msg1,
                    msg2
                }
            }
        },
        watch: {
            msgObj: {
                handler(newVal, oldVal) {
                    if (newVal.msg1 != oldVal.msg1) {
                        console.log('msg1 is change')
                    }
                    if (newVal.msg2 != oldVal.msg2) {
                        console.log('msg2 is change')
                    }
                },
                deep: true
            }
        }
    }

    6.事件参数$event

    $event 是事件对象的特殊变量,在一些场景能给我们实现复杂功能提供更多可用的参数

    原生事件

    在原生事件中表现和默认的事件对象相同

    <template>
        <div>
            <input type="text" @input="inputHandler('hello', $event)" />
        </div>
    </template> 
    
      
    
    export default {
        methods: {
            inputHandler(msg, e) {
                console.log(e.target.value)
            }
        }
    }

    自定义事件

    在自定义事件中表现为捕获从子组件抛出的值

    my-item.vue :
    
    export default {
        methods: {
            customEvent() {
                this.$emit('custom-event', 'some value')
            }
        }
    }

    App.vue

    <template>
        <div>
            <my-item v-for="(item, index) in list" @custom-event="customEvent(index, $event)">
                </my-list>
        </div>
    </template>
    export default {
        methods: {
            customEvent(index, e) {
                console.log(e) // 'some value'
            }
        }
    }

    文档: 事件处理 — Vue.js

    https://cn.vuejs.org/v2/guide/components.html#%E4%BD%BF%E7%94%A8%E4%BA%8B%E4%BB%B6%E6%8A%9B%E5%87%BA%E4%B8%80%E4%B8%AA%E5%80%BC

    7.自定义组件双向绑定

    组件 model 选项:

    允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。 input 默认作为双向绑定的更新事件,通过 $emit 可以更新绑定的值

    <my-switch v-model="val"></my-switch> 
    
      
    
    export default {
        props: {
            value: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            switchChange(val) {
                this.$emit('input', val)
            }
        }
    }

    修改组件的model选项,自定义绑定的变量和事件

    <my-switch v-model="num" value="some value"></my-switch> 
    
      
    
    export default {
        model: {
            prop: 'num',
            event: 'update'
        },
        props: {
            value: {
                type: String,
                default: ''
            },
            num: {
                type: Number,
                default: 0
            }
        },
        methods: {
            numChange() {
                this.$emit('update', this.num++)
            }
        }
    }

    文档: API — Vue.js

    8.监听组件生命周期

    通常我们监听组件生命周期会使用 $emit ,父组件接收事件来进行通知

    子组件

    export default {
        mounted() {
            this.$emit('listenMounted')
        }
    }

    父组件

    <template>
        <div>
            <List @listenMounted="listenMounted" />
        </div>
    </template>

    其实还有一种简洁的方法,使用@hook即可监听组件生命周期,组件内无需做任何改变。同样的,created、updated等也可以使用此方法。

    <template>

    <List @hook:mounted="listenMounted" />

    </template>

    9.程序化的事件侦听器

    比如,在页面挂载时定义计时器,需要在页面销毁时清除定时器。这看起来没什么问题。但仔细一看 this.timer 唯一的作用只是为了能够在 beforeDestroy 内取到计时器序号,除此之外没有任何用处。

    export default {
        mounted() {
            this.timer = setInterval(() => {
                console.log(Date.now())
            }, 1000)
        },
        beforeDestroy() {
            clearInterval(this.timer)
        }
    }

    如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题,但是它可以被视为杂物。

    我们可以通过 $on 或 $once 监听页面生命周期销毁来解决这个问题:

    export default {
        mounted() {
            this.creatInterval('hello')
            this.creatInterval('world')
        },
        creatInterval(msg) {
            let timer = setInterval(() => {
                console.log(msg)
            }, 1000)
            this.$once('hook:beforeDestroy', function() {
                clearInterval(timer)
            })
        }
    }

    使用这个方法后,即使我们同时创建多个计时器,也不影响效果。因为它们会在页面销毁后程序化的自主清除。

    文档: 处理边界情况 — Vue.js

    10.手动挂载组件

    在一些需求中,手动挂载组件能够让我们实现起来更加优雅。比如一个弹窗组件,最理想的用法是通过命令式调用,就像 elementUI 的 this.$message 。而不是在模板中通过状态切换,这种实现真的很糟糕。

    先来个最简单的例子:

    import Vue from 'vue'
    import Message from './Message.vue'
    
    // 构造子类
    let MessageConstructor = Vue.extend(Message)
    // 实例化组件
    let messageInstance = new MessageConstructor()
    // $mount可以传入选择器字符串,表示挂载到该选择器
    // 如果不传入选择器,将渲染为文档之外的的元素,你可以想象成 document.createElement()在内存中生成dom
    messageInstance.$mount()
    // messageInstance.$el获取的是dom元素
    document.body.appendChild(messageInstance.$el)

    下面实现一个简易的 message 弹窗组件

    Message/index.vue

    <template>
        <div class="wrap">
            <div class="message" :class="item.type" v-for="item in notices" :key="item.\_name">
                <div class="content">{{item.content}}</div>
            </div>
        </div>
    </template> `
    // 默认选项
    const DefaultOptions = {
        duration: 1500,
        type: 'info',
        content: '这是一条提示信息!',
    }
    let mid = 0
    export default {
        data() {
            return {
                notices: \[\]
            }
        },
        methods: {
            add(notice = {}) {
                // name标识 用于移除弹窗
                let \_name = this.getName()
                // 合并选项
                notice = Object.assign({
                    \_name
                }, DefaultOptions, notice)
    
                this.notices.push(notice)
    
                setTimeout(() => {
                    this.removeNotice(\_name)
                }, notice.duration)
            },
            getName() {
                return 'msg\_' + (mid++)
            },
            removeNotice(\_name) {
                let index = this.notices.findIndex(item => item.\_name === \_name)
                this.notices.splice(index, 1)
            }
        }
    }
    .wrap {
        position: fixed;
        top: 50px;
        left: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        transform: translateX(-50%);
    }
    
    .message {
        --borderWidth: 3px;
        min-width: 240px;
        max-width: 500px;
        margin-bottom: 10px;
        border-radius: 3px;
        box-shadow: 0 0 8px #ddd;
        overflow: hidden;
    }
    
    .content {
        padding: 8px;
        line-height: 1.3;
    }
    
    .message.info {
        border-left: var(--borderWidth) solid #909399;
        background: #F4F4F5;
    }
    
    .message.success {
        border-left: var(--borderWidth) solid #67C23A;
        background: #F0F9EB;
    }
    
    .message.error {
        border-left: var(--borderWidth) solid #F56C6C;
        background: #FEF0F0;
    }
    
    .message.warning {
        border-left: var(--borderWidth) solid #E6A23C;
        background: #FDF6EC;
    }

    Message/index.js

    import Vue from 'vue'
    import Index from './index.vue'
    
    let messageInstance = null
    let MessageConstructor = Vue.extend(Index)
    
    let init = () => {
        messageInstance = new MessageConstructor()
        messageInstance.$mount()
        document.body.appendChild(messageInstance.$el)
    }
    
    let caller = (options) => {
        if (!messageInstance) {
            init()
        }
        messageInstance.add(options)
    }
    
    export default {
        // 返回 install 函数 用于 Vue.use 注册
        install(vue) {
            vue.prototype.$message = caller
        }
    }

    main.js

    import Message from '@/components/Message/index.js'
    
    Vue.use(Message)

    使用

    this.$message({
        type: 'success',
        content: '成功信息提示',
        duration: 3000
    })
    
    大家平时学习web前端的时候肯定会遇到很多问题,小编我为大家准备了web前端学习资料,将这些免费分享给大家!如果想要的可以找我领取
    领取方式:
    如果想获取这些学习资料,先关注我然后私信小编“01”即可免费领取!(私信方法:点击我头像进我主页右上面有个私信按钮)
    如果这篇文章对你有帮助,请记得给我来个评论+转发
    
    展开全文
  • 这是关于 vue的,只要在页面中输入 vuetem然后按 tab 键,就会自动生成我的模板文件。 下面的 vue 模板文件是我的总结,包含了table,添加删除的功能,分页的功能。所利用的框架为element-ui &lt;template&...

    这是关于 vue的,只要在页面中输入 vuetem然后按 tab 键,就会自动生成我的模板文件。
    下面的 vue 模板文件是我的总结,包含了table,添加删除的功能,分页的功能。所利用的框架为element-ui
    在这里插入图片描述

    <template>
      <div>
        <div class="card ">
          <div class="card-block">
            <el-row>
              <el-col :span="10"><div class="grid-content bg-purple-dark"></div></el-col>
              <el-col :span="4" :offset="20">
                <el-button type="primary"  size="mini"  @click="onAdd()">添加</el-button>
                <el-button type="danger"  size="mini" @click="onDel()" :disabled="!multipleSelection.length" >删除</el-button>
              </el-col>
            </el-row>
            <el-table
              v-loading="loading"
              ref="multipleTable"
              :data="tableData"
              border
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column
                label="分类名称"
                prop="name">
              </el-table-column>
              <el-table-column
                label="分类标签"
                prop="tag">
    
              </el-table-column>
              <el-table-column
                label="描述"
                prop="desc">
              </el-table-column>
    
    
              <el-table-column
                label="操作"
              >
                <template slot-scope="scope">
                   <el-button type="primary" icon="el-icon-edit" circle  @click="onEdit(scope.row._id,scope.row)"></el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getTableList" />
    
            <!--<b-pagination align="center" :total-rows="total" style="margin-top: 1rem" v-model="currentPage" :per-page="20">-->
            <!--</b-pagination>-->
    
          </div>
        </div>
        <!--modal编辑-->
        <el-dialog title="操作" :visible.sync="show">
          <el-form ref="dataForm" :rules="rules" :model="data" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
            <el-form-item label="名称" prop="name">
              <el-input v-model="data.name"/>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="show = false">取消</el-button>
            <el-button type="primary" @click="save">确定</el-button><!--"dialogStatus==='create'?createData():updateData()"-->
          </div>
        </el-dialog>
        <!--modal删除-->
        <el-dialog title="删除" :visible.sync="delShow" :center='true' width="30%">
          <div class="delcenter">
            你确定要删除吗
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="delShow = false"  size="small">取消</el-button>
            <el-button type="danger" @click="onRemove" size="small">确定</el-button>
          </div>
        </el-dialog>
      </div>
    </template>
    
    <script>
      /* eslint-disable space-before-function-paren,curly,semi,eqeqeq,valid-typeof,no-unused-vars */
    
      import {get, post, del, encodeUrl} from '@/utils/request'
      import Pagination from '@/components/Pagination'
      import {mapGetters} from 'vuex'
      //  const url = '/api/video'
      export default {
        computed: {
          ...mapGetters(['user'])
        },
        mounted() {
          this.getTableList()
        },
        data() {
          return {
            filter: null,
            preview: false,
            show: false,
            loading: false,
            tableData: [],
            multipleSelection: [],
            data: {},
            listQuery:{
              page:1,
              limit:20,
            },
            currentPage: 1,
            total: 0,
            delShow: false,
            settingData: {},
            errorText: '',
            dialogStatus:'',
            rules: {
              type: [{ required: true, message: 'type is required', trigger: 'change' }],
              timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
              name: [{ required: true, message: '名不能为空', trigger: 'blur' }]
            },
          }
        },
        methods: {
          onRemove() {
            return this.del(...this.multipleSelection.map((i) => i._id)).then(() => {this.getTableList(); this.delShow = false})
          },
          del(...ids) {
            let promise = Promise.resolve()
            for (let id = ids.shift(); id; id = ids.shift()) {
              promise = promise.then(() => del(encodeUrl`/api/gvrchat/device/one/${id}`))
            }
            return promise
          },
          save(evt){
            let data = this.data
            this.$refs['dataForm'].validate((valid) => {
              if(valid){
                return post(encodeUrl`/api/gvrchat/device/edit/${this.settingData.id}`, data)
                  .then(() => {
                    this.show = false
                  })
                  .then(this.getTableList.bind(this)).catch((data) => {
                    this.loading = false
    
                  })
              }
            })
          },
          getOneTable(id) {
            return get(encodeUrl`/api/gvrchat/device/one/${id}`).then(({data}) => {
              this.loading = false
    
              this.data = data
    //          delete this.data._id
            }).catch((data) => {
              this.loading = false
    
            })
          },
          onEdit(id, row) {
            this.dialogStatus = 'update'
            this.loading = true
            this.settingData.id = id
            this.getOneTable(id).then(() => {
              this.show = true
            })
          },
          onDel() {
            this.delShow = true
          },
          onAdd() {
            this.dialogStatus='create'
            this.show = true
            this.data = {}
            this.settingData.id = ''
            this.$nextTick(() => {
              this.$refs['dataForm'].clearValidate()
            })
          },
          getTableList(page = 1) {
            this.loading = true
            console.log('limitlllll',this.listQuery)
            setTimeout(()=>{
              console.log('limit',this.listQuery.limit)
              return get(`/api/gvrchat/devices`, this.listQuery).then(({data}) => {
                console.log(data)
                this.loading = false
                this.total = data.total
                this.tableData = data.list
                return data
              }, (res) => {
                this.loading = false
                return res
              })
            },0)
    
          },
          handleSelectionChange(val) {
            this.multipleSelection = val
    //        console.log(val)
          }
        },
        components: {
          Pagination
        },
        watch: {
          // currentPage(page) {
          //   this.getTableList(page)
          // }
        }
      }
    </script>
    <style scoped="" lang="scss" rel="stylesheet/scss">
     .card{
        margin-top: 30px;
      }
       .delcenter{
         text-align: center;
       }
      .el-row {
        margin-bottom: 20px;
        &:last-child {
          margin-bottom: 0;
        }
      }
      .grid-content {
        border-radius: 4px;
        min-height: 36px;
      }
    
    </style>
    
    
    
    
    展开全文
  • function(res){//成功的回调函数", "\t\tconsole.log(res)", "\t}", "})" ] }, "vue快捷方式": { "prefix": "vue", "body": [ "", " ", " $5", "", "", " ", " " ], ...
  • 在观看vue实战视频的时候,发现用的插件比较复杂,于是采用Iview组件中的轮播组件。1 进行iView 依赖的下载npm install iview --save2 在main.js进行依赖的引入import iView from 'iview' import 'iview/dist/styles...
  • 文件名如:vue-html.code-snippets 将Example:后的代码取消注释,修改为以下片段(或直接替换) 注意:制作代码片段的时候,字符串中如果包含文件中复制过来的“Tab”键的空格,要换成“空格键”的空格 { "vue ...
  • Vue vscode 快捷生成.Vue模板 找到vue.json 添加以下代码 测试方式: 新建.vue文件,输入VUE 按下TAB ,可以生成以下为模板的代码块 { "Print to console": { "prefix": "vue", "body": [ "<!-- $1 -->", ...
  • VUE使用Element UI 表格时,对单个表格进行快速编辑时,需要的便捷组件,而且可以自定义显示的样式
  • vue输入框快捷操作

    2018-10-30 23:37:46
    vue运行为v-on在监听键盘事件时,添加了特殊的键盘修饰符: &lt;input v-on:keyup.13="search"&gt; vue还非常贴心地给出了常用按键的别名,这样就不必去记keyCode  上面代码,还可以在这样写...
  • 快捷生成vue模板

    2020-12-22 17:35:48
    快捷生成vue模板 File---->preferences----->User Snippets 输入vue 在里面输入 { "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>$0</div>", "</...
  • vue文件快捷生成

    千次阅读 2018-10-15 16:56:53
    vue", "body": [ "&lt;template&gt;", " &lt;div class=\"\"&gt;\n", " &lt;/div&gt;", "&lt;
  • 使用快捷键Ctrl+Shift+P或者File-Preferences-User Snippets或者左下角设置按钮-User Snippets搜索vue.json  将vue.json替换为以下内容 { vue: { prefix: vue, body: [ , , , , , , export...
  • vscode 设置代码片段 首先 shift + ctrl + p 输入snippet 选择首选项:配置用户... "vue-template": { // vue-template 为快捷键的名字 // "scope": "vue-html", //这里可以设置作用域,只能在`<template>...
  • vue

    2020-12-05 15:51:37
    vue
  • vscode快捷生成vue模板

    2020-11-29 10:51:16
    vscode快捷生成vue模板 步骤 ①文件 – 首选项 --用户代码片段 ②新建全局json 文件 命名为 vue.json ③填充以下代码 { "HTML Snippets": { "prefix": "vue", // 触发的关键字 输入vue按下tab键 "body": [ ...
  • vue项目,package.json中Vuevue-template-compiler版本不一致时,执行npm run dev有时会报错 提示如下内容 in ./src/views/login/index.vue Module build failed: Error: Vue packages version mismatch: - vue@...
  • cd\ D: cd vue\vueJect npm run serve
  • 打开vscode,选择设置-用户代码片段,在框中输入vue,选中第一个vue,进入文件就可以设置了。 prefix是设置快捷键的名,可以任意设置,这里设置的vue,新建一个文件输入vue,按tab键就会输出这里配置好的文件结构。...
  • 这是element vue快捷级联选择器 官方直通车网址 话不多说,看下面 1.执行以下语句安装城市数据:  npm install element-china-area-data -S 2.我们就以vue-cli创建的项目为例,在vue文件中的scrit标签内导入...
  • 依次选中File->Preference->User Snippets 输入vue进行搜索,然后点击打开vue.json ...将vue.json文件中的内容替换为以下内容 { "Print to console": { "prefix": "vue", "body": [ "<te...
  • vue-global-events通过在任何地方监听文档中的事件来添加快捷方式。赞助商Bronze安装npm install vue-global-events演示想法vue-global-events通过在任何地方监听文档中的事件来添加快捷方式。 -global-events演示...
  • Vue-ShortKey-VueJS 2.x的插件在单个侦听器中全局接受快捷方式。 安装 npm install vue-shortkey --save 用法 Vue . use ( require ( 'vue-shortkey' ) ) 将shortkey指令添加到接受快捷方式的元素中。 快捷键必须...
  • Vue

    2020-07-03 21:27:33
    Vue 概述 是一套用于构建用户界面的渐进式javascript框架。 快速入门 开发中: 我们往往先定义好Vue数据模型,然后在页面标签中进行数据模型的绑定! 在Vue对象中声明数据绑定对象 <script> var vm=new Vue...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,743
精华内容 3,897
关键字:

vue快捷

vue 订阅