vue步骤

1.先引入vue.js

2.在body里写div挂载点

3.

所以：

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

    v-html：解析html等代码


 -->
<div id="app">
    <p>{{message}}</p>
    <p>{{2+3*3}}</p>
    <p v-html="message"></p>
    <p v-bind="message">v-bind</p>


    <p>{{shu}}</p>
    <p v-html="shu"></p>

</div>
{{message}}
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message: "<b>this is a pen</b>",
            shu: "李冲"

        }

    })
</script>

显示结果：

二、bind和model

    v-bind
    必须指定绑定属性
    单项绑定  vm=>属性
    : 是 v-bind的缩写
 -->

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

        }

    })
</script>

三、if和show

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

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

        }

    })
</script>