自从看了这篇文章，妈妈再也不用担心我的学习了！！

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：要放入的组件名)Vue.component('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>//用语法糖进行全局注册Vue.component('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>//通过全局注册的语法糖，进行注册Vue.component('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>//通过全局注册的语法糖，进行注册Vue.component('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>Vue.component('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>// 通过语法糖，注册全局组件Vue.component('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>// 通过语法糖全局注册组件Vue.component('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>Vue.component('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>Vue.component('my-cpn', {template: '#cpn',data() {return {languages: ['Java', 'JavaScript', 'C++', 'Python']}}})const app = new Vue({el: '#app'})</script>

感谢观看，妈妈再也不用担心我的学习啦！！

自从看了这篇文章，妈妈再也不用担心我的学习了！！相关推荐

《妈妈再也不用担心我的学习系列》之RabbitMQ动态修改队列名
上一篇文章:<妈妈再也不用担心我的学习系列>之RabbitMQ快速入门前言在我们公司日常用RabbitMQ的时候如果多个服务都用到了队列,那么势必会有很多影响(如果不是广播模式队列是轮 ...
人工智能AI解奥数题，妈妈再也不用担心我的学习啦
人工智能AI解奥数题,妈妈再也不用担心我的学习啦原创小智大话人工智能用人工智能求解奥数题 ▲▼◆■★ x ▽=★■◆▼▲ 其中▲.▼.◆.■.★和▽ 分别是自然数.求▲.▼.◆.■.★和▽ ...
看了这篇文章，妈妈再也不用担心我的学习了---spark原理
前言大家好,我是DJ丶小哪吒,我又来跟你们分享知识了.对软件开发有着浓厚的兴趣.喜欢与人分享知识.做博客的目的就是为了能与他人知识共享.由于水平有限.博客中难免会有一些错误.如有纰漏之处,欢 ...
看了这篇文章，再也不用找人设计名片卡证啦！
ps小白们看这里!是不是还在和我以前一样为了名片.证书.邀请函.....设计抠破头?是不是还在为这些小东西花钱找人设计?有了以下几个网站,再也不用走弯路啦! 1.爱给网(质量高主打免费全品类) 作 ...
玩物涨智：妈妈再也不用担心我的学习了
早上逛国外网站的时候看到了一篇挺有意思的文章,描述的是提升人类智力的几种方法.其中包含了为中国父母们所深恶痛绝的电子游戏等方式. 下面对这几种方法做简要的描述如下: 运动有利于物体识别记忆.会释放脑源 ...
scanf输入数组_清除C / C ++中的输入缓冲区,妈妈再也不用担心我的学习
什么是缓冲区? 临时存储区称为缓冲区.所有标准输入和输出设备都包含一个输入和输出缓冲区.在标准C / C ++中,流被缓冲,例如在标准输入的情况下,当我们按键盘上的键时,它不会发送到您的程序,而是由操 ...
推荐几款Python编程类游戏，妈妈再也不用担心我的学习了
自学过编程的小伙伴都知道,在学习的过程中,不仅仅要记下很多的知识点,而且那些知识点,都是非常的干,很干,很干,没有一点乐趣的感觉..... 所以在很多人学习Python的人,也许他的基础知识还没有学好 ...
Visual studio 2019 支持graphics.h 库的支持，简单易懂，妈妈再也不用担心你的学习
Visual studio 2019 支持graphics.h 库的支持首先找到EasyX 的官网,传送门请老爷们看下面操作点击安装就可以,就可以写一段图形代码看看是否成功例: #includ ...
妈妈再也不用担心我的学习了：“婷婷心选”直播首秀有感
2020年7月4日,一场别开生面.形式新颖的淘宝直播,吸引了大批的宝妈和宝爸前往围观. 一位身穿飘逸汉服,气质雍容古典的优雅美女,在与KOL及嘉宾交流互动的同时,还不时吟唱古文和诗歌,展现着中国传统文 ...

自从看了这篇文章，妈妈再也不用担心我的学习了！！

Vue部分小结

自从看了这篇文章，妈妈再也不用担心我的学习了！！相关推荐

最新文章

热门文章