Vue02

7. 循环遍历
8. v-model的使用
9. 组件化开发
10. 组件通信
11. 插槽

7. 循环遍历

v-for遍历数组

<div id="app"><!--1.在遍历的过程中，没有使用索引值(下标值)--><ul><li v-for="item in names ">{{item}}</li></ul><!--2.在遍历的过程中，获取索引值--><ul><li v-for="(item,index) in names">{{index+1}}.{{item}}</li></ul>
</div><script>const app = new Vue({el: '#app',data: {names: ['a','b','c']}})
</script>

v-for遍历对象

<div id="app"><!--1.在遍历对象的过程中，如果只是获取到一个值，那么获取到的时value--><ul><li v-for="item in info">{{item}}</li></ul><!--2.获取key和value--><ul><li v-for="(value,key) in info">{{value}}---{{key}}</li></ul><!--3.获取key和value和index格式：(value,key,index)--><ul><li v-for="(value,key,index) in info">{{value}}--{{key}}--{{index}}</li></ul>
</div>
<!--
why
18
1.88why---name
18---age
1.88---heightwhy--name--0
18--age--1
1.88--height--2
-->
<script src="../js/vue.min.js"></script>
<script>const app = new Vue({el: '#app',data: {info: {name: 'why',age: 18,height: 1.88}}})
</script>

响应式方法

<div id="app"><ul><li v-for="item in letters" :key="item">{{item}}</li></ul><button @click="btnClick">按钮</button>
</div><script src="../js/vue.min.js"></script>
<script>const app = new Vue({el: '#app',data: {letters: ['a','b','c','d']},methods: {btnClick(){//响应式:  //1.push方法//this.letters.push('f')//2.pop():删除数组中最后一个元素//this.letters.pop()//3.shift():删除数组中的第一个元素//this.letters.shift()//4.unshift():在数组最前面添加元素//this.letters.unshift('aaa','bbb')//5.splice():删除元素/插入元素/替换元素//删除元素:第二个参数传入你要删除几个元素(如果没有传，就删除后面所有元素)//插入元素:第二个参数设置为0，并且后面跟上要插入的元素//替换元素：第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素//this.letters.splice(1,2,'m','n')//6.sort():排序//this.letters.sort()//7.reverse():反转//this.letters.reverse()//非响应式://通过我们的索引值修改数组中的元素(不是响应式的)//this.letters[0] = 'bb'    (X)//this.letters.splice(0,1,'bb')//Vue.set(要修改的对象,索引值,修改后的值)//Vue.set(this.letters,0,'bb')function sum (...num) {console.log(num)}sum(1,2,3,4,5,6)}}})
</script>

8. v-model的使用

v-model的使用与原理

<div id="app">
<!--  <input type="text" v-model="message">--><input type="text" :value="message" @input="valueChange">
<!--  <input type="text" :value="message" @input="message=$event.target.value">--><h2>{{message}}</h2>
</div><script>const app = new Vue({el: '#app',data: {message: '你好啊'},methods: {valueChange(event){this.message = event.target.value;}}})
</script>

v-model结合radio

<div id="app"><label for="male"><input type="radio" id="male" value="男" v-model="sex">男</label><label for="female"><input type="radio" id="female" value="女" v-model="sex">女</label><h2>您选择的性别是:{{sex}}</h2>
</div><script>const app = new Vue({el: '#app',data: {message: '你好啊',sex: '男'}})
</script>

v-model结合checkbox使用

<div id="app"><!--1.checkbox单选框--><label for="agree"><input type="checkbox" id="agree" v-model="isAgree">同意协议</label><h2>您选择的是:{{isAgree}}</h2><button :disable="!isAgree">下一步</button><br><!--2.checkbox多选框--><input type="checkbox" value="篮球" v-model="hobbies">篮球<input type="checkbox" value="足球" v-model="hobbies">足球<input type="checkbox" value="排球" v-model="hobbies">排球<h2>您的爱好是:{{hobbies}}</h2><label v-for="item in originHobbies" :for="item"><input type="checkbox" :value="item" :id="item">{{item}}</label>
</div><script src="../js/vue.min.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',isAgree: false,//单选框hobbies: [],    //多选框originHobbies: ['篮球','足球','排球']}})
</script>

v-model结合select使用

<div id="app"><!--1.选择一个--><select name="city" v-model="city"><option value="上海">上海</option><option value="北京">北京</option><option value="郑州">郑州</option></select><h2>您选中的城市是:{{city}}</h2><!--2.选择多个--><select name="citys" v-model="citys" multiple><option value="上海">上海</option><option value="北京">北京</option><option value="郑州">郑州</option></select>
</div><script>const app = new Vue({el: '#app',data: {message: '你好啊',city: '上海',citys: []}})
</script>

v-model的修饰符的使用

<div id="app"><!--1.修饰符：lazy(只有输入完成后才会更新)--><input type="text" v-model.lazy="message">{{message}}><!--2.修饰符: number v-model默认是String类型(将string类型改为number类型)--><input type="number" v-model.number="age"><h2>{{typeof age}}</h2><!--3.修饰符：trim(去除首尾的空格)--><input type="text" v-model.trim="name"><h2>您输入的名字：{{name}}</h2>
</div><script>const app = new Vue({el: '#app',data: {message: '你好啊',age: 0,name: ''}})
</script>

9. 组件化开发

组件化的基本使用

创建组件构造器对象
注册组件
使用组件

<div id="app"><!--3.使用组件--><my-cpn></my-cpn>
</div><script>//1.创建组件构造器对象const cpnC = Vue.extend({template: `<div><h2>标题</h2><p>内容1</p><p>内容2</p></div>`})//2.注册组件Vue.component('my-cpn',cpnC)const app = new Vue({el: '#app',data: {message: '你好啊'}})
</script>

全局组件和局部组件

全局组件：多个Vue实例都可以使用
局部组件：只有单个Vue实例可以使用

<div id="app"><cpn></cpn>
</div><div id="app2"><cpn></cpn><!-- 没有作用 -->
</div><script src="../js/vue.min.js"></script>
<script>//1.创建组件构造器const cpnC = Vue.extend({template: `<div><h2>标题</h2><p>内容1</p><p>内容2</p></div>`})//2.注册组件(全局组件，意味着可以在多个Vue实例下使用)//Vue.component('cpn',cpnC)const app = new Vue({el: '#app',data: {message: '你好啊'},components: {cpn: cpnC //注册局部组件}})const app2 = new Vue({el: '#app2',data: {message: '你好啊'}})
</script>

父组件和子组件

<div id="app"><cpn2></cpn2>
</div>
<!--
标题（2）
内容（2）标题（1）
内容（1）
-->
<script>//1.创建第一个组件构造器(子组件)const cpnC1 = Vue.extend({template: `<div><h2>标题（1）</h2><p>内容（1）</p></div>`})//2.创建第二组件构造器(父组件)const cpnC2 = Vue.extend({template: `<div><h2>标题（2）</h2><p>内容（2）</p><cpn1></cpn1></div>`,components: {cpn1: cpnC1}})//root组件const app = new Vue({el: '#app',data: {message: '你好啊'},components: {cpn2:cpnC2}})
</script>

组件的语法糖注册方式

<script>//全局组件语法糖//1.创建组件构造器//const cpn1 = Vue.extend()//2.注册组件Vue.component('cpn1',{template: `<div><h2>标题（1）</h2><p>内容（1）</p></div>`})const app = new Vue({el: '#app',data: {message: '你好啊'},components: {'cpn2': {template: `<div><h2>标题（2）</h2><p>内容（2）</p></div>`}}})
</script>

组件模板的分离写法

<div id="app"><cpn></cpn><cpn2></cpn2>
</div><!--1.script标签，注意：类型必须是text/x-template-->
<script type="text/x-template" id="cpn"><div><h2>标题</h2><p>内容</p></div>
</script><!--2.template标签-->
<template id="cpn2"><div><h2>标题</h2><p>内容</p></div>
</template><script src="../js/vue.min.js"></script>
<script>//1.注册一个全局组件Vue.component('cpn',{template: '#cpn'})Vue.component('cpn2',{template: '#cpn2'})const app = new Vue({el: '#app',data: {message: '你好啊'}})
</script>

组件中的数据存放

<div id="app"><cpn></cpn>
</div><template id="cpnTemplate"><div><h2>{{title}}</h2><p>{{content}}</p></div>
</template><script src="../js/vue.min.js"></script>
<script>Vue.component('cpn',{template: '#cpnTemplate',data(){//组件中的data是函数//是函数的原因是因为不想让多个实例引用这个组件导致其中一个改变使得其他的数据也改变return {title: '标题',content: '内容'}}})const app = new Vue({el: '#app',data: {message: '你好啊'}})
</script>

10. 组件通信

父传子【props】

<div id="app"><cpn :cmovies="movies" :cmessage="message"></cpn>
</div><template id="cpnTemplate"><div><ul><li v-for="item in cmovies">{{item}}</li></ul>{{cmessage}}</div>
</template><script src="../js/vue.min.js"></script>
<script>// <!--父传子-->const cpn = {template: '#cpnTemplate',//props: ['cmovies','cmessage'],props: {//1.类型限制：(支持的类型：String Number Boolean Array Object Date Function Symbol)//cmovies: Array,//cmessage:String//2.提供一些默认值cmessage: {type: String,default: 'test',required: true},cmovies: {type: Array,default() {return []}}},data(){return {}}}const app = new Vue({el: '#app',data: {message: '你好啊',movies: ['火影忍者','海贼王','奥特曼']},components:{'cpn':cpn}})
</script>

父传子【驼峰问题】

<div id="app"><!--驼峰不能写，要改为'-'   --><cpn :c-info="info"></cpn>
</div><template id="cpn"><div><ul><li v-for="item in cInfo">{{item}}</li></ul></div>
</template><script src="../js/vue.min.js"></script>
<script>const cpn = {template: '#cpn',props: {cInfo: {type:Object,default(){return {}}}}}const app = new Vue({el: '#app',data: {message: '你好啊',info: {name: 'go',age: 18,height: 1.71}},components: {'cpn':cpn}})
</script>

子传父【自定义事件】

<!--父组件模板-->
<div id="app"><cpn @itemclick="cpnClick"></cpn>
</div><!--子组件模板-->
<template id="cpn"><div><button v-for="item in categories"@click="btnClick(item)">{{item.name}}</button></div>
</template><script src="../js/vue.min.js"></script>
<script>//子组件const cpn = {template: '#cpn',data(){return {categories: [{id:'a',name:'热门推荐'},{id:'b',name:'手机数码'},{id:'c',name:'家用家电'},]}},methods: {btnClick(item){//发射事件this.$emit('itemclick',item)}}}//父组件const app = new Vue({el: '#app',data: {message: '你好啊'},components: {cpn},methods: {cpnClick(item){console.log(item)}}})
</script>

父访问子

<div id="app"><cpn></cpn><cpn></cpn><cpn ref="c"></cpn><button @click="btnClick">按钮</button>
</div><template id="cpn"><div>我是组件！</div>
</template><script src="../js/vue.min.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊'},components: {cpn: {template: '#cpn',data(){return {name: '我是子组件的name'}},methods: {showMessage(){console.log('showMessage')}}}},methods: {btnClick(){//1.$childrenconsole.log(this.$children)for (let c of this.$children){console.log(c.name)c.showMessage()}//2.$refs => 对象类型，默认是一个空对象，要加上refconsole.log(this.$refs.c.name)}}})
</script>

子访问父

<div id="app"><cpn></cpn>
</div><template id="cpn"><div><h2>我是cpn组件</h2><ccpn></ccpn></div>
</template><template id="ccpn"><div><h2>我是子组件</h2><button @click="btnClick">按钮</button></div>
</template><script src="../js/vue.min.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊'},components: {cpn: {template: '#cpn',data(){return {name: '我是cpn组件的name'}},components: {ccpn: {template: '#ccpn',methods: {btnClick(){//1.访问父组件$parentconsole.log(this.$parent)console.log(this.$parent.name)//2.访问根组件$rootconsole.log(this.$root)console.log(this.$root.message)}}}}}},})
</script>

11. 插槽

插槽的基本使用

插槽用来预留空间的

<div id="app"><cpn><button>按钮</button></cpn><cpn><span>哈哈</span></cpn><cpn></cpn>
</div><template id="cpn"><div><h2>我是组件</h2><p>我是组件内容</p><!--插槽用来预留空间--><slot><button>按钮</button></slot></div>
</template><script src="../js/vue.min.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊'},components: {cpn: {template: '#cpn'}}})
</script>

具名插槽

具名插槽给插槽取名，然后可以指定改变哪个插槽内容

<div id="app"><cpn><span slot="center">标题</span></cpn>
</div><template id="cpn"><div><slot name="left"><span>左边</span></slot><slot name="center"><span>中间</span></slot><slot name="right"><span>右边</span></slot></div>
</template><script src="../js/vue.min.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊'},components: {cpn: {template: '#cpn'}}})
</script>

作用域插槽

<div id="app"><cpn><!--获取到子组件中的planguages。slot名字是我们自己起的，可以用其他的--><template slot-scope="slot"><span>{{slot.data.join(' - ')}}</span></template></cpn>
</div><template id="cpn"><div><!-- data名字是我们自己起的，也可以起其他名字 --><slot :data="planguages"><ul><li v-for="item in planguages">{{item}}</li></ul></slot></div>
</template><script src="../js/vue.min.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊'},components: {cpn: {template: '#cpn',data(){return {planguages: ['java','python','c','c++']}}}}})
</script>

Vue学习之旅-02相关推荐

阿菜的Vue学习之旅（一）
阿菜的Vue学习之旅(一) 1.Vue的初步使用 2.关于MVVM架构的Vue设计 1.Vue的初步使用刚刚开始接触Vue的时候,阿菜是这样写 html部分: <div id="me ...
vue学习之路.02
2019独角兽企业重金招聘Python工程师标准>>> 第一个vue项目 1.创建 vue init webpack app01 2.安装依赖 ...
Vue学习之旅Part1：Vue的数据渲染语法和指令(插值表达式、v-cloak、v-text、v-html)
在Vue里有好几种数据渲染的方法及相关指令下面将一一介绍: 一.插值表达式插值表达式是用两个花括号{{}}包裹属性属性在Vue实例里定义: 通过Vue提供的指令即可很方便地将数据渲染到页面上 ...
Vue学习之旅-01
Vue01 1. 初体验 2. 插值操作 3. 动态绑定属性 4. 计算属性 5. 事件监听 6. 条件判断 1. 初体验初体验 <!DOCTYPE html> <html lan ...
Vue3学习之旅--Vue3高级语法补充-自定义指令，vue插件，Teleport......
文章目录 Vue3高级语法补充自定义指令认识自定义指令实现方式一:默认实现实现方式二:局部自定义指令方式三:自定义全局指令指令的生命周期指令的参数和修饰符自定义指令练习时间格式化指令 ...
VUE学习：vue基础20————动画02：动画
提示: VUE学习:vue基础20----动画01:过渡 VUE学习:vue基础20----动画02:动画前言动画动画使用动画完成过渡效果第三方动画库的使用使用第三方库: 钩子函数前言 ...
Vue学习笔记02——Vue路由
Vue学习笔记01--Vue开发基础一.初识路由 1.路由的作用 Vue的路由是前端路由,可以让组件之间互相切换. 2.vue-router.js文件 Vue的路由使用需要引入vue-router. ...
HALCON学习之旅(七)
HALCON学习之旅(七) 文章目录 HALCON学习之旅(七) 1.MFC与Halcon混合编程 2.C#与Halcon混合编程 3.Halcon测量助手使用 4.Halcon实例进阶一(拟合区域椭 ...
乐鑫Esp32学习之旅② 巧用eclipes编辑器，官方教程在Windows下搭建esp32开发环境，打印 “Hello World”。
本系列博客学习由非官方人员半颗心脏潜心所力所写,仅仅做个人技术交流分享,不做任何商业用途.如有不对之处,请留言,本人及时更改. 1. 爬坑学习新旅程,虚拟机搭建esp32开发环境,打印 " ...

Vue学习之旅-02

Vue02

7. 循环遍历

8. v-model的使用

9. 组件化开发

10. 组件通信

11. 插槽

Vue学习之旅-02相关推荐

最新文章

热门文章