Vue常用实例,汇总

路由及链接

<router-link to="home">Home</router-link>

获取路由的参数值:

// router.js定义路由
path: "/page/:id",

// VUE获取参数
id = this.$route.params.id,

命名的路由

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

参数

<!-- 带查询参数,下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
// 例如:http://xxx/#/detail/?id=123
let id = this.$route.query.id

常用指令

条件v-show指令

<h1 v-show="age >= 25">Age: {{ age }}</h1>
 var vm = new Vue({
     el: '#app',
     data: {
         yes: true,
         no: false,
         age: 28,
         name: 'keepfool'
     }
})

v-on指令

<!--完整语法-->
<button v-on:click="removeTodo(index)">Greet</button>
<!--缩写语法-->
<button @click="removeTodo(index)">Greet</button>
methods:{
    removeTodo(index) {
        this.B1_2.splice(index, 1);
    }
}
<button v-on:remove="todos.splice(index, 1)">Greet</button>

v-bind指令

<!--缩写语法-->
<td :class="'text-center'">abc</td>
<!--完整语法-->
v-bind指令可以缩写为一个冒号
<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>

循环与判断

v-for指令:

<div v-for="(item, index) in A1" :key="index">
    <div class="row">
        <div>{{ item.title }}</div>
        <div>{{ item.time }}</div>
    </div>
</div>

条件v-if指令

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true,
    a : 1
  }
})

条件v-else指令

<div v-if="a===0">
    ....
    <div v-else>
    ....
    </div>
</div>

条件v-else-if指令

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

表单控件

单行文本

<input v-model="message" placeholder="编辑我……">
//将用户的输入值转为 Number 类型
<input v-model.number="age" type="number">
//自动过滤用户输入的首尾空格
<input v-model.trim="msg">

多行文本

<textarea v-model="message2" placeholder="多行文本输入……"></textarea>

多个复选框

<label><input type="checkbox" value="1" v-model="A11">人才服务</label>
<label><input type="checkbox" value="2" v-model="A11">家庭服务</label>
<label><input type="checkbox" value="3" v-model="A11">儿童服务</label>

单选

<div>
   <div>性别</div>
      <input type="radio" value="1" v-model="C3_12_sex">男
      <input type="radio" value="2" v-model="C3_12_sex">女
</div>

select 列表

<select v-model="selected" name="fruit">
    <option value="banana">香蕉</option>
    <option value="apple">苹果</option>
</select>

常用代码

  • 判断数组不为空
<div v-if="listData !== undefined && listData.length > 0 ">
  • forEach 循环
skus.forEach(i => {
    let skuItem = {
        id: i.id,
        price: i.price,
        stock_num: i.stock
    };
    skuList.push(skuItem);
});

常见案例

1、加载页面赋值

created(){ //页面加载时控件赋值
    this.loadData();
},
methods:{
    loadData(){
        var that = this;
        var project_id = this.$route.params.id;//获取路由参数值
        if (project_id > 0 ) {
            axios.post('/api/pa/'+ project_id).then(function(response){
                that.A1 = response.data.data.A1;
                that.A2 = response.data.data.A2;
                that.A3 = JSON.parse(response.data.data.A3);//解析JSON数据为数组
                that.$toast.clear();
            }).catch(function(error){})
        }
    },
    saveForm(){
        if (this.A1.trim().length==0) {
            this.$toast('请输入项目名称');
            return false;
        }
        var project_id = this.$route.params.id;
        var that = this;
        //将控件值通过ajax传递给控制器
        var form_info={
            'A1':this.A1,
            'A2':this.A2,
            'A3':JSON.stringify(this.A3),//将数组转成JSON格式保存
        }
        axios.post('/api/pa01/'+project_id, form_info).then(function(response){
            if (response.data.code == 200) {//提交成功
                if (project_id > 0 ) {
                    that.$router.push('/pa02/'+project_id);//跳转页面
                } else {
                    that.$router.push('/pa02/'+response.data.data.id);
                }
            } 
                    }).catch(function(error){

        })
    },
    //将数据放入数组中
    onAddA3() {
            this.A3_item = {
                name: this.A3_name,
                sex: this.A3_sex
            };
            this.C3_12.push(this.C3_12_item);

            this.C3_12_name ='';
            this.C3_12_sex ='';
    },
}

2、列表翻页

<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
    <div class="place-item" v-for="(item,index) in place" :key="index">
        <router-link class="place-name" :to="'/placedetail/'+item.id">{{item.name}}</router-link>
    </div>
</van-list>

//js
data() {
    return {
        currentPage: 1,
        loading: false,
        finished: false,
        mypa:[]
    }
},
methods:{
    loadData(){
        // 异步更新数据
        setTimeout(() => {

            var that = this;
            axios.post('/api/place/mypa?page=' + this.currentPage).then(function(response){
                that.currentPage += 1;
                // 没有数据
                if (response.data.data.row.total == 0) {
                    that.finished = true;
                }
                // 数据全部加载完成
                if (response.data.data.row.to == response.data.data.row.total) {
                    that.finished = true;
                }
                let mypa_item = response.data.data.row.data;
                for(var i in mypa_item){
                    that.mypa.push(mypa_item[i])
                }
            }).catch(function(error){

            })
            // 加载状态结束
            this.loading = false;
        }, 1000);
    }
}

54 total views, 2 views today

Revisions

No comments yet.

发表评论