@{
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>
}