zoukankan      html  css  js  c++  java

  • vue框架 day2

    1.v-once指令

    2.v-cloak指令

    3.条件指令

    4.条件指令家族

    5.原义指令

    6.循环指令

    7.todolist案例

    8.实例成员-符号

    9.实例成员-计算属性

    10.实例成员-属性监听

    11.监听案例

    12.组件

    13.局部组件

    14.全局组件

    15.组件交互-父传子

    16.组件交互-子传父

    一.v-once指令

    v-once：单独使用，限制的标签内容一旦赋值，便不可被动更改(如果是输入框，可以主动修改)

    代码：

     1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="app">
 9         <!--v-once 单独使用，限制的标签内容一旦赋值，便不可更改-->
10         <input type="text" v-model="msg" >
11         <input type="text" v-model="msg" v-once>
12         <!--v-once 写过之后你删其他的不会影响这个input框里面的值，
13         但是你要删这个input框的值也是可以同步删掉其他框的值-->
14         <p>{{ msg }}</p>
15         <p v-once>{{ msg }}</p>
16     </div>
17 
18 </body>
19 <script src="vue/vue.js"></script>
20 <script>
21     new Vue({
22         el:'#app',
23         data:{
24             msg:'初始值'
25         }
26     })
27 </script>
28 </html>
    View Code

    二.v-cloak指令

    v-cloak：防止页面闪烁

    <!-- 不处理的情况下，每次新价值该页面，都会先渲染{{}}，当vue环境加载成功，{{}}有会被解析消失 -->
    <!-- 处理后，vue环境没加载好时，#app是被隐藏的，vue环境加载成功，会依次#app的v-cloak属性，就不会出现{{}}渲染闪烁问题 -->

    代码：

     1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         [v-cloak]{
 8             display:none;
 9         }
10     </style>
11 </head>
12 <body>
13     <div id="app" v-cloak>
14         {{ }}
15         {{ }}
16         {{ }}
17 
18     </div>
19 
20 </body>
21 <script src="vue/vue.js"></script>
22 <script>
23     new Vue({
24         el:'#app',
25     })
26 </script>
27 </html>
    View Code

    三.条件指令

     两种都可以控制标签的显隐，绑定的值是布尔类型值，当都隐藏标签时
         v-if是不渲染标签
         v-show以 display:none 方式渲染 隐藏起来了

    代码：

     1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <div id="app">
 9         <!-- 两种都可以控制标签的显隐，绑定的值是布尔类型值，当都隐藏标签时
10          v-if是不渲染标签
11          v-show以 display:none 方式渲染
12          -->
13         <p v-if="isShow">if条件指令</p>
14         <p v-show="isShow">show条件指令</p>
15     </div>
16 </body>
17 <script src="js/vue.js"></script>
18 <script>
19     new Vue({
20         el: '#app',
21         data: {
22             isShow: false,
23         }
24     })
25 </script>
26 </html>
    View Code

    四.条件指令家族

        <div id="app">
        <!--
        v-if='变量'
        v-else-if='变量'
        v-else
        一组分支，上面成立会屏蔽下方所有分支，
        else分支没有条件，再所有分支不成立后才显示
        -->
        <p v-if="0">ififif</p>
        <p v-else-if="1">elseif</p>
        <p v-else>else</p>

    </div>

    代码：

     1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .box{
 8             width: 400px;
 9             height: 300px;
10         }
11         .r{ background-color: red;}
12         .y{ background-color:yellow ;}
13         .b{ background-color: blue;}
14         .active{
15             background-color: pink;
16         }
17     </style>
18 </head>
19 <body>
20     <div id="app">
21         <!--
22         v-if='变量'
23         v-else-if='变量'
24         v-else
25         一组分支，上面成立会屏蔽下方所有分支，
26         else分支没有条件，再所有分支不成立后才显示
27         -->
28         <!--<p v-if="0">ififif</p>-->
29         <!--<p v-else-if="1">elseif</p>-->
30         <!--<p v-else>else</p>-->
31 
32         <div class="em">
33             <p>
34                 <!--绑定点击事件  你传的是什么就给什么,一定要给字符串
35                 如何点击谁按钮就显示谁的颜色 注意class要绑定一下-->
36                 <!--第一种方法-->
37                 <button @click="changeBox('rBox')" :class="{active:showName == 'rBox'}">红</button>
38                 <button @click="changeBox('yBox')" :class="{active:showName == 'yBox'}">蓝</button>
39                 <button @click="changeBox('bBox')" :class="{active:showName == 'bBox'}">黄</button>
40             </p>
41             <!--第二种方法-->
42               <p>
43                 <button @click="changeBox('rBox')" :class="showName == 'rBox' ? 'active': ''">红</button>
44                 <button @click="changeBox('yBox')" :class="showName == 'yBox' ? 'active': ''">蓝</button>
45                 <button @click="changeBox('bBox')" :class="showName == 'bBox'? 'active': ''">黄</button>
46             </p>
47             <!--v-if遇到下一个v-if会自动结束，他自己就是一个分支，如果没有v-if他会接着往下找-->
48             <div class="box r" v-if="showName == 'rBox'"></div>b
49             <div class="box y" v-else-if="showName == 'yBox'"></div>
50             <div class="box b" v-else=""></div>
51 
52         </div>
53     </div>
54 
55 </body>
56 <script src="vue/vue.js"></script>
57 <script>
58     new Vue({
59         el:'#app',
60         data:{
61             showName:'rBox',
62         },
63         methods:{ 
64             // 方法判定用methods
65             //因为点击不同的修改不同的值
66             changeBox(name){
67                 this.showName = name
68 
69             }
70         }
71     })
72 </script>
73 </html>
    View Code

    五.原义指令

    v-pre指令可以在vue控制范围内，形成局部vue不控制区域(局部不解析vue语法)
 v-pre 指令可以在vue控制范围内，形成局部vue不控制区域
{{ }} 和 v-if 都会原样输出，不会被解析

    代码：

     1 <div id="app">
 2     <p>{{ msg }}</p>
 3     <!-- v-pre 指令可以在vue控制范围内，形成局部vue不控制区域
 4     {{ }} 和 v-if 都会原样输出，不会被解析
 5     -->
 6     <p v-pre>
 7         {{ }}
 8         <span v-if="hehe"></span>
 9     </p>
10 </div>
11 <script src="js/vue.js"></script>
12 <script>
13     new Vue({
14         el: '#app',
15         data: {
16             msg: 'message'
17         }
18     })
19 </script>
    View Code

    六.循环指令

    1) 遍历字符串：可以只逐一遍历字符，也可以连同遍历索引
    <p v-for="ch in str"></p> | <p v-for="(ch, index) in str"></p>
    
2) 遍历数组：可以只逐一遍历成员元素，也可以连同遍历索引
    <p v-for="ele in arr"></p> | <p v-for="(ele, index) in arr"></p>
    
3) 遍历对象：可以只逐一遍历成员元素，也可以连同遍历成员键(key)，还可以遍历成员key索引
    <p v-for="v in dic"></p> | <p v-for="(v,k) in arr"></p> | <p v-for="(v,k,i) in arr"></p>

    代码：

     1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <!--v-for='元素' in 容器 -->
 9     <div id="app">
10         <p>{{ str }}</p>
11         <!--可以索引取值-->
12         <p>{{ str[0] }}</p>
13 
14         <div>
15             <!--可以for循环-->
16             <span v-for="ch in str">{{ ch }}</span>
17         </div>
18         <div>
19             <!--1.针对循环遍历的标签，通过会提供key属性来优化渲染速度
20                 2.但key的值必须唯一(key可以不用提供)
21                 3.如果多写一个参数就是把循环出来的值附上索引-->
22             <span v-for="(ch,i) in str" :key="ch + i">{{ i }}{{ ch }}</span>
23         </div>
24         <!--循环数组-->
25         <div>
26             <p v-for="(ele,i) in arr">{{ i }}{{ ele }}</p>
27         </div>
28         <!--循环字典，把里面的值遍历出来-->
29         <div>
30             <p v-for="ele in dic">{{ ele }}</p>
31         </div>
32         <!--多写一个参数，循环出来的是一个个键值对-->
33         <div>
34             <p v-for="(ele,k) in dic">{{ k }}:{{ ele }}</p>
35         </div>
36         <div>
37             <!--写三个参数，就会把键值对附上索引-->
38             <p v-for="(ele,k,i) in dic">{{ i }}{{ k }}:{{ ele }}</p>
39         </div>
40     </div>
41 
42 </body>
43 <script src="vue/vue.js"></script>
44 <script>
45     new Vue({
46         el:'#app',
47         data:{
48             str:'abc123呵呵',
49             arr:[3,4,5,1,2,6],
50             dic: {
51                 name:'Tank',
52                 age:20,
53                 gender:'哈哈',
54             }
55         }
56 
57     })
58 </script>
59 </html>
    View Code

    七.todolist案例（留言案例）

    1) 留言就是往留言数组中添加数据，删除留言就是从留言数组中移除数据

2) 前台数据库：localStorage 和 sessionStorage
    localStorage永久保存数据
    sessionStorage临时保存数据(当所属页面标签被关闭，数据被清空)
    
3) 前台localStorage 和 sessionStorage数据库存储的值是字符串类型，所以要存放arr、dic等复杂数据需要JSON参与
     1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!--需要点击那一个就删除那一个-->
 7     <style>
 8         li:hover{
 9             color: red;
10             cursor: pointer;
11         }
12     </style>
13 </head>
14 <body>
15     <div id="app">
16         <p>
17             <!--这里的内容就是留言的内容-->
18             <input type="text" v-model="userMsg">
19             <!--留言这需要有按钮-->
20             <button type="button" @click="sendMsg">留言</button>
21         </p>
22         <ul>
23             <!--先把留言渲染出来-->
24             <!--你点击那一个就删除那一个，首先li要有一个事件-->
25             <!--删除留言需要索引，点击谁就把谁的索引传过去-->
26             <li v-for="(msg,index) in msgs" @click="deleteMsg(index)">
27                 {{ msg }}
28             </li>
29         </ul>
30     </div>
31 
32 </body>
33 <script src="vue/vue.js"></script>
34 <script>
35     new Vue({
36         el: '#app',
37         data: {
38             //因为我们添加留言都是往前添加
39             //所以可以把第二条留言放前面
40             //现在需要每次先从数据库把所有留言都拿出来
41             //如果有值就解析拿值，没有就是空列表
42             msgs:localStorage.msgs ? JSON.parse(localStorage.msgs) : [],
43             //    用户的留言起初也是空的
44             userMsg: '',
45             // 绑定事件的关键字methods 给按钮绑定事件
46         },
47         methods: {
48             sendMsg() { //添加留言事件
49                 //     // 尾部添加留言
50                 //     this.msgs.push(this.userMsg)
51                 // 首增
52                 // this.msgs.unshift(this.userMsg)
53                 // 如果input框里面没有值就会增空，需要作一下判断，有内容才会添加
54                 let userMsg = this.userMsg;
55                 if (userMsg) {
56                     this.msgs.unshift(userMsg); // 渲染给页面
57                     // 还需要把值同步给数据库
58                     localStorage.msgs = JSON.stringify(this.msgs);
59                     // input框输入完就清空框里面的值
60                     this.userMsg = '';
61                 }
62             },
63             // 接收索引值
64             deleteMsg(index){
65             // 开始索引 操作长度 操作的结果
66             // 现在写的意思就是，从你点击的开始，操作长度是一个，结果为空就是删除
67                 this.msgs.splice(index,1)
68             }
69         }
70 
71     })
72 </script>
73 <script>
74     // 后端有数据库，前端也有数据库，一个是临时数据库，一个是永久数据库
75     // //永久存储
76     // localStorage['num'] = 10;
77     // //临时存储
78     // sessionStorage.num = 888;
79     // // 访问数据
80     // console.log(localStorage.num);
81 
82     // 存一个数组
83     // 但是取值出现了问题，因为把值存成了字符串
84     // 我们需要存进去是字符串，取出来转成数组，json可以办到
85     // localStorage.msgs = JSON.stringify(['111','2222']);
86     // // 取出来需要解析一下这个json的字符串
87     // console.log(JSON.parse(localStorage.msgs));
88     // console.log(JSON.parse(localStorage.msgs)[0]);
89 
90 </script>
91 </html>
    View Code

    八.实例成员-符号

    就是一个替换符，防止起冲突
     1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <div id="app">
 9         {{ msg }}
10         {[ msg ]}
11     </div>
12 </body>
13 <script src="js/vue.js"></script>
14 <script>
15     new Vue({
16         el: '#app',
17         data: {
18             msg: '12345'
19         },
20         // delimiters: ['{{', '}}'],
21         delimiters: ['{[', ']}'],
22     })
23 </script>
24 </html>
    View Code

    九.实例成员-计算属性

     1) computed是用来声明 方法属性 的
 2) 声明的方法属性不能在data中重复定义
 3) 方法属性必须在页面中渲染使用，才会对内部出现的所有变量进行监听
 4) 计算属性的值来源于监听方法的返回值

    代码：

     1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="app">
 9         <p @click="fn">{{ num }}</p>
10         <!--num一改变十位数和个位数就改变-->
11         <p>十位:{{ parseInt(num / 10) }}</p>
12         <p>个位:{{ num % 10 }}</p>
13 
14         <!--填一个 十位和个位，得到结果-->
15         <!-- 一个变量的值依赖多个变量，且依赖的任意一个变量发生改变，该变量都会改变 -->
16         <!--也可以给输入框的输入数据加以限制-->
17         十位:<input type="number" v-model="shi" min="0" max="9">
18         个位:<input type="number" v-model="ge" min="0" max="9">
19         结果:<b>{{ shi * 10 + + ge }}</b>
20         结果:<b>{{ result }}</b>
21     </div>
22 
23 </body>
24 <script src="vue/vue.js"></script>
25 <script>
26     new Vue({
27         el:'#app',
28         data:{
29             num:99,
30             shi:'',
31             ge:'',
32             // result:0
33         },
34         methods:{
35             fn(){
36                 this.num -=3;
37             }
38         },
39         // 因为result是一个新的变量，需要跟他们2个关联
40         //1.computed是用来声明 方法属性的
41         //2.声明的方法属性不能再data中重复定义
42         //3.方法属性必须在页面中渲染使用，才会对内部出现的所有变量进行监听
43         computed:{
44             result(){
45                 // console.log('该方法被调用了');
46                 // this.shi;
47                 // this.ge;
48                 return this.shi * 10 + +this.ge
49             }
50         }
51     })
52 </script>
53 </html>
    View Code

    十.实例成员-属性监听

    // 1) watch为data中已存在的属性设置监听事件
// 2) 监听的属性值发送改变，就会触发监听事件
// 3) 监听事件的方法返回值没有任何意义
    多个变量对一个变量进行监听用 watch
    计算属性 用 computed

    代码：

     1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="app">
 9          <!-- 多个变量的值依赖一个变量，该变量发生改变，所有依赖变量都会改变 -->
10         <p @click="fn">{{ num }}</p>
11         <p>十位: {{ shi }}</p>
12         <p>个位: {{ ge }}</p>
13     </div>
14 
15 </body>
16 <script src="vue/vue.js"></script>
17 <script>
18     new Vue({
19         el:'#app',
20         data:{
21             num:99,
22             shi:0,
23             ge:0,
24         },
25         // 绑定点击事件
26         methods:{
27             fn(){
28                 this.num -=3;
29             }
30         },
31         //1.watch为data中已经存在的属性设置监听事件
32         //2.监听的属性值发生改变，就会触发监听事件
33         //3.监听事件的方法返回值是没有任何意义的
34         watch: {
35             num(){
36                 //console.log('num改变了')
37                 this.shi = parseInt(this.num / 10);
38                 this.ge = this.num % 10;
39                 // return '123'
40             }
41         }
42     })
43 </script>
44 </html>
    View Code

    十一.监听案例

    代码：

     1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <div id="app">
 9         姓：<input type="text" v-model="fName">
10         名：<input type="text" v-model="lName">
11         姓名：<b>{{ flName }}</b>
12 
13         <hr>
14         <!--这个是多个变量依赖于一个变量，所以对fullName进行监听-->
15         姓名：<input type="text" v-model="fullName">
16         姓：<b>{{ firstName }}</b>
17         名：<b>{{ lastName }}</b>
18 
19     </div>
20 </body>
21 <script src="js/vue.js"></script>
22 <script>
23     new Vue({
24         el: '#app',
25         data: {
26             fName: '',
27             lName: '',
28             fullName: '',
29             firstName: '',
30             lastName: '',
31         },
32         // 计算属性
33         computed: {
34             flName(){
35                 return this.fName + this.lName;
36             }
37         },
38         // 多个变量对一个变量进行监听用watch
39         watch: {
40             fullName() {
41                 nameArr = this.fullName.split('');
42                 this.firstName = nameArr[0];
43                 this.lastName = nameArr[1];
44             }
45         }
46     })
47 </script>
48 </html>
    View Code

    十二.组件

    1.组件：一个包含html，css，js独立的集合体，这样的集合体可以完成页面结构的代码复用
2.分组分为根组件，全局组件与局部组件
    根组件：所有被new Vue（）产生的组件，在项目开发阶段，一个项目只会出现一个根组件，因为根组件与根组件之间信息是不通的
    全局组件：不用注册，就可以成为任何一个组件的子组件
    局部组件：必须注册，才可以成为注册该局部组件的子组件
3.每一个组件都有自身的html结构，css样式，js逻辑。每一个组件其实都有自己的template，就是用来标识自己html结构的template模块中有且只有一个根标签。
注意：跟组件一般不提供template，就由挂载点的真实DOM提供html结构

    代码：

     1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <div id="app">
 9         <p>{{ msg }}</p>
10     </div>
11 
12     <div id="main">
13 
14     </div>
15 </body>
16 <script src="js/vue.js"></script>
17 <script>
18     // 1) 组件：一个包含html、css、js独立的集合体，这样的集合体可以完成页面解构的代码复用
19     // 2) 分组分为根组件、全局组件与局部组件
20     //      根组件：所有被new Vue()产生的组件，在项目开发阶段，一个项目只会出现一个根组件
21     //      全局组件：不用注册，就可以成为任何一个组件的子组件
22     //      局部组件：必须注册，才可以成为注册该局部组件的子组件
23     // 3) 每一个组件都有自身的html结构，css样式，js逻辑
24     //      每一个组件其实都有自己的template，就是用来标识自己html结构的
25     //      template模板中有且只有一个根标签
26     //      根组件一般不提供template，就由挂载点的真实DOM提供html结构
27     new Vue({
28         el: '#app',
29         data: {
30             msg: 'message',
31             c1: 'red'
32         },
33         template: `
34         <div :style="{color: c1}" @click="fn">{{ msg }} {{ msg }}</div>
35         `,
36         methods: {
37             fn() {
38                 alert(this.msg)
39             }
40         }
41     });
42     new Vue({
43         el: '#main',
44         data: {
45             msg: 'message'
46         }
47     })
48 </script>
49 </html>
    View Code

    十三.局部组件

    // 1) 创建局部组件
// 2) 在父组件中注册该局部组件
// 3) 在父组件的template模板中渲染该局部组件

    代码：

     1 <style>
 2     .box {
 3         box-shadow: 0 3px 5px 0 #666;
 4         width: 240px;
 5         height: 300px;
 6         text-align: center;
 7         padding: 20px 0;
 8         float: left;
 9         margin: 5px;
10     }
11     .box img {
12         width: 200px;
13     }
14 </style>
15 <div id="app">
16     <!--<mcc></mcc>-->
17     <local-tag></local-tag>
18     <local-tag></local-tag>
19 </div>
20 <script src="js/vue.js"></script>
21 <script>
22     let localTag = {
23         template: `
24         <div class="box">
25             <img src="img/666.jpg" alt="">
26             <h3>凤哥</h3>
27             <p>马叉虫❤马叉虫</p>
28         </div>
29         `
30     };
31 
32     new Vue({
33         el: '#app',
34         components: {
35             // mcc: localTag,
36             // localTag,
37             'local-tag': localTag,
38         }
39     })
40 </script>
    View Code

    十四.全局组件

    // 1) 创建全局组件
// 2) 在父组件的template模板中直接渲染该全局组件

    代码：

     1 <style>
 2     .box {
 3         box-shadow: 0 3px 5px 0 #666;
 4         width: 240px;
 5         height: 300px;
 6         text-align: center;
 7         padding: 20px 0;
 8         float: left;
 9         margin: 5px;
10     }
11     .box img {
12         width: 200px;
13     }
14 </style>
15 <div id="app">
16     <global-tag></global-tag>
17     <global-tag></global-tag>
18     <global-tag></global-tag>
19 </div>
20 <script src="js/vue.js"></script>
21 <script>
22     Vue.component('global-tag', {
23         template: `
24         <div class="box" @click="action">
25             <img src="img/666.jpg" alt="">
26             <h3>凤哥</h3>
27             <p>马叉虫❤{{ num }}</p>
28         </div>
29         `,
30         data () {
31             return {
32                 num: 0
33             }
34         },
35         methods: {
36             action() {
37                 this.num++;
38             }
39         }
40     });
41 
42     // 数据局部化分析导入
43     // a = function () {
44     //     return {num: 10}
45     // };
46     // b1 = a();
47     // b2 = a();
48     // b3 = a();
49     // 这样处理b1，b2，b3的数据就彼此独立的，但是都来源于a
50 
51     new Vue({
52         el: '#app',
53     })
54 </script>
    View Code

    十五.组件交互-父传子

    // 数据交互 - 父传子 - 通过绑定属性的方式
// 1) 父组件提供数据
// 2) 在父组件模板中，为子组件标签设置自定义属性，绑定的值由父组件提供
// 3) 在子组件实例中，通过props实例成员获得自定义属性

    代码：

     1 <style>
 2     .info {
 3         text-align: center;
 4         width: 200px;
 5         padding: 3px;
 6         box-shadow: 0 3px 5px 0 pink;
 7         float: left;
 8         margin: 5px;
 9     }
10     .info img {
11         width: 200px;
12     }
13 </style>
14 <div id="app">
15     <!-- 2) 在父组件模板中，为子组件标签设置自定义属性，绑定的值由父组件提供 -->
16     <info v-for="info in infos" :key="info.image" :myinfo="info"></info>
17 </div>
18 <script src="js/vue.js"></script>
19 <script>
20     // 伪代码：模拟数据从后台请求
21     /*
22     let infos = '';
23     document.onload = function () {
24         $.ajax({
25             url: '/images/',
26             type: 'get',
27             success (response) {
28                 infos = response.data
29             }
30         })
31     };
32      */
33 
34     let infos = [
35         {
36             image: 'img/001.png',
37             title: '小猫'
38         },
39         {
40             image: 'img/002.png',
41             title: '蛋糕'
42         },
43         {
44             image: 'img/003.png',
45             title: '蓝糕'
46         },
47         {
48             image: 'img/004.png',
49             title: '恶犬'
50         },
51     ];
52 
53     let info = {
54         template: `
55         <div class="info">
56             <img :src="myinfo.image" alt="">
57             <p><b>{{ myinfo.title }}</b></p>
58         </div>
59         `,
60         // 3) 在子组件实例中，通过props实例成员获得自定义属性
61         props: ['myinfo']
62     };
63 
64     new Vue({
65         el: '#app',
66         components: {
67             info,
68         },
69         data: {
70             infos,  // 1) 父组件提供数据
71         }
72     })
73 </script>
    View Code

    十六.组件交互-子传父

    // 组件交互-子传父
// 1) 数据由子组件提供
// 2) 子组件内部通过触发系统事件，发送一个自定义事件，将数据携带出来
// 3) 父组件位子组件标签的自定义属性通过方法实现，就可以通过参数拿到子组件传递处理的参数

    代码：

     1 <style>
 2     .close:hover {
 3         cursor: pointer;
 4         color: red;
 5     }
 6 </style>
 7 <div id="app">
 8     <p>
 9         <input type="text" v-model="userMsg">
10         <button @click="sendMsg">留言</button>
11     </p>
12     <ul>
13         <!-- 2) 子组件内部通过触发系统事件，发送一个自定义事件，将数据携带出来 -->
14         <msg-li @remove_msg="removeAction" v-for="(msg, i) in msgs" :msg="msg" :index="i" :key="msg"></msg-li>
15     </ul>
16 </div>
17 <script src="js/vue.js"></script>
18 <script>
19     let msgLi = {
20         template: `
21         <li>
22             <span class="close" @click="deleteMsg(index)">x </span>
23             <span>第{{ index + 1 }}条：</span>
24             <span>{{ msg }}</span>
25         </li>
26         `,
27         props: ['msg', 'index'],
28         methods: {
29             // 系统的click事件
30             deleteMsg(i) {
31                 // 1) 数据由子组件提供
32                 // $emit('自定义事件名', 参数们)
33                 this.$emit('remove_msg', i);
34             }
35         }
36     };
37     new Vue({
38         el: '#app',
39         data: {
40             msgs: [],
41             userMsg: ''
42         },
43         methods: {
44             sendMsg() {
45                 if (this.userMsg) {
46                     this.msgs.push(this.userMsg);
47                     this.userMsg = "";
48                 }
49             },
50             // 3) 父组件位子组件标签的自定义属性通过方法实现，就可以通过参数拿到子组件传递处理的参数
51             removeAction(i) {
52                 this.msgs.splice(i, 1)
53             }
54         },
55         components: {
56             msgLi
57         }
58     })
59 </script>
    View Code
  • 相关阅读:
    牛逼的博客地址
    动画的keyPath
    跳转到系统设置的各种配置
    UITextField只允许输入正数
    冒泡排序
    number类型的数组
    正则表达式
    C中常用的数学函数
    利用运行时，查看一个类的所有子类
    玉蟾宫(悬线法)
  • 原文地址：https://www.cnblogs.com/zahngyu/p/11645210.html
Copyright © 2011-2022 走看看