top2_vue下web全栈进阶

最新推荐文章于 2024-08-07 21:58:12 发布

关于安安

最新推荐文章于 2024-08-07 21:58:12 发布

阅读量171

点赞数

分类专栏：进阶修习文章标签： web javascript vue 全栈进阶

本文链接：https://blog.csdn.net/yangluan999/article/details/81667528

版权

进阶修习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

#Vue_02（下）
    vue的数据（data）改变影响页面
    页面的value改变影响vue

    template `` --> 多行字符串 --> 入口发散性的填充各种各样模版内容
    eg：入口 --- 模版A
             --- 模版B
             --- 模版C
     组件：组合起来的部件  凑成了页面
     包含组件的就是爹 --  父组件
     被包含的就是儿子 --  子组件
     父组件使用子组件

     data -- 数据
     methods -- 方法

     注册根节点  <div id='app'></div>
     引入vue.js
     实例化Vue   new Vue({});
     new Vue({
        el:'#app',//挂载到根目录
        template:`<my-hello :title='info'></my-hello>`，//模版 :title绑定属性值为data中的info进行传递
        components:{//组件们
            'my-hello':myHello//绑定组件myHello组件
        },
        data:function(){//vue实例组件的数据
            return {
                info:'关于安安'
            }
        }
     })
     let myHello = {//声明一个子组件叫myHello
        props:['info'],//props用于接收父组件通过属性传递来的info参数
        template:`<div @click='showNum(入参)'>{{message}}<br>{{info}}</div>`,//模版 @click绑定一个点击方法 message子元素data info父元素data
        data:function(){//数据集合
            return {
                message:'hello AnAn'
            }
        },
        methods:{//方法集合
            showNum:function(接收参数){//写一个方法弹出接收到的参数
                alert(使用参数)
            }
        }
     }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>


<div id="app"></div>

<script src="../vue.js/vue.js"></script>
<script>

    let myHi = {
        props:['title'],
        template:`<div>
<input type="text" v-model="message" v-show="isShow" @click="showIpt()">
<h1 @click="showIpt()">{{message}}</h1><hr><h2 @click="showFa">{{text}}</h2>
</div>`,
        data:function () {
            return {
                message:'双向数据流',
                text:'点击弹出父组件传递的值',
                isShow:true
            }
        },
        methods:{
            showIpt:function () {
                this.isShow = !this.isShow
            },
            showFa:function () {
                alert(this.title)
            }
        }
    };
    let myHello = {
        template:`<my-hi :title="faData"></my-hi>`,
        components:{
            'my-hi':myHi
        },
        data:function () {
            return {
                faData:'from fathers good'
            }
        }
    };
    new Vue({
        el:'#app',
        template:`<my-hello/>`,
        components:{
            'my-hello':myHello
        }
    })
</script>


</body>
</html>

关于安安

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
top2_vue下web全栈进阶

#Vue_02（下） vue的数据（data）改变影响页面页面的value改变影响vue template `` --&gt; 多行字符串 --&gt; 入口发散性的填充各种各样模版内容 eg：入口 --- 模版A --- 模版B --- 模版C 组件：组合起来的部件凑成了页面包含组...
复制链接

扫一扫

专栏目录