初识vue小结

初识vue

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

我来咯，

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

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

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

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 -->