vue基础(2)

用户7869262832693
173 阅读3分钟

1. Vue的常用指令

Vue指令以v-开头，作用在HTML元素上，将指令绑定在元素上时，会给绑定的元素添加一些特殊行为，可将指令视作特殊的HTML属性

v-if：条件指令

条件判断指令，根据表达式值的真假来插入或删除元素，表达式返回一个布尔值

     <input type="checkbox" v-model="ok">同意许可协议
    <!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
    <h1 v-if="ok">if：Lorem ipsum dolor sit amet.</h1>
    <h1 v-else>no</h1>

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-show：条件指令

条件渲染指令，与v-if不同的是，无论v-show的值为true或false，元素都会存在于HTML代码中；而只有当v-if      的值为true，元素才会存在于HTML代码中。v-show指令只是设置了元素CSS的style值

    <!-- v:show 条件指令 初始渲染开销大 -->
    <h1 v-show="ok">show：Lorem ipsum dolor sit amet.</h1>
    <h1 v-show="!ok">no</h1>

v-for：列表循环指令

循环指令，基于一个数组渲染一个列表，与JavaScript遍历类似

<table border="1">
    <!-- <tr v-for="item in list"></tr> -->
    <tr v-for="(item, index) in userList">
        <td>{{index}}</td>
        <td>{{item.id}}</td>
        <td>{{item.username}}</td>
        <td>{{item.age}}</td>
    </tr>
</table>


data: {
    list: [
        { id: 1, username: 'one', age: 18 },
        { id: 2, username: 'two', age: 28 },
        { id: 3, username: 'three', age: 38 }
    ]
}

v-model  在表单元素上实现双向绑定

v-on指令"   用于监听DOM事件，语法与v-bind类似，如监听点击事件v-on:click="doSth ,v-on指令可以缩写为@符号。如：@click="doSth"

2 VueX（Vue状态管理模式)

vuex是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能

安装

npm i vuex -s

%U_YIF{0Y(IS8VIA%7621KI.png

Vuex持久化插件-解决刷新数据消失的问题

  • 安装
npm install vuex-persistedstate --save

在store下的index.js中

import createPersistedState from "vuex-persistedstate"

想要存储到sessionStorage，配置如下

import createPersistedState from "vuex-persistedstate" const store = new Vuex.Store({ // ... plugins: [createPersistedState({ storage: window.sessionStorage })] })

 指定需要持久化的state,配置如下
 import createPersistedState from "vuex-persistedstate" const store = new Vuex.Store({ // ... plugins: [createPersistedState({ storage: window.sessionStorage, reducer(val) { return { // 只储存state中的assessmentData assessmentData: val.assessmentData } } })]

![6F{FX{I4[EIOB}$UNY7W4O.png

Mutation传值

单个值提交时:

this.$store.commit('edit',15)

当需要多参提交时

this.$store.commit('edit',{age:15,sex:'男'})

Actions

由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。

actions:{
    aEdit(context,payload){
        setTimeout(()=>{
            context.commit('edit',payload)
        },2000)
    }
}

在组件中调用:

this.$store.dispatch('aEdit',{age:15})

用辅助函数存取值

首选需要引入 import { mapState ,mapMutations} from 'vuex'

取值的话就是mapState需要放在computed里面

 computed: {
                 //文件名 //state定义的名字
    ...mapState("user", ["data"]),
  },

存值的话就是mapMutations需要放在methods里面 然后就是用的时候就直接this.getlist 然后传值的话就是直接放在调用的后面

    methods：{
                       //文件名 //mapMutations定义的名字
     ...mapMutations("user", ["getlist"])
    }
avatar
文章
阅读
粉丝