【学习笔记】----Vue基础入门

一、常用指令

注:不推荐同时使用 v-ifv-for,当 v-ifv-for 一起使用时,v-for 具有比 v-if 更高的优先级。

1、v-for 的使用:

格式: v-for="item in items"或者v-for="(item,index) in items",如:

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

若:v-for遍历的是一个对象,则第一个参数为属性值,第二个参数为属性名,第三个参数为下标,如:

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

注:当在组件上使用 v-for 时,key 现在是必须的。

2、v-on :可以用来监听 DOM 事件:

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

也可写为:此时采用@缩写,并向greet函数传递一个参数啊
<div id="example-2">
  <button @click="greet(a)">Greet</button>
</div>

即:v-on可缩写为@。

3、v-model :用在表单控件上的,用于实现双向数据绑

二、路由部分

1、路由的使用(一定要加占位符)
  • 在需跳转的页面配置如下:<router-link to="/">...</router-link>并且在主页面加上占位符:<router-view/>
  • 占位符顾名思义,就是跳转的页面所放置的位置
    在这里插入图片描述
  • 在router文件的index.js中,配置需要跳转的到的页面:
    在这里插入图片描述
    其中,path的值需要与上一张图中to的值一一对应;component的值表示,一旦有访问path这个路径,则展示这个页面。
    此外需注意:要将对应页面引入到router的index.js文件中,如导入Home页面:import Home from '../views/Home.vue'

2、返回上一级路由

  • 方法一:this.$router.go(-1)。

    相对于当前页面向前或向后跳转多少个页面,跳转级数由参数决定。

  • 方法二:

三、计算属性部分

一般情况下属性都是放到data中的,但是有些属性可能是需要经过一些逻辑计算后才能得出来,那么我们可以把这类属性变成计算属性。注:放到computed中的属性,不能再放到data中
格式:

      computed:{
      	属性名:function(){return xxx}
      	或:属性名(){return	xxx}
      }
    举例:
      computed:{
        area(){
          return this.width*this.height
        }
      }

四、vuex

1、state中存放的是数据
2、在其他页面可通过this.$store.state.变量名,来获得变量值。
3、mutations是定义改变state中数据改变的模块,在这个模块可通过方法去修改state中的数据。如:定义了一个addCount函数去修改state中的count变量。

  mutations: {
    // 改变state.cout的值
    addCount(state){
        state.count++;
    }
  },

4、this.$store.commit()this.$store.dispatch()

  • commit 对应mutations, 用来触发同步操作的方法.
  • dispatch对应actions, 用来触发异步操作的方法.
      addNumber(){
        this.$store.commit("addCount");
      }
      在自定义的addNumber方法中,通过this.$store.commit()调用
      store文件中的addCount方法

各自的使用方法如下:

commit:
this.$store.commit('方法名',) //传值时

this.$store.commit("方法名") //不传值
dispatch:
this.$store.dispatch('方法名',) //传值时

this.$store.dispatch("方法名") //不传值
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值