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>

vue动态绑定v-bind:  可以简写为 ：

 <tr v-for="(v,i) in list" v-bind:key="v.id">
                <td>{{v.name}}</td>
                <td>{{v.age}}</td>
            </tr>

vue样式v-class:

 <div id="app">
        <h1 :class="{red:flag，bg:flag2}">用户系统</h1>
        <table border="1" cellpadding="5">
            <tr>
                <th>姓名</th>
                <th>年纪</th>
            </tr>
            <!-- 循环的时候，需要动态绑定一个key 动态绑定需要使用v-bind,可以简写为 ： -->
            <tr v-for="(v,i) in list" v-bind:key="v.id">
                <td>{{v.name}}</td>
                <td>{{v.age}}</td>
            </tr>
        </table>
    </div>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                flag: true,
                flag2:true,
                list: [
                    {

                        id: 1,
                        name: "张三",
                        age: 30
                    },
                    {
                        id: 2,
                        name: "李四",
                        age: 30
                    },
                    {
                        id: 3,
                        name: "王五",
                        age: 30
                    },

                ]
            }
        })

vue样式  :style

<tr v-for="(v,i) in list" v-bind:key="v.id" :style="{color:v.flag?'red':'green'}">