03、Vue基础详解二

//视图模板
<div>
    <h3>text</h3>
    <input type="text" v-model="text">
    <p>{{text}}</p>
</div>
//data函数
data(){
    return{
        text:‘‘
    }
}

//视图模板
<div>
    <h3>radio</h3>
    <input type="radio" name="sex" value="male" v-model="radio" id="1"> <label for="1">Male</label><br>
    <input type="radio" name="sex" value="female" v-model="radio" id="2"><label for="2">Female</label><br>
    <p>{{radio}}</p>
</div>
//data函数
data(){
    return{
        radio:‘‘
    }
}

//视图模板
<div>
    <h3>checkbox</h3>
    <input type="checkbox" name="aihao" value="打篮球" v-model="checkbox">打篮球<br>
    <input type="checkbox" name="aihao" value="打" v-model="checkbox">打<br>
    <input type="checkbox" name="aihao" value="篮" v-model="checkbox">篮<br>
    <input type="checkbox" name="aihao" value="球" v-model="checkbox">球<br>
    <p>{{checkbox}}</p>
</div>
//data函数
data(){
    return{
        checkbox:[]
    }
}

//视图模板
<div>
    <h3>select</h3>
    <select v-model="select">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <p>{{ select }}</p>
</div>
//data函数
data(){
    return{
        checkbox:[]
    }
}

//视图模板
<button v-on:click="submit">表单提交按钮</button>
//methods函数
methods:{
    submit(){
        var shujv = {
        radio:this.radio,
        checkbox:this.checkbox,
        select:this.select
        };
    console.log(shujv);
    }
}

npm install vuex --save

import store from ‘./store‘

router,
store,

import Vue from ‘vue‘
import Vuex from ‘vuex‘

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        count: 0,
        num: 1
    },
    mutations: {
        increment (state, num) {
          state.count++
          state.num = num;
        }
    },
    actions: {
        inc ({ commit }, obj) {
              commit(‘increment‘, obj)
        }
    }
})

//任何页面都可以进行获取

//视图
<div>
    <div>{{bbc}}</div>
    <button @click="qq">获取vuex全局数据</button>
</div>
//data
data(){
    return{
        bbc:‘默认信息‘,
    }
}
//methods
methods:{
    qq(){
        this.bbc = this.$store.state.count;
        //获取store下，state对象，count属性的值
    }
}

//methods
methods:{
    qq(){
        //修改数据
        this.$store.dispatch(‘inc‘,2342);
        //原理：
        //调用store下的inc函数，并把2342的参数传过去
        //通过inc修改state下的值
        alert(this.bbc);
    }
}

<template>
  <div>
    <p>插槽顶部</p>
    <slot></slot>

    <p>插槽末尾</p>
    <slot name="mowei"></slot>
  </div>
</template>

//调用页：正常引入
import sslot from ‘@/components/plu.vue‘

//调用页：正常注册
components:{
    sslot
}
//调用页：正常调用
<div>
    <sslot>
    </sslot>
</div>

<sslot>
    <slot>
        //<!-- components组件页无论有多少slot标签，调用页只能有一个slot标签-->
        <span v-bind:style="{color:‘red‘}">这是在调用插件的页面写的，默认插入到没有name值得slot里面</span>

        <span slot="mowei" v-bind:style="{color:‘orange‘}">这里slot="mowei"，表示插入到name="mowei"的slot插槽里面</span>
        //<!-- ，里面内容以slot=‘xxx‘的形式，分类插入到组件页slot的name=‘xxx‘里面  -->
    </slot>
</sslot>

npm install vue-resource --save

//引入
import VueResource from ‘vue-resource‘
//全局使用
Vue.use(VueResource);

//get请求
this.$http.get(‘/xxurl.php‘).then(response => {     // /xxurl.php表示请求的url地址
    console.log(response.body);     //response.body表示返回的数据
}, response => {
    //错误回调
});

//post请求
this.$http.post(‘/someUrl‘, {     // /xxurl.php表示请求的url地址
    foo: ‘bar‘        //这里是参数传递
}).then(response => {
    console.log(response.body);      //response.body表示返回的数据
}, response => {
    //错误回调
});

//get请求（带参数）
this.$http.get(‘/someUrl‘, {
    params: {     //params为发送的参数对象
        foo: ‘bar‘
    },
    headers: {     //设置请求头
        ‘X-Custom‘: ‘...‘
    }
}).then(response => {
    //成功回调
}, response => {
    //错误回调
});