1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1.0">
6 <title>learn1</title>
7 </head>
8 <body>
9
10
11 <template id="hello">
12 <h1>{{msg}} {{user}}</h1>
13 </template>
14
15 <template id="form">
16 <div>
17 <input :value="value" type="text" id="name" v-on:input="onInput">
18 </div>
19 </template>
20
21 <template id='c'>
22 <input type="checkbox" v-on:change="onChange"/>
23 </template>
24
25 <template id="greetings">
26 <div>
27 <my-checkbox v-model='f' value="some value" ></my-checkbox>
28 <h1>{{f}}</h1>
29 <hr>
30 //此处v-model=kk,目的是zz子组件将自己的值传递给父组件的hk
31 //kk=112，是将父组件的112,或者父组件的其他值传递给子组件
32 //也就是说在自定义模板上定义v-mode目的是向外传递
33 //kk=112或其他类似属性，目的是向内传递给自己定义的模板的属性
34 <zz v-model='hk' kk="112"></zz>
35 </div>
36 </template>
37
38 <template id="fff" >
39 <label>
40 //这里的:checked是input自带属性，不是我们定义的，它接收checkval方法计算的值
41 //:kk="kk"对应上面的 zz标签里的 kk=112，可以理解将112传递给kk,kk传递给:kk
//这个 checkval是计算属性，将计算结果传递给:checked，这个checkVal作用是，在父组件里使用子组件，在子组件上的v-model上的值传递给子组件
42 <input type="radio" :checked="checkVal" :kk="kk" @change="update">
43 {{ modelVal }}
44 </label>
45 </template>
46
47 <div id="app">
48 <greetings-component></greetings-component>
49 </div>
50 <!-- built files will be auto injected -->
51 </body>
52 </html>
1 // The Vue build version to load with the `import` command
2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3 import Vue from 'vue'
4 import router from './router'
5 //import ElementUI from 'element-ui'
6 //import 'element-ui/lib/theme-chalk/index.css'
7
8 //import App from './App'
9
10 Vue.config.productionTip = false
11 //Vue.use(ElementUI)
12
13
14 Vue.component('hello-component', {
15 template: '#hello',
16 data: function () {
17 return {
18 msg: 'Hello'
19 }
20 },
21 props: ['user']
22 });
23
24
25 Vue.component('form-component', {
26 template: '#form',
27 props: ['value'],
28 methods: {
29 onInput: function () {
30 this.$emit('input', event.target.value)
31 }
32 }
33 });
34
35 Vue.component('zz',{
36 template:'#fff',
37 model: {
38 //这里的modlVal ，如果不自己定义，默认是prop:'value'，input类似标签
39 //将值存进value里，我们声明了ModelVal，就不存进value里，而是存进modelVal里
40 prop: 'modelVal',
41 event: 'change'
42 },
43 props: {
44 value: {
45 type: Boolean,
46 },
47 modelVal: {
48 default: ""
49 },
50 label: {
51 type: String
52 },kk:{
53 type:String
54 }
55 },
56 computed: {
57 checkVal() {
58 console.log("----------")
59 console.log(this.modelVal)
60 console.log(this.kk)
61 console.log("----------")
62 console.log( this.modelVal === this.value)
63 return this.modelVal === this.value
64 }
65 },
66 methods: {
67 update() {
68 this.$emit('change', this.checkVal)
69 }}
70 })
71
72 Vue.component('my-checkbox', {
73 template:'#c',
74 model: {
75 //这里就是hello存储true或者false ，替代false
76 prop: 'hello',
77 event: 'change'
78 },
79 props: {
80 hello:Boolean, //这里也要先声明hello，
81 value: String
82 },
83 methods:{
84 onChange () {
85 console.log(this.hello)
86 console.log(this.value)
87 console.log(event.target.checked)
88 this.$emit('change',event.target.checked)
89
90 }
91 }
92 })
93
94 Vue.component('greetings-component', {
95 template: '#greetings',
96 data: function () {
97 return {
98 user: 'heroaa',
99 foo:'hello',
100 f:true,
101 world:'world',
102 hk:"",
103 modelVal:''
104 }
105 },
106 methods:{
107 get (v) {
108 console.log(v)
109 }
110 }
111 });
112
113 /* eslint-disable no-new */
114 new Vue({
115 el: '#app',
116 data:{
117 user:'hero'
118 }
119 })
浙公网安备 33010602011771号