Vue简要指令

准备工作：引入vue

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

建立vue

<script>
    var app = new Vue({
        el: '#app',
        data() {
            return{
                imgURL:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=259023689,2722366994&fm=26&gp=0.jpg',
                message: 'Hello Vue!',
                list:['html',"css","js"],
                str:"<i>BBC</i>",
                isShow:true,
            }
        },
        methods: {
            change(){
                this.isShow = !this.isShow
            }
        },
    })
</script>

渲染进html

<!-- 创建容器  -->
<div id="app">
    <!-- 相同数据使用的一个地址 修改会同步 -->
    <!-- 渲染input初始值 v-model="数据"-->
    <input type="text" v-model="message">
    <!-- 渲染HTML {{}}-->
    {{ message }}
    <!-- 渲染HTML并转换大写 {{数据.toUpperCase()}}-->
    <h1>{{message.toUpperCase()}}</h1>
    <!-- 渲染HTML 数据中带标签 v-html="数据"-->
    <div v-html="str"></div>
    <!-- 渲染表格 v-for= "(item,i) in 数据"-->
    <table>
        <tr>
            <td>序号</td>
            <td>名称</td>
        </tr>
        <tr v-for= "(item,i) in list">
            <td>{{i+1}}</td>
            <td>{{item}}</td>
        </tr>
    </table>
    <!-- 渲染图片 v-bind:src="数据"-->
    <img v-bind:src="imgURL" alt="" >
    <!-- 事件 v-on:click="绑定事件"-->
    <button v-on:click="change" style="display: block;">按钮</button>
    <!-- 显示与影藏 v-show="数据" v-if="数据"-->
    <div v-show="isShow">阿班</div>
    <div v-if="isShow">凯哥</div>

</div>