<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>vue</title></head><body><divid="app"></div><scriptsrc="https://vuejs.org/js/vue.js"></script><scriptsrc="js/vue-router.js"></script><script>varLogin={template:`<div>我是登录页面<span>接收到的参数是:{{msg}}</span></div>`,data(){return{msg:''}},created(){this.msg=this.$route.query.id;}}varReg={template:`<div>我是注册页面<span>这是我获取到的路由参数：{{regfoo}}</span></div>`,data(){return{regfoo:'1122'}},created(){this.regfoo=this.$route.params.foo;}}Vue.use(VueRouter);varrouter=newVueRouter({routes:[{path:'/login',name:'login',component:Login},{path:'/reg/:foo',name:'reg',component:Reg}]})newVue({el:"#app",router,template:`<div><router-link:to="{name:'login',query:{id:'123'}}">去登陆</router-link>|<router-link:to="{name:'reg',params:{foo:'bar'}}">去注册</router-link><router-view></router-view></div>`,data:function(){return{}},methods:{goreg(){this.$router.push({path:'/reg'})}}})</script></body></html>
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>vue</title></head><body><divid="app"></div><scriptsrc="https://vuejs.org/js/vue.js"></script><scriptsrc="js/vue-router.js"></script><script>varLogin={template:`<div>我是登录页面</div>`}varReg={template:`<div>我是注册页面</div>`}Vue.use(VueRouter);varrouter=newVueRouter({routes:[{path:'/login',name:'login',component:Login},{path:'/reg',name:'reg',component:Reg}]})newVue({el:"#app",router,template:`<div><router-linkto="/login">去登陆</router-link>|<router-linkto="/reg">去注册</router-link><button@click='goreg'>点击去注册</button><router-view></router-view></div>`,data:function(){return{}},methods:{goreg(){this.$router.push({path:'/reg'})}}})</script></body></html>
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>vue</title></head><body><divid="app"></div><scriptsrc="https://vuejs.org/js/vue.js"></script><script>/*父组件通过datacont传了值属性名就是datacont子组件通过props里面的值来定义属性名进行接受子传父：示例中通过button的click触发了事件。事件中通过this.$emit触发父组件的自定义事件，定义事件名和事件的值。传递几个值，后面就要定义几个参数进行接收父组件要在传递事件的子组件上定义和传递事件名一样的属性名进行监听。也就是示例中的@baba='reserve'当有事件传过来的时候，就触发了reserve事件。传递过来几个事件值reserve事件就要接收几个值。然后就可以使用子组件传递过来的值*/varzizujian={template:`<div>我是子组件{{datacont}}<button@click="btnclick">点击子传父</button></div>`,props:['datacont'],methods:{btnclick(){this.$emit('baba','儿子给父亲传的东西','儿子给父亲传的东西2');}}}varfuzujian={template:`<div>我是父组件{{msg}}{{msg2}}<zizujiandatacont="啊啊啊"@baba='reserve'></zizujian></div>`,data(){return{msg:'',msg2:''}},components:{zizujian},methods:{reserve(val,val2){this.msg=valthis.msg2=val2}}}newVue({el:"#app",components:{fuzujian},template:`<div><fuzujian><divslot="a">第一个dom</div><divslot="b">第二个dom</div><divslot="c">第三个dom</div></fuzujian></div>`,data:function(){return{}}})</script></body></html>
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>vue</title></head><body><divid="app"></div><scriptsrc="https://vuejs.org/js/vue.js"></script><script>/*slot插槽就是给模版的dom留下坑位如果不给slotname值就会输出组件中的所有dom如果给slotname值，那么只会输出dom的slot的属性值和name值相同的dom如果在组件中引用了另一个组件，那么被引用的就是子组件，引用别人的就是父组件。可以通过this在父组件中获取子组件的节点，也可以在子组件中获取父组件的节点。节点中包括所有数据例如data值等*/varzizujian={template:`<div>我是子组件</div>`,data(){return{msg:'hello'}},created(){console.log(this.$parent)}}//父组件varfuzujian={template:`<div>我是父组件<slotname="b"></slot><slotname="c"></slot><zizujianref="zi"></zizujian></div>`,components:{zizujian},mounted(){console.log(this.$refs.zi)}}newVue({el:"#app",components:{fuzujian},template:`<div><fuzujian><divslot="a">第一个dom</div><divslot="b">第二个dom</div><divslot="c">第三个dom</div></fuzujian></div>`,data:function(){return{}}})</script></body></html>
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>vue</title></head><body><divid="app"></div><scriptsrc="https://vuejs.org/js/vue.js"></script><script>//局部组件varMyheader={template:`<div>我是头部</div>`}varMybody={template:`<div>身体</div>`}//全局组件Vue.component('Myfoot',{template:`<div>底部</div>})newVue({el:"#app",components:{Myheader,Mybody},template:`<div><Myheader></Myheader><Mybody></Mybody><Myfoot></Myfoot></div>`,data:function(){return{}}})</script></body></html>
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>vue</title></head><body><divid="app"></div><scriptsrc="https://vuejs.org/js/vue.js"></script><script>/*whtch监听*/newVue({el:"#app",template:`<div>输入:<inputtype="text"v-model='msg.text'/><br>{{msg}}</div>`,data:function(){return{msg:{text:''}}},watch:{/*msg(newval,oldval){if(newval=='love'){alert(newval)}}*/msg:{handler(newval,oldval){if(newval.text=='love'){alert(newval.text)}},deep:true}}})</script></body></html>
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>vue</title></head><body><divid="app"></div><scriptsrc="https://vuejs.org/js/vue.js"></script><script>/*过滤器没啥好说的就是对输出的数据中间在一个函数里过一遍进行处理完成之后在返回。有全局过滤器和组件过滤器写法稍有一些不同全局是直接通过Vue.filter过滤局部是直接在当前组件定义filters*/Vue.filter('fanzhuan',function(val){returnval+'1111';})newVue({el:"#app",template:`<div>我输入的<inputtype="text"v-model='demo'/><br>输出我的输出的:{{demo}}<br>翻转:{{demo|fanzhuan}}</div>`,data:function(){return{demo:'1232'}},filters:{fanzhuan:function(val){returnval+'1111';}}})</script></body></html>
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>vue</title></head><body><divid="app"></div><scriptsrc="https://vuejs.org/js/vue.js"></script><script>/*v-bind:value=""数据单向绑定可以通过js来改变页面显示的值，只要js更改，页面就更改。v-model:"demo"数据双向绑定当value发生变化的时候，相应的js也被改变。当js被改变的时候，绑定此js的单向绑定数据也会跟着改变v-on:click="update"时间绑定可以绑定click点击也可以绑定经过离开等时间来执行函数函数写到methods对象里*/newVue({el:"#app",template:`<div>单向数据绑定<inputtype="text"v-bind:value="demo":class="demo":aaa="demo"><br>双向数据绑定<inputtype="text"v-model:"demo":class="demo"><br>{{demo}}<buttonv-on:click="update">点击改变demo值</button></div>`,data:function(){return{demo:'1232'}},methods:{update:function(){this.demo='666666';}}})</script></body></html>