Vue部分小结
首先理清思路
代码展示
1、v-if以及{{}}代码展示
<body><div id="app" ><h1 v-bind:class="true">1</h1><h1 v-if="name == 'jake'">{{name}}</h1><h1 v-if="age >= 25">{{age}}</h1></div></body><script type="text/javascript">const app = new Vue({el:'#app',data:{name:'jake',age:30,true:'red'}})</script>
2、v-for代码展示
<body><div id="app"><ul><!--<li>大话西游</li><li>海王</li><li>阿甘正传</li><li>山楂树之恋</li>--><li v-for = "item in movies">{{item}}</li></ul></div></body><script>const app = new Vue({el:'#app',data: {movies:['泰坦尼克号','三傻大战宝莱坞','海蒂和爷爷','复仇者联盟','活着']}})</script>
3、v-show
<body><div id="app"><input type="button" value="按钮" v-on:click="change"><p v-show="is_show">秀儿，是你吗</p></div></body><script>var app = new Vue({el: '#app',data: {is_show: false,},methods: {change: function () {this.is_show = !this.is_show;}}});</script>
4、v-on（因为v-on有很多的事件比如常用的click等点击这里了解等多）
<button v-on:click="onClick">点我</button>
5、v-bind
<body><div id="app"><h1 class = "changcolor">改变颜色</h1><button v-bind:class="{changcolor:ischangecolor}">改变颜色</button></div></body><script type="text/javascript">const app = new Vue({el:'#app',data:{ischangecolor:false}})</script>
6、v-model
<template><div><div class="line" v-for="(item,index) in dataModel"><input type="text" v-model="dataModel[index].value1" /><span>{{dataModel[index].value1}}</span><button v-bind:data-index="index" v-on:click="submitClick">提交</button><input type="text" v-model="dataModel[index].value2" /><span>{{dataModel[index].value2}}</span></div></div></template><script>export default {data() {return {dataModel: []}},created(){// 这里是动态生成v-model,这个可以放在网络请求成功里面;var len = 4;for (var i = 0; i < len; i++) {var item = {value1: ''};this.dataModel.push(item);}},methods:{// 显示v-model里面的数据submitClick: function(event){var tag = event.target;var index = tag.getAttribute('data-index');alert(this.dataModel[index].value1);console.log(this.dataModel)}}}</script>
语法糖v-bind 简写为“：”，v-on简写为“@”
常用属性
el：要挂载的div
data：数据
methods：方法
<style>.changcolor{color:red;}</style><div id="app"><h1 v-bind:class="{changcolor:ischangcolor}">改变颜色</h1><button v-on:click="btnclick">变色</button></div></body><script>const app = new Vue({el:'#app',data:{ischangcolor:true},methods:{btnclick:function(){this.ischangcolor = !this.ischangcolor;}}})</script>
computed：
计算属性
本质为属性(get/set)
计算属性和methods对比---->计算属性有缓存
<body><div id="lantian"><li v-for="v in stus">{{v.name}}--{{v.sex}}</li>{{type}}<input type="radio" v-model="type" value="girl" />女孩<input type="radio" v-model="type" value="boy" />男孩</div><script>var app = new Vue({el: '#lantian',computed: {stus() {if(this.type == 'all') {return this.user;} else {return this.user.filter((v) => {return v.sex == this.type;});}}},data: {type: 'all',user: [{name: '小王',sex: 'boy'},{name: '小明',sex: 'boy'},{name: '小李',sex: 'girl'},{name: '小梅',sex: 'girl'}]}});</script></body>
watch:监听到并且执行
<div><p>FullName: {{fullName}}</p><p>FirstName: <input type="text" v-model="firstName"></p></div>new Vue({el: '#root',data: {firstName: 'Dawei',lastName: 'Lou',fullName: ''},watch: {firstName(newName, oldName) {this.fullName = newName + ' ' + this.lastName;}} })
组件
创建组件化
Vue.extend方法
使用template注册组件
注册组件
使用component注册组件
使用
组件名(需放置在vue实例中才可使用)
全局、局部组件
component、Vue实例
<body><div id="app"><my-cpn></my-cpn><my-cpn></my-cpn><my-cpn></my-cpn></div></body><script type="text/javascript">//创建组件化构造器对象const cpn = Vue.extend({//通过template属性放置组件模块代码template:`<div><h1>我是表题</h1><h5>我是内容</h5><h5>我是内容2</h5></div>`});//注册组件（全局组件）(参数1：使用时的组件名（标签名） 参数2：要放入的组件名)ponent('my-cpn',cpn);//使用const app = new Vue({el:'#app'});</script>
组件
组件抽离
通过script标签、通过template标签
父子通信
父传子(props),子传父($emit–事件)
父子访问
父访问子( c h i l d r e n , children, children,refs)
子访问父( p a r e n t , parent, parent,root)
<body><div id="app"><my-cnp></my-cnp></div><script id="cnp" type="text/x-handlebars-template"><div><h1>hello world</h1></div></script></body><script>//用语法糖进行全局注册ponent('my-cnp',{template:'#cnp'});//Vue实例const app = new Vue({el:'#app'});</script>
父传子–字符数组
<body><div id="app"><my-cnp :cmessage = "message" :cmovies = "movies"></my-cnp></div><template id="cnp"><div>{{cmessage}}<ul><li v-for="m in cmovies">{{m}}</li></ul></div></template></body><script>//通过全局注册的语法糖，进行注册ponent('my-cnp',{template:'#cnp',props:['cmessage','cmovies']});const app = new Vue({el:'#app',data:{message:'hello',movies:['海贼王','阿甘正传','父与子']}});</script>
父传子–对象
<body><div id="app"><my-cnp :cmessage = "message" :cmovies = "movies"></my-cnp><hr /><my-cnp :cmessage = "message" ></my-cnp><hr /><my-cnp :cmovies = "movies"></my-cnp><hr /><my-cnp ></my-cnp></div><template id="cnp"><div>{{cmessage}}<ul><li v-for="m in cmovies">{{m}}</li></ul></div></template></body><script>//通过全局注册的语法糖，进行注册ponent('my-cnp',{template:'#cnp',//props:{//cmessage:String,//cmovies:Array//}props:{cmessage:{type:String,default:'hahaha'},cmovies:{type:Array,default:['ha','ha']}}});const app = new Vue({el:'#app',data:{message:'hello',movies:['海贼王','阿甘正传','父与子']}});</script>
子传父
<body><div id="app"><my-cpn @itemclick="cpnitemclick"></my-cpn></div><template id="cpn"><div><button v-for="item in types" @click="btnClick(item.id)">{{item.name}}</button></div></template></body><script>ponent('my-cpn',{template:'#cpn',data(){return{types:[{id:1,name:'热门'},{id:2,name:'水果'},{id:3,name:'蔬菜'},]}},methods:{btnClick(item){console.log(item);this.$emit('itemclick',item)}}})const app = new Vue({el:'#app',methods:{cpnitemclick(item){console.log('子组件发来信息--->'+item)}}})</script>
双向绑定
<body><div id="app"><h1>父组件中的值1：{{num1}}</h1><h1>父组件中的值2：{{num2}}</h1><hr /><my-cpn :cnum1="num1" :cnum2="num2" @num1change="vuenum1change" @num2change="vuenum2change"></my-cpn></div><template id="cpn"><div><h1>{{cnum1}}</h1><input type="text" v-model="cnum1" @input="cpnnum1change" /><h1>{{cnum2}}</h1><input type="text" v-model="cnum2" @input="cpnnum2change" /></div></template></body><script>// 通过语法糖，注册全局组件ponent('my-cpn', {template: '#cpn',props: ['cnum1', 'cnum2'],methods: {cpnnum1change(e) {this.$emit('num1change', e.target.value)},cpnnum2change(e) {this.$emit('num2change', e.target.value)}}})// Vue实例const app = new Vue({el: '#app',data: {num1: 1,num2: 2},methods: {vuenum1change(num) {this.num1 = num;},vuenum2change(num) {this.num2 = num;}}})</script>
插槽
简单插槽的使用
具名插槽的使用
编译作用域
编译作用域插槽
<body><div id="app"><my-cpn><button>我是按钮</button></my-cpn><hr /><my-cpn><label>我就不放按钮！！</label></my-cpn><hr /><my-cpn><input type="text" value="我要放文本框！"/></my-cpn></div><template id="cpn"><div><h1>我是组件哈哈</h1><h1>我还是组件哈哈</h1><slot></slot></div></template><script>// 通过语法糖全局注册组件ponent('my-cpn',{template:'#cpn'})const app = new Vue({el:'#app'})</script></body>
<body><div id="app"> <!-- 父组件(Vue---false)--><!-- 子组件(组件---true)--><my-cpn v-show="isshow"></my-cpn></div><template id="cpn"><div><h1>我是组件</h1><h1>我是组件</h1></div></template><script>ponent('my-cpn',{template:'#cpn',data(){return{isshow:true}}})const app = new Vue({el:'#app',data:{isshow:false}})</script></body>
<body><div id="app"><my-cpn><template slot-scope="slot"><span v-for="l in slot.data">{{l}} ---></span></template></my-cpn><hr /><my-cpn><template slot-scope="slot"><ul><li v-for="l in slot.data">{{l}}</li></ul></template></my-cpn></div><template id="cpn"><div><slot :data="languages"></slot></div></template></body><script>ponent('my-cpn', {template: '#cpn',data() {return {languages: ['Java', 'JavaScript', 'C++', 'Python']}}})const app = new Vue({el: '#app'})</script>
感谢观看，妈妈再也不用担心我的学习啦！！
