vue知识小知识

之前有个tab的子组件

<template>
    <div class="tab">
        <a v-for="item,i in list" v-html="item.title||item" @tap="tab=i" :style="{width:width}" :class="{'active':tab==i}"></a>
    </div>
</template>
<style>    
    .tab a{display:inline-block;border-bottom:1px solid #ddd;text-align: center;color: #888;font-size: 16px;font-family: "微软雅黑";padding: 8px }
    .tab a.active{border-bottom:2px solid #79A3C4;color: #79A2C4;}
</style>
<script>
    export default {
        props: ["list", "width"],//,"index"
        mounted() {
            if (this.list && this.list.length > 0) this.tab = 0;
        },
        data() {
            return {
                tab: -1,
            }
        },
        watch: {
            tab(t) {
                this.$emit("change", { index: t, data: this.list[t] });
            }
        },
        methods: {

        }
    }
</script>

然后使用这个tab

 <tab ref='tab' :list="['项目详情','报名相关','参赛标准']" width="33%" @change='tabchange' />

            <div v-if="tab==0" v-html="description" class="article"></div>
            <div v-if="tab==1" v-html="apply" class="article"></div>

            <div v-if="tab==2" v-html="entry" class="article" ></div>

 import tab from './tab'

export defalt(){

data(){

  return {

     list: [  ],
     description: "",
     apply: "",

     entry:""

  }

},

component:{tab},

 methods: {
            tabchange({index, data}) {
                this.tab = index;
            }

}

页面跳转

    this.$router.push({name:'我的众筹'});

调用接口

this.$api("接口地址",{传过去的数据键值对形式}).then(db=>{

        处理的操作

     alert(db)输出的就是接口里面data的值。如果他是个数字，你必须在后面添加"".形如alert(db+" ")

     this.db=db;//这样接下来在data里面还要定义一个db:[ ],页面想用db里面的某个字段是，直接在页面里写db.name

    });

method(){

    add1(){

  这个里面就是执行的函数，你不能用$(this)你是获取不到点击的那个元素的。

  你可以在那个html页面上写<p @click="add1($event)"></p>然后下面的add1改成add1(e){  e.srcElement就是你点击的那个元素啦。这个是dom元素相当于this，如果你要用jquery这样$(e.srcElement)就可以啦。}

     }

}

父组件向子组件传值，在子组件中用props来操作

首先父组件页面，有个子组件<A   :msg="我是你父组件里面的某个data数据"></A>

那么子组件js里面要写props=['msg']  .这个msg必须是上面父组件里面的那个名字。然后你就可以在子组件里面通过this.msg获取到里面的那个"我是你父组件里面的文字",，并且在页面中直接写{{msg}}而data里面没有初始化定义，也是可以正确的显示出-我是你父组件里面的文字-。

子组件向父组件传参。在子组件里面利用this.$emit(父组件里的一个命名好的元素,子组件里的一个参数)；把这个参数的利用那个名字传到父组件中。

首先父组件页面<A   v-on:child-tell-me="hanshu"></A>  这个child-tell-me是可以自己起的名字，不一定非要click这样的鼠标事件. 这其实也是一个鼠标的点击事件。在method里面写hanshu(e){console.log(e)}

那么子组件js里面要写。this.$emit('child-tell-me',this.name)这个this.name就是你想传过去的值。

在父组件里面你输出的hanshu(e){console.log(e)}就是你在子组件里面传来的那个name值。

this.dispatch()和上面的this.$emit差不多，唯一的不同就是必须在父组件里面写一个和data.method同级的

event:{父组件里一个命名好的元素}

父组件：

这里listenToMyBoy(e){}是个函数。接收到的e就下面的那个this.msg

子组件：

什么时候使用this?

在data里面定义的元素，你在页面中html里，可以直接用。在js里面除了data里面的其他地方用都要加this。

如果你的在mounted(){}里面想通过jquery访问某个接口或者改变某个data里面的数据。你可以在mounted里面的开头写上var vm=this.

然后把访问接口的this改成vm，如vm.$api()。把那个data数据的this也改成vm。如vm.list

如果在页面显示的内容里使用了某个接口来获得数据，然后数据显示的样式是使用了某个插件。

你需要在mounted(){}里面访问接口，在接口里面按照这个格式写插件所需的js。this.$nextTick(()=>{js插件所需的代码}

如果点击添加按钮向页面添加元素，并且想要删除或者其他的编辑这个新添加的元素。

那么你在js里面写的var ht='<div ><img src=""><span @click="delete"></span></div>';（x写法错误）

$("body).append(ht);

按照上面的写法肯定这个delete的函数是不起作用的，因为动态添加到页面的元素是不能套用vue的这种@click的写法的。

你可以利用clone的方式添加元素。首先页面的元素shi class="pp"的display:none;

var ht= $(".slider .pp:first-child").clone(); var  newhtml=ht.clone();$("body).append(newhtml);  $(newhtml).show();

然后你的这个pp里面不能写@click。还是写οnclick="delete(this)"  .然后在mounted里面写window.delete=function(e){}..因为这个close是动态添加的，所以要先找到他的父元素，再找到它

绑定行内样式，驼峰式命名方法

<div id="box" :style="color:activeColor">红嘴绿鹦哥</div>
<div id="box" :style="{color:activeColor,fontSize:size}">红嘴绿鹦哥</div>

两者的区别在哪里呢？主要的是因为如果你是设置了很多的样式，外面就需要一个大括号。而且要采用驼峰的命名方式fontSize

微信分享，

<button class="mui-btn" @tap="sharebox=true">分享给朋友</button>
<div class="mui-fullscreen sharebox" v-if="sharebox" @tap="sharebox=false" style="background-image: url
(img/ZC/share1.png);z-index: 33;background-size:cover;"></div>

注意这个里面的mui-fullscreen是mui默认定义的样式position:absolute;当你把屏幕往下拉的时候遮罩可能就你没有了。这里你需要从写写一个样式，覆盖mui-fullscreen{position:fixed;}这样不管怎么下来上面都会有个遮罩的。

 import wxapi from '../common/wxapi'   // 这里面封装了微信的api

data里面初始化sharebox：false

在mount(){

  this.$api("接口名",{传给后台的数据键值对}).then(db=>{

        wxapi.showMenuItems(db.project_name(分享之后看到的标题名), list.length > 0 && list[0].posters(图片),
this.$route.params.id(用户id), localStorage.getItem('uid'), 5);

这里面的内容就是你分享出去他显示的内容，标题图片都是可以在那个接口里获取的元素

那个uid是名片的是固定的。最后一个5可以在微信的配置文件里找到设置的不同类型。

});

this.$router.push({ path: '/bassy/home' })//跳转到指定的path路径的页面
this.$router.push({name:'个人中心'},query:{id:this.id}  })  根据路由地址跳转页面，带查询参数

(也可以直接在html标签内写v-href="{name:'个人中心'，query:{id:this.id}")  query是获取那个url后面参数，如？id="2"

 this.$router.push({name:‘商品详情’},params:{id:this.id})    这种的一般的router.js里面就会有：id

{

  name: "商品详情",
  path: '/CrowdFunding/Mycrowd:id',
  component: require("./众筹/商品详情")
        }

注意。query的路由是没有后面的那个id的，他的url地址会自动在后面添加url+？id，而param的url地址是url+：id=2

两个都可以用来页面传值。到那时路由不一样。你想获取当前页面比如http:///my/mytuiguang:id 后面的那个参数id的话就只能this.$route.query.id

this.$nextTick(()=>{})如果你用了某个插件，需要在js里面添加配置参数。这时需要把配置的代码写在mounted(){}

里，用this.$nextTick(()=>{})

mui switch开关在Vue构造器内无法滑动解决办法：在mounted里面加上

var vm=this;

vm.$nextTick(()=>{mui('.mui-switch').switch();})

把某个页面引入到别的页面的某些地方，但是又不想从新写html。怎么做呢？

可以把这个页面写成一个单独的html，然后命名是英语比如tuiguang.vue 

然后使用的时候，

html直接写<tuiguang1></tuiguang1>   //要与我下面重命名的那个名字一样。

js里面写 import tuiguang1 from "../我的/tuiguang"

           components: { tuiguang1 },