vue 基本写法及注意事项：

1、vue结构需要引用vue.min.js运行：
<script src="./node_modules/vue/dist/vue.min.js"></script>

2、vue基本结构表达写法：
    <div id="app">
        <!-- 插值表达式语法 -->
        <h1>{{msg}}</h1>
    </div>
</body>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        // 挂载点
        el: "#app",
        // 定义数据  数据驱动视图
        data: {
            msg: "万里长城人未还"
        }
    })
</script>

vue 绑定事件：
<div id="app">
        <!-- 插值表达式语法 -->
        <h1 @mouseover="mousfn('不教胡马度阴山')">{{msg}}</h1>
        <h1>{{status==0?"未发货":"已发货"}}</h1>
        <h1 v-on:click="show">111</h1>
        <h1 @click="showMsg">44</h1>
    </div>
</body>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        // 挂载点
        el: "#app",
        // 定义数据  数据驱动视图
        data: {
            msg: "万里长城人未还",
            status: "!"
        },
        methods: {
            show: function () {
                // alert(1)
                this.showMsg()
            },
            showMsg() {
                alert(this.msg)
            },
            mousfn(i) {
                alert(i)
            }
        }
    })

vue条件判断写法：if  && else if 
  <div id="app">
        <input type="text" value="输入框" @click="opens">
        <h2 v-if="status==1">你好</h2>
        <h2 v-else-if="status==2">hello</h2>
        <h2 v-else>关关雎鸠</h2>
    </div>
</body>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        // 挂载点
        el: "#app",
        // 定义数据  数据驱动视图
        data: {
            msg: "万里长城人未还",
            status: 1
        },
        methods: {
            opens() {
                var p = prompt("请输入数字")
                this.status = p
            }
        }
    })

vue显示v-show
      <button @click="opens">切换</button>
        <!-- v-if是把元素从文档中删除，而v-show是使用行内样式的display属性控制显示和隐藏 -->
        <!-- v-if频繁的切换，比较消耗性能，推荐在首次渲染的时候使用；v-show在频繁切换的时候，对性能的影响更小，适合频繁切换 -->
        <p v-show="show">完蛋了</p>
    </div>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                num: 1,
                mes: "真棒",
                mes2: "优秀",
                show: true
            },
            methods: {
       
                opens() {
                    this.show = !this.show
                }
            }
        })
    </script>