初识vue小结

初识vue

大家都那么热爱他一定有原因,我也特想了解。

我来咯,

 

首先用vue开发版,用一个标签在head中插入,script标签src属性引入vue文件,就像jquey一样在script,但是放在head里最好

今天了解挂载点,模板,实例

例如:<div id="root">{{msg}}</div>//可以写在这

             <script>

          new Vue({

                   el:"#root",

                    template:‘<h1>hello {{msg}}</h1>’也可以写在这

                   data:{

                         msg: "hello world";

             }

          })

          </script>

挂载点就是vue实例里el属性对应的id,所对应的dom节点

在挂载点里的内容就是模板,模板可以写在挂载点里面,也可以写在实例里template属性里面

实例中里面指定挂载点,然后写上模板,Vue结合模板和数据,生成最终要展示的内容,然后把内容放在挂载点中。

Element 元素,Data数据,root根,Template 模板

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Vue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="index.css" />
    <script src="./vue.js"></script><!-- 引入在head避免出现抖屏 -->
</head>

<body>
    <!-- 挂载点,模板,实例 -->
    <div id="root">
        <h1>你好{{aaa}}</h1><!-- 挂载点里面的内容就是模板内容,模板内容也可以写在实例里面template属性里面 -->
    </div><!-- 挂载点 -->
    <!-- 数据事件和方法-->
    <div id="thing" @click="handleClick">
        {{content}}
        <!-- v-text会进行转义,就是输出<h1>哈哈哈哈哈哈哈哈</h1>, -->
        <!-- 差值表达式 -->
    </div>
    <!--属性绑定和双向绑定-->
    <div id="roots">
        <div :title="title">你好自己</div>
        <input type="text" v-model="content" />
        <div>{{content}}</div>
    </div>
    <!--计算和监听-->
    <div id="jstitle">
        姓:<input v-model="firstName" />
        名:<input v-model="lastName" />
        <div>{{fullName}}//{{cont}}</div>
    </div>
    <!-- v-if/v-show/v-for -->
    <div id="ifshow">
        <div v-show="show">隐身术</div>
        <button @click="handleClick">显示/隐藏</button>
        <ul>
            <li v-for="(item, index) of list" :key="index">{{item}}</li>
        </ul>
    </div>
    <script>
        //   挂载点,模板,实例
        new Vue({// 实例
            el: "#root",//实里面定义挂载点
            template: '<h1>你好你好你好</h1>',//定义模板
            data: {
                aaa: "hello world"//如果没有在实例里面定义模板,data下的内容会自动在加载到挂载点上。
            }
        });
        //数据事件和方法
        new Vue({
            el: "#thing",
            data: {
                number: 1233,
                content: "哈哈哈哈哈哈哈哈",
            },
            methods: {
                handleClick: function () {
                    this.content = "ojbk"
                }
            }
        });
        //属性绑定和双向绑定
        new Vue({
            el: "#roots",
            data: {
                title: "this is title",
                content: "this is content"
            }

        });
        //计算和监听
        new Vue({
            el: "#jstitle",
            data: {
                firstName: "",
                lastName: "",
                cont: 0
            },
            computed: {// 计算
                fullName: function () {
                    return this.firstName + '' + this.lastName
                }
            },
            watch: {//监听
                fullName: function () {
                    this.cont++
                }

            }

        });
        //v-if v-show v-for
        new Vue({
            el: "#ifshow",
            data: {
                show: false,
                list: [1,2,3]
            },
            methods: {
                handleClick: function () {
                    this.show = !this.show
                }
            }
        })



    </script>

</body>

</html>

<!-- v-html -->
<!-- v-text -->
<!-- v-on:click  绑定点击事件,在实例例定义methods, -->
<!-- v-on:可以简写为@ -->
<!-- v-bind:title单向的数据绑定-->
<!-- v-bind:title可以缩写为: -->
<!-- v-model:title双向的数据绑定 -->

<!-- v-if 和v-show区别 如果只做一次显示隐藏用v-if,v-show不重节点树上面删除,反复用的话用v-show -->

 

转载于:https://www.cnblogs.com/cqy1125/p/9625071.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值