Vue初级

@{
    ViewBag.Title = "Index";
}
@section styles{
<link href="~/Content/style.css" rel="stylesheet" type="text/css" />
<link href="~/Content/config.css" rel="stylesheet" type="text/css" />
    }

    <form role="form" class="form-inline">
        @*<div class="form-group" id="sel_plant1">
            <label for="plant" class="col-sm-2 control-label">@Resources.Common.Plant</label>
            <div class="col-sm-10">
                <select id="PlantSelect1" class="form-control"  >
                    <option v-for="i in items" v-bind:value="i.Value">{{i.Text}}</option>
                </select>
            </div>
        </div>*@
        <div id="app">
        绑定孙而未绑定子<sele></sele>
        绑定孙且绑定子<sele v-bind:tp="tp"></sele>
        通过变量名使用父组件<f></f>
        通过组件名使用父组件<lab2></lab2>
        直接使用子组件<lab3></lab3>
        <div>
        多个父组件实例相同的provider    <lab5></lab5>
        多个父组件实例不同的provider    <lab6></lab6>
        多个父组件实例不同的provider不同的inject    <lab7></lab7>
            </div>
        </div>
        <div class="form-group" id="sel_plant">
            <label for="plant" class="col-sm-2 control-label">@Resources.Common.Plant</label>
                <div class="col-sm-10">
                    <input type="text" v-model="name"/>
                    <lab1 v-bind:v="name"></lab1>
                    全局<lab2></lab2>
                    局部<lab4></lab4>
                    <ol>
                        全局<todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
                    </ol>
                    <ol>
                        局部使用<lit1 v-for="item in sites" v-bind:todo="item"></lit1>
                        多个局部子组件<lit2 v-for="item in sites" v-bind:todo="item"></lit2>
                    </ol>

                    <select id="PlantSelect" class="form-control">
                        <option v-for="i in items" v-bind:value="i.Value">{{i.Text}}</option><!--父组件的数据通过v-bind指令传给子组件通过prop申明的plant属性-->
                    </select>
            </div>
        </div>
    </form>
@section scripts{
<script src="~/Scripts/vue.min.js"></script><!--js引入的位置顺序会影响vue实例-->
<script src="~/Scripts/axios.min.js"></script>
@*<script src="https://cdn.bootcss.com/es6-promise/4.1.1/es6-promise.auto.min.js"></script>*@
    <script type="text/javascript">
        Vue.component('todo-item', {//全局组件
            props: ['todo'],//父组件的数据通过v-bind指令传给子组件通过prop申明的todo属性
            template: '<li>{{ todo.text }}</li>'
        })
        var lab2=Vue.component('lab2', {//全局组件
            provide() {//提供父组件的值
                return { testf: this.fromf }////使用相同的子组件时应用相同的provide规则
            },
            template: '<div><lab3></lab3></div>',//组件定义模板，子组件嵌入模板，模板嵌入html
            data() {
                return { fromf: 'ini2' }
            }
        })
        var lab5 = Vue.component('lab5', {//全局组件
            provide() {
                return { testf: this.fromf }//使用相同的子组件时应用相同的provide规则;使用data返回的值，要加this
            },//提供父组件的值
            template: '<div><lab3></lab3></div>',//组件定义模板，子组件嵌入模板，模板嵌入html
            data() {
                return { fromf: 'ini5' }
            }
        })

        var lab6 = Vue.component('lab6', {//全局组件
            provide() {
                return { testf6: this.fromf }//使用相同的子组件时应用相同的provide规则;使用data返回的值，要加this
            },//提供父组件的值
            template: '<div><lab3></lab3></div>',//组件定义模板，子组件嵌入模板，模板嵌入html
            data() {
                return { fromf: 'testf6' }
            }
        })
        var lab7 = Vue.component('lab7', {//全局组件
            provide() {
                return { testf7: this.fromf, testf7v: 'lab7 okay:父组件提供了值' }//使用相同的子组件时应用相同的provide规则;使用data返回的值，要加this
            },//提供父组件的值
            template: '<div><lab3></lab3></div>',//组件定义模板，子组件嵌入模板，模板嵌入html
            data() {
                return { fromf: 'testf6' }
            }
        })

       Vue.component('lab3', {//需要通过有provide属性的父组件调用
           inject: ['testf', 'testf6', 'testf7v'],// 注入，接受父组件的值
           data() {//定义用在子模板的参数
               return {
                   subv: this.testf,
                   sub6: this.testf6,
                   f7:this.testf7v,
                   subn: 'subname',
               }
           },
           mounted:function(){
               this.initial();//钩子，所有函数执行前执行的函数
           },
           methods:{
               initial:function(){
                   if (!this.testf)//未定义则不显示
                       this.subv = "父组件未提供父组件值"
                   if(!this.testf6)
                       this.sub6 = "父组件未提供父组件值"
                   if (!this.testf7v)
                       this.f7 = "父组件未提供父组件值"
               }
           },
           template: '<div><li>{{this.f7}}</li><br><li>{{this.sub6}}</li><br><li>{{this.subv}}</li><br><li>{{this.subn}}</li><br><div> '
       })
       Vue.component('sele', {//父sele，在dom中直接使用的
           props:['tp'],
           //provide: { selv:'ghjgh' },//直接赋值
           provide() {
               return { selv: this.vitem }//使用相同的子组件时应用相同的provide规则;使用data返回的值，要加this
           },
           template: '<div><label>{{tp}}</label><br><myoption></myoption></div>',//多个并列子组件加<div>,注入sele.子div，通过props获得来自dom直接父的传值
           data() { return { vitem: [{ Value: 'dddddd' }, { Value: 'aaaaaa' }] } },
        })
       Vue.component('myoption',{
           inject: ['selv'],
           //template: '<ol><li v-for="i in this.selv">{{i.Value}}</li></ol>'//孙ol，通过inject直接获得来自隔代父的传值
           template: '<select><option v-for="i in this.selv">{{i.Value}}</option></select>'
       })

       var app=new Vue({
           el: '#app',
           data:{
               fa: 'father',
               tp:'ftp'
           },
           //template: '<label>{{fa}}</label><br><div><lab2></lab2></div>',//直接指定模板渲染DOM实例化组件lab2
           components: {'f': lab2} //注册为#app子组件并另指定标签名f，然后在DOM嵌入进行实例化f
       })

            var vm= new Vue({
                el: "#sel_plant",
                components: {//局部组件
                    data() { return { me: this.name } },
                    'lit1': { template: '<li>{{ todo.text }}</li>', props: ['todo'] },//父组件的数据通过v-bind指令传给子组件通过prop申明的todo属性
                    'lab1': { template: '<label>{{v}}</label>', props: ['v'] },
                    'lab4': { template: '<lab2></lab2>' }
                },
                data: {
                    name:'s1',
                    items: [],
                    sites: [
                      { text: 'Runoob' },
                      { text: 'Google' },
                    ]

                },
                mounted:function(){
                    this.getPlants();//钩子，所有函数执行前执行的函数
                },
                //created:function(){
                //    this.getPlants();
                //},
                methods: {
                    getPlants: function () {
                        axios
                           .post('/Home/GetPlant')//promise 未定义解决办法，需要ES6支持，可用google内核。或引入es6-promise.auto.min.js
                           .then(function (response) {
                               vm.items = response.data; //alert(vm.items);
                               //$.each(response, function (item, value) { alert(item + ":" + value); })//item的第一项为真实的data
                           })
                           .catch(function (error) { })
                
                       
                        //$.ajax({
                        //    type: 'POST',
                        //    url:"/Home/GetPlant",
                        //    dataType:'json',
                        //    success: function (data) {
                        //        //this;//指当前ajax请求对象,this.items将无法绑定items
                        //        vm.items = data;
                        //        $.each(data,function(index,item){
                        //           alert(index + ":" + item);//item与后台一致的对象属性定义
                        //        })
                        //    },
                        //    error:function(e){}
                        //});

                        //this.items = [{ Text: '8700', Value: '8700' }, { Text: '8800', Value: '8800' }];//this为Vue实例

                    }
                }
               
            })
            //var child = Vue.extend({ template: '<option value="' + plant.Value + '">{{plant.Text}}</option>' });
            //Vue.component('op_item', {
            //    props: ['plant'],
            //    template: child,
            //})

        //Vue.component('op_item', {
        //    props: ['plant'],
        //    template: '<option value="' + plant.Value + '">{{plant.Value}}</option>',
        //})

        //new Vue({
        //    el: '#sel_plant',
        //    data: {
        //        info: null
        //    },
        //    mounted() {
        //        axios
        //            .post('/Home/GetPlant')
        //            .then(response=>(this.info = response))
        //            .catch(function (error) {
        //                console.log(error);
        //            });

        //    }

        //})
        //$(document).ready(function () {
        //    $.ajax({
        //        type: 'POST',
        //        url:"/Home/GetPlant",
        //        dataType:'json',
        //        success:function(data){
        //            $.each(data,function(i,d){
        //                $("#PlantSelect").append('<option value="'+d.Value+'">'+d.Text+'</option>');
        //            })
        //        },
        //        error:function(e){}
        //    });
        //});
    </script>

    }