vue变量声明以及bind和model绑定

利用v-html快捷方式生成基础内容

引入vue.js文件：

vue介绍： 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 vue实例：

<!-- 
    插值：{{}}
        原样输出：不会解析html等代码；
        v-html：
        解析html等代码
    -->

    <div id="app">
        <p>{{message}}</p>
        <p>{{2+3*5}}</p>
        <p v-html="message"></p>
        <p v-bind:title="message" ></p>
        <!-- v-once 一次性绑定 -->
        <!-- {{message}} 显示data的内容 -->
    </div>
    {{message}}
    <script>
        let vm = new Vue({
            el: "#app",//指定绑定区域 vm 控制div区域
            data: {
               message:"<b>this is a message</b>"
            }
        })
    </script>

v-bind 也是一种指令，绑定属性 v-bind:title绑定属性title。

v-bind和v-model：

 <!-- 
        v-model 双向
        vm=>value;value=>vm
        不需要指定属性名

        v-bind  单向
        vm=>属性
        必须指定属性
        :   缩写
     -->
    <div id="app">
        <input type="text" v-model="val">
        <input type="text" v-bind:value="val" :title="val">
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
               val:"文本框"
            }
        })
    </script>

v-if和v-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: {
               show:true
            }
        })
    </script>

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。