zoukankan      html  css  js  c++  java
  • vueCode 常用代码总结 20190116

    <template>
    props 传参
    <in-body :mbx="['首页','','']">

    props 代码使用
    <BreadcrumbItem>{{mbx[0]}}</BreadcrumbItem>
    <BreadcrumbItem v-if="mbx[1]!=''">{{mbx[1]}}</BreadcrumbItem>
    <BreadcrumbItem v-if="mbx[2]!=''">{{mbx[2]}}</BreadcrumbItem>

    components 组件调用(组件调用3部曲 1导入2放入components3写在template)
    <in-body />

    data参数调用
    {{ msg }}

    computed计算属性调用 和data一样
    {{ msg }}

    methods调用
    :animated="false" @on-click="tabOnClick" @on-tab-remove="handleTabRemove" :value="mainTabsActiveName"
    @为方法调用 :为属性调用

    组件的id用的是ref
    <Menu theme="dark" width="auto" :active-name="myActive" ref="myActive" :open-names="['helper','1','2','3']">
    方法里面的调用组件的方法是this.$refs
    this.$refs.myActive.updateActiveName()

    v-for 循环写法
    <TabPane v-for="tab in mainTabs" :name="tab.name" :key="tab.name" :label="tab.name" closable></TabPane>

    按钮的click事件
    <Button @click="handleTabsAdd" size="small" slot="extra">增加</Button>

    </template>

    <script>
    //导入组件
    import mainTabs from './mainTabs' //带点的是目录文件
    import mainTabs from 'mainTabs' //不带点是系统组件
    目录里面还有带@的,前期定义目录

    导出的另一种写法
    module.exports = {
    test1Get:test1Get
    }

    export default {
    name:"example"
    ,props:{
    //组件外接参数
    mbx:Array
    }
    ,components:{
    //导入的组件
    mainTabs
    }
    ,data () {
    return {
    //属性
    example:""
    }
    },
    computed: {
    //计算属性
    example:"",
    mainTabs: {
    get () { return this.$store.state.common.mainTabs },
    set (val) { this.$store.commit('common/updateMainTabs', val) }
    }
    },
    methods: {
    //方法
    routeHandle (route) {
    }
    }
    ,watch: {
    //观察
    $route: 'routeHandle'
    }
    ,created () {
    //页面加载
    }
    ,mounted: function () {
    //又一个页面加载方法
    this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
    })
    }

    }
    </script>

    <style scoped>
    >>> 子属性
    </style>


    检索数组
    let tab = this.mainTabs.filter(item => item.name === route.name)[0]
    数组拼接 push也行
    this.mainTabs = this.mainTabs.concat(tab)


    session数据存储
    sessionStorage.setItem("isLogin",null)
    sessionStorage.setItem("isLogin","ok")

    router操作
    this.$router.push("/login")
    this.$router.currentRoute.name
    this.$router.push({name:name})

    Promise操作 .then

    style的js写法
    <Layout :style="{'z-index':'100',padding: '0',marginLeft: '200px'}">

    组件合计$refs
    this.$refs.tabs.activeKey
    this.$refs[name].validate((valid) => { //可以用[]来改用变量模式

    this.$合集
    this.$data.activeKey
    this.$store.state.common.mainTabsActiveName
    this.$store.state.isLoginState
    this.$store.commit('isLogin',"ok")
    this.$store.commit('common/updateMainTabsActiveName', val)
    this.$Message.error('数据有误,请从新提交!');
    this.$Message.info('退出系统');
    this.$Message.success('提交成功!')
    this.$nextTick(()=>{ //事件回调 一般是等页面加载后调用
    this.$route.path.slice(1) 截取路径route

    axios ajax 异步操作
    this.$http.get('/news')
    .then((response) => {
    this.data3 = response.data;
    })
    .catch(function (error) {
    console.log(error);
    });

    数组forEach循环
    pidData2.forEach(el => {
    delete el.children //delete 删除数组 数组长度不变 特别适合 索引用
    })

    数组push
    arr.push(el)

    for循环
    for (let index in arr) {
    temp_array.push(arr[index]);
    }

    随机数
    Math.random()

    ----------------------------------
    main.js
    //main.js引入均为全局引入
    import 'iview/dist/styles/iview.css' //引入js
    import request from './utils/request' //引入常规js

    添加vue全局属性
    Vue.prototype.$http = request

    路由前置导航
    router.beforeEach((to, from, next) => {
    路由导航内跳转
    next("/main")

    路由中的元数据
    to.meta.requireAuth

    仓库数据
    store.state.isLoginState

    仓库提交
    store.commit('isLogin',sessionStorage.getItem("isLogin"))

    ---------------------------------------

    router.js

    //mode:"history",//默认是# history 是/

    导出router
    export default new Router({

    toutes是一个数组
    routes: []

    name路由名称 可搜索导航
    path路由路径 可搜索导航
    component 加载页面的组件
    meta 元数据
    children 子节点
    {
    name:"login"
    ,path:"/login"
    ,component: (resolve) => require(['@/components/login'], resolve)
    ,meta: {
    // 添加该字段,表示进入这个路由是需要登录的
    requireAuth: true
    }
    ,children:[]
    }


    ---------------------------------------
    Vuex store

    //创建仓库
    const store = new Vuex.Store({

    仓库数据
    state: {
    // 放置初始状态 app启动的时候的全局的初始值
    isLoginState: "no"
    }

    同步方法mutations
    ,mutations: {
    isLogin(state,str) {
    state.isLoginState = str;
    }
    }

    同步方法调用
    this.$store.commit('common/updateMainTabs', val)

    store modules组件
    ,modules:{
    common
    }

    Getter | store的计算属性
    getters: {
    doneTodos: state => {
    return state.todos.filter(todo => todo.done)
    }

    store 异步方法 actions
    actions: {
    increment (context) {
    context.commit('increment')
    }
    }

    异步方法调用
    store.dispatch('increment')

    //说明 异步方法 一般都是读取数据,可以不放在store里面,减少开发复杂度

    el: '#app',//div中的id

    $emit 调用父组件事件
    <button v-on:click="$emit('enlarge-text')">
    Enlarge text
    </button>

    <blog-post
    ...
    v-on:enlarge-text="postFontSize += 0.1"
    ></blog-post>

    v-model表单默认值
    <input v-model="searchText">
    它等价于
    <input
    v-bind:value="searchText"
    v-on:input="searchText = $event.target.value"
    >
    它等价于组件
    <custom-input
    v-bind:value="searchText"
    v-on:input="searchText = $event"
    ></custom-input>

    ---------------------
    插槽
    <slot></slot>

    变量名3种风格
    PascalCase 文件名 组件名
    camelCase 属性名
    kebab-case dom结构名

    -----------------------

    副作用 (触发组件外的影响)

    el
    全局感知 (要求组件以外的知识)

    name
    parent
    组件类型 (更改组件的类型)

    functional
    模板修改器 (改变模板的编译方式)

    delimiters
    comments
    模板依赖 (模板内使用的资源)

    components
    directives
    filters
    组合 (向选项里合并属性)

    extends
    mixins
    接口 (组件的接口)

    inheritAttrs
    model
    props/propsData
    本地状态 (本地的响应式属性)

    data
    computed
    事件 (通过响应式事件触发的回调)

    watch
    生命周期钩子 (按照它们被调用的顺序)
    beforeCreate
    created
    beforeMount
    mounted
    beforeUpdate
    updated
    activated
    deactivated
    beforeDestroy
    destroyed
    非响应式的属性 (不依赖响应系统的实例属性)

    methods
    渲染 (组件输出的声明式描述)

    template/render
    renderError

    ----------------------------------

    定义 (提供组件的选项)

    is
    列表渲染 (创建多个变化的相同元素)

    v-for
    条件渲染 (元素是否渲染/显示)

    v-if
    v-else-if
    v-else
    v-show
    v-cloak
    渲染方式 (改变元素的渲染方式)

    v-pre
    v-once
    全局感知 (需要超越组件的知识)

    id
    唯一的特性 (需要唯一值的特性)

    ref
    key
    slot
    双向绑定 (把绑定和事件结合起来)

    v-model
    其它特性 (所有普通的绑定或未绑定的特性)

    事件 (组件事件监听器)

    v-on
    内容 (覆写元素的内容)

    v-html
    v-text

    ------------------------------
    在组件中提交 Mutation
    你可以在组件中使用 this.$store.commit('xxx') 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store)。

    import { mapMutations } from 'vuex'

    export default {
    // ...
    methods: {
    ...mapMutations([
    'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

    // `mapMutations` 也支持载荷:
    'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
    add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
    }
    }

    --------------------------

  • 相关阅读:
    spring-boot 访问时,加与不加项目名分析
    关于文章
    随笔
    工作小结五
    《文章翻译》PCA&SVD
    工作小结四
    工作小结三
    从零开始实现SSD目标检测(pytorch)(一)
    工作小结二
    《论文翻译》 GIOU
  • 原文地址:https://www.cnblogs.com/pengchenggang/p/10275632.html
Copyright © 2011-2022 走看看