VUE基本用法

Vue的基本语法

插值：{{值}} 原样输出，不会解析HTML等代码

v-once 执行一次性绑定

v-html 解析HTML等代码

{{}} 可以绑定表达式 直接计算出来结果

<div id="app">
        {{message}}
        <p>{{message}}</p>
        <p>{{(1+21+5)*200}}</p>
        <p v-html="message"></p>
        <p v-bind:title="message">v-bind</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message:"<b>你好，大美女</b>"
            }
        })
    </script>

bind和model

v-model ： 双向绑定，不需要指定属性名 vm=>value | value=>vm

v-bind ： 单向绑定，必须指定属性名 vm=>属性 支持缩写( : )

 <div id="app">
        <input type="text" v-model="val" name="" id="">
        <input type="text" v-bind:value="val" name="" id="">
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
               val:"文本框"
            }
        })
    </script>

if和show

v-show: 隐藏：display:none 显示：移出display:none

v-if:隐藏：删除元素 显示:添加元素

<div id="app">
        <p v-show="show">show</p>
        <p v-if="show">if</p>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
               shpw:"true"
            }
        })
    </script>