mvc项目+vue+vant【进行中】

项目没有考虑前后端分离，也未使用vue-cli脚手架，单纯引入vue.js，vant也是单纯引入css和js，可能无法使用vue-router，因为是移动端项目所以暂时引入了jquery-3.3.1.min.js（当vue无法实现的时候用吧）

目前引入的工具：

<link href="/Content/reset.css" rel="stylesheet"/>清除浏览器默认样式
<link href="/Content/vant.css" rel="stylesheet"/>vant样式
<link href="/Content/alicon.css" rel="stylesheet"/>iconfont阿里图标
<link href="/Content/master.css" rel="stylesheet"/>公共样式


<script src="/Scripts/main.js"></script>公共js，目前只定义了rem
<script src="/Scripts/vue.js"></script>vue的js
<script src="/Scripts/vue-lazyload.js"></script>vue图片懒加载
<script src="/Scripts/vuex.js"></script>vuex的js
<script src="/Scripts/vant.min.js"></script>vant的js
<script src="/Scripts/jquery-3.3.1.min.js"></script>jq的js
<script type="text/javascript" src="/Scripts/layout/store.js"></script>状态管理，测试能用，不知道用不用的上

<script src="/Scripts/index/index.js"></script>每个页面自己的js，通过@section scripts{<script src="..."></script>}加载进来，在_Layout.cshtml中通过@RenderSection("scripts", required: false)读取

<script type="text/javascript" src="/Scripts/layout/layout.js"></script>框架的js，相当于脚手架里的main.js，
所以这个js在最底部，而上面是每个页面各自的js，我把他当成组件，这样就形成了，先要创建组件，然后在layout.js中注册组件，再到html中使用组件的三部曲了，
同样store也是放进layout.js这里
关于vue-router我查到的是：不用vue-cli没法用组件，也没法组件复用，路由跳转也没有意义，所以在没有.vue文件的情况下真的无能为力

说实话不用vue-cli，vant用的也很费劲，跳转页面我就用了v-on:click，而且所有的简写都不能用，例如@click   :src都不行，不知道是vs不认还是别的原因，

最重要的一点，没有webpack，就没有babel，也没有less，不能用es6语法，axios可能也不行，所以我引入了jq

_Layout.cshtml  框架页

<div id="app" v-cloak>
    <!--嵌套的页面-->
    @RenderBody()
</div>
<!--组件-->
<template id="tabbartemp">
    <!--导航组件-->
    <van-tabbar v-model="index" ref="uuu">
        <!--<van-tabbar-item v-on:touchstart="handleTouchStart" v-on:click="handleleterClick">-->
        <van-tabbar-item v-on:click="tiaozhuan($event)">
            <van-icon class="iconfont iconhome" class-prefix='icon' slot="icon" slot-scope="props"
                      :name='props.active ? icon.home_active:icon.home_normal'></van-icon>
            <span>首页</span>
        </van-tabbar-item>
        <van-tabbar-item :dot="flag" v-on:click="tiaozhuan1($event)">
            <van-icon class="iconfont iconfangdajing2" class-prefix='icon' slot="icon" slot-scope="props"
                      :name='props.active ? icon.fangdajing2_active:icon.fangdajing2_normal'></van-icon>
            <span>找货</span>
        </van-tabbar-item>

        <van-tabbar-item :info="6" v-on:click="tiaozhuan2($event)">
            <van-icon class="iconfont iconche" class-prefix='icon' slot="icon" slot-scope="props"
                      :name='props.active ? icon.che_active:icon.che_normal'></van-icon>
            <span>找车</span>
        </van-tabbar-item>
        <!--<van-tabbar-item info="5">-->
        <!--<van-icon class="iconfont icondingdan" class-prefix='icon' slot="icon" slot-scope="props"-->
        <!--:name='props.active ? icon.dingdan_active:icon.dingdan_normal'></van-icon>-->
        <!--<span>发布</span>-->
        <!--</van-tabbar-item>-->
        <van-tabbar-item :info="iinn" v-on:click="gengxin">
            <van-icon class="iconfont iconwode" class-prefix='icon' slot="icon" slot-scope="props"
                      :name='props.active ? icon.wode_active:icon.wode_normal'></van-icon>
            <span>我的</span>
        </van-tabbar-item>
    </van-tabbar>

    <!--使用图片-->
    <!--<van-tabbar v-model="active">-->
    <!--<van-tabbar-item v-on:click="tiaozhuan($event)">-->
    <!--<span>找货</span>-->
    <!--<img slot="icon" slot-scope="props" :src="props.active ? icon.fangdajing1 : icon.fangdajing2">-->
    <!--</van-tabbar-item>-->
    <!--</van-tabbar>-->
</template>
<!--组件模板只能放在这里，因为vm实例中components有注册这个组件-->
<template id="eerr">
    <!--顶部组件-->
    <van-nav-bar :title="title" left-text="返回" right-text="按钮" left-arrow v-on:click-left="onClickLeft1" v-on:click-right="onClickRight1"/>
</template>
<template id="counter1">
    <div>{{counn}}</div>
</template>
<template id="counter2">
    <div>{{aabb}}</div>
</template>
<!--<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>-->
@Scripts.Render("~/bundles/main")
@Scripts.Render("~/bundles/vue")
@Scripts.Render("~/bundles/vant")
@Scripts.Render("~/bundles/other")
<script type="text/javascript" src="/Scripts/layout/store.js"></script>
@RenderSection("scripts", required: false)
<script type="text/javascript" src="/Scripts/layout/layout.js"></script>

layout.js

Vue.use(VueLazyload, {
    //preLoad: 1.3,//预加载高度的比例
    loading: 'https://img.yzcdn.cn/vant/user-active.png',//加载时的图片
    error: 'https://img.yzcdn.cn/vant/user-active.png',//错误时的图片
    attempt: 1//尝试次数
});

//子组件
let tabbar = {
    name:'tabbartemp',
    template:'#tabbartemp',
    data(){
        return {
            iinn:num,
            flag:true,
            icon: {
                fangdajing1: 'https://img.yzcdn.cn/vant/user-active.png',
                fangdajing2: 'https://img.yzcdn.cn/vant/user-inactive.png',
                dianhua1: 'https://img.yzcdn.cn/vant/user-active.png',
                dianhua2: 'https://img.yzcdn.cn/vant/user-inactive.png',
                che1: 'https://img.yzcdn.cn/vant/user-active.png',
                che2: 'https://img.yzcdn.cn/vant/user-inactive.png',
                dingdan1: 'https://img.yzcdn.cn/vant/user-active.png',
                dingdan2: 'https://img.yzcdn.cn/vant/user-inactive.png',
                wode1: 'https://img.yzcdn.cn/vant/user-active.png',
                wode2: 'https://img.yzcdn.cn/vant/user-inactive.png'
            }
        }
    },
    //父传子参数
    //props:['active'],//active传的是索引，(属性名)
    props:{
        active:{
            type:Number,
            default:0
        },
        m:{
            type:String,
            default:''
        }
    },
    //计算属性
    computed:{
        index:{
            get(){
                return this.active;
            },
            set(){}
        }
    },
    //方法
    methods:{
        //用click更改url实现页面跳转
        tiaozhuan: function (event) {
            location.href = "/Home/Index";
        },
        tiaozhuan1: function (event) {
            location.href = "/Home/About";
        },
        tiaozhuan2: function (event) {
            location.href = "/Home/Contact";
        },
        gengxin:function(){
            //方法一，在子组件里直接可以修改父的值（sync）
            this.$emit('update:m','鳄鱼')
            //方法二，在子组件里触发父组件的方法
            this.$emit('child-tot')
            //两个方法可以并存，就看你使用组件时使用的是事件还是sync的方式
        }
    }
};

//父组件
let vm = new Vue({
    el: '#app',
    store,
    data: {
        aabb:"150父传子",
        total:'abcd',
        cityArr:['北京','上海','广州','深圳','青岛','济南','烟台','威海','泰安'],
        init:null,
        images: [
            'https://img.yzcdn.cn/vant/apple-1.jpg',
            'https://img.yzcdn.cn/vant/apple-2.jpg'
        ]
    },
    //初始化
    created() {
        //this.active = num;
        this.getData();
    },
    computed:{//使用vuex必须要放在计算属性里，进行实时计算，好得到更新的数据，否则就失去意义了
        //这个count对应的是页面上的{{count}}
        count:function(){
            return this.$store.state.count;       //return this.store.state.count
        },
        //这个city对应的是页面上的{{city}}
        city:function() {
            // 通过vuex的getters方法来获取state里面的数据
            return this.$store.getters.getCityFn;
            //return this.$store.state.city
            //因为在getters里只是返回了city，所以这里和直接用state.city结果是一样的
        },
        userName:function(){
            return this.$store.getters.userName;
        }
    },
    //方法
    methods: {
        getData:function(){
            $.ajax({
                type: 'get',
                url: "/scripts/read.txt",
                dataType: 'json',
                success: function (data) {
                    if(data){
                        this.init = data;
                        console.log(data);
                        console.log('ok');
                    }
                }

            });
        },
        onClickLeft:function() {
            //this.$toast('返回');
            //history.go(-1);
            history.back();
            //history.forward();

        },
        onClickRight:function() {
            this.$toast('按钮');
        },
        change:function() {
            this.$refs.child.iinn += 2;
            if(this.$refs.child.iinn>8){
                this.$refs.child.iinn = null;
                this.$nextTick(function(){
                    this.$refs.tyu.style.display = 'none';
                })

            }
        },
        gai:function() {
            if(this.$refs.child.flag){
                this.$refs.child.flag = false;
            }else{
                this.$refs.child.flag = true;
            }
        },
        //方法二
        upd:function(){
            this.total = '大象'
        },
        butonly:function(){
            //这里是不通过actions，直接去触发mutations中的add方法
            this.$store.commit('add')
        },
        getdataa:function(){
            //这里是不通过actions，直接去触发mutations中的add方法
            this.$store.commit('getdataa',this.cityArr)
        },
        add:function(){
            //这里是通过actions分发，actions中的方法必须通过dispatch来触发!!!
            //store.dispatch('add')
            this.$store.dispatch({
                type: 'add'
            })
        },
        reduce:function(){
            this.$store.dispatch('reduce',5)//参数传给actions中的方法
        },
        backFn:function(index){
            // 调用vuex的ations设置城市的值
            this.$store.dispatch("setCityName", this.cityArr[index]);
            console.log(this.$store.state.city)//得到我当前选中的城市
        },
    },
    //注册组件
    components:{
        tabbar,eerr,counter1,counter2
    }
});//.$mount('#app')

 

master.css

[v-cloak]{display: none;}

#app{
    font-size:14px;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}
.van-swipe{
    max-height:3.5rem;/*这里设置轮播焦点高度*/
}
.van-swipe img{
    width:100%;
}
/*修改选中颜色*/
/*.van-tabbar-item--active{*/
    /*color:#ff9900;*/
/*}*/

index.cshtml

@{
ViewBag.Title = "首页";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div>
    <!--标题-->
    <!--子组件可以用自己的方法-->
    <eerr></eerr>
    <!--轮播图-->
    <div>
        <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <img v-lazy="image" />
            </van-swipe-item>
        </van-swipe>
    </div>
    <div>
        首页页面内容
        {{total}}<br/>
        
        <button v-on:click="change" ref="tyu">123</button>
    </div>
    <!--导航组件，active传的是索引，(属性名)-->
    <!--这里只是更新值-->
    <tabbar :active="0" ref="child" :m.sync="total"></tabbar>
</div>

<!--该页面的js-->
@section scripts{
<script src="/Scripts/index/index.js"></script>
}

index.js

var num = 0;
//子组件
let eerr = {
    name:'eerr',
    template:'#eerr',
    data(){
        return {title:'首页'}
    },
    methods:{
        onClickLeft1:function() {
            this.$toast('独立组件');
        },
        onClickRight1:function() {
            this.$toast('独立组件按钮');
        }
    }
}

store.js

let store = new Vuex.Store({
    state:{
        count:0,//值是通过计算属性实时渲染的
        city:"城市名",
        counn:"120store"
    },
    // 2. getters改变state中值的状态，形成新的值
    getters:{
        // 参数列表state指的是state数据
        getCityFn(state){
            return state.city;
        },
        userName(state){
            return state.count + ',hello';
        }
    },
    mutations:{
        add:function(state){
            state.count++;
        },
        reduce:function(state,val){
            state.count -= val;
        },
        // state指的是state的数据
        // name传递过来的数据
        setCity:function(state, name){
            state.city = name;//将传参设置给state的city
        },
        getdataa:function(state,val){
            state.counn = val;
        }
    },
    actions:{
        add:function(context){
            context.commit('add')
        },
        reduce:function(context,num){
            context.commit('reduce',num);//这里num接收dispatch传来的参数
            //return store.commit('reduce')
        },
        // 设置城市信息
        // 参数列表：{commit, state}
        // state指的是state数据
        // commit调用mutations的方法
        // name就是调用此方法时要传的参数
        setCityName:function({commit,state}, name){
            // 跟后台打交道
            // 调用mutaions里面的方法
            commit("setCity", name);
        }
    }
})

 

 

about.cshtml

@{
ViewBag.Title = "找货";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div>
    <!--标题-->
    <div>
        <van-nav-bar title="@ViewBag.Title" left-text="返回" right-text="按钮" left-arrow v-on:click-left="onClickLeft" v-on:click-right="onClickRight"/>
    </div>

    <div>
        找货页面内容<br/>
        <!--{{$store.state.count}}这种写法就不是通过计算属性了，而是直接找state下的状态-->
        {{userName}}<br/>
        <p><button v-on:click="butonly">也可以加</button></p>
        <p>
            <button v-on:click="add">+++</button>
            <button v-on:click="reduce">---</button>
        </p>
        <br/>
        <h3>@ViewBag.Message</h3>
        <counter1></counter1>
        <button v-on:click="getdataa">999</button>
        <counter2 v-bind:aabb="aabb"></counter2>
        <p>Use this area to provide additional information.</p>
        <button v-on:click="gai" ref="tyu">456</button>
    </div>
    <tabbar :active="1" ref="child"></tabbar>
</div>
<!--该页面的js-->
@section scripts{
<script src="/Scripts/index/about.js"></script>
}

about.js

var num = 1;
let counter1 = {
    //这里是通过store来拿数据
    template:'#counter1',
    computed:{
        counn(){
            return this.$store.state.counn;
        }
    }
}
let counter2 = {
    //这里是父传子
    template:'#counter2',
    props:['aabb']
}

contact.cshtml

@{
ViewBag.Title = "找车";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div>
    <!--标题-->
    <div>
        <van-nav-bar title="@ViewBag.Title" left-text="返回" right-text="按钮" left-arrow v-on:click-left="onClickLeft" v-on:click-right="onClickRight"/>
    </div>

    <div>
        找车页面内容
        {{total}}
        <h3>@ViewBag.Message</h3>

        <address>
            <!--city是vuex里的数据-->
            <h1>{{city}}</h1>
            <div class="city">
                <ul>
                    <li v-for="(item,index) in cityArr" v-on:click="backFn(index)">
                        <h2>{{item}}</h2>
                    </li>
                </ul>
            </div>
        </address>

        
    </div>
    <!--这里可以触发父级的方法，做更多事-->
    <tabbar :active="2" v-on:child-tot="upd"></tabbar>
</div>
<!--该页面的js-->
@section scripts{
<script src="/Scripts/index/contact.js"></script>
}