Vue.js学习（一）_学习vue.js csdn-CSDN博客

本文链接：https://blog.csdn.net/Cairo960918/article/details/83651494

1.vue输出文本：通过{{...}}进行数据绑定改变data中的值从而进行改变

代码如下：

    <body>
        <div id="app">
            <!--输出文本-->
            <h1>{{url}}</h1>
        </div>
    </body>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
                url: 'www.baidu.com'
            }
        })
    </script>

结果如下：

可以见到我们通过修改data中的数据，网页中的数据也发生变化：

2.vue输出html代码：v-html

代码如下：

    <body>
        <div id="app">
            <!--使用v-html指令输出html代码-->
            <div v-html="msg"></div>
        </div>
    </body>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
                msg: '<h3>hello</h3>'
            }
        })
    </script>

结果如下：

3.vue绑定属性：v-bind，v-bind可以简写为‘：’

代码如下：

    <style>
    .class1{color:red;}
    </style>
    <body>
        <div id="app">
            <!--使用v-bind绑定属性-->
            <div v-bind:class="{'class1':class1}">world</div>
        </div>
    </body>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
                class1: true
            }
    </script>

结果如下：

可以见到我们把class1改为false，字体颜色也会发生改变：

4.vue的v-if和v-show：v-if是控制节点的渲染和显示，v-show只是样式display的切换：

代码如下：

   <body>
        <div id="app">
            <!--v-if-->
            <div v-if="flag1">see you</div>
            <!--v-show-->
            <div v-show="flag2">see you again</div>
        </div>
    </body>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
                flag1: false,
                flag2: false
            }
        })
    </script>

结果如下，可以见到v-if代码段在html中是没有的，而v-show代码段只是将display变为none：