master

分支 (1)

管理

管理

master

vue2_test
/
vue2_nocli
/
ch13.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
        div{padding: 20px}
    </style>
</head>
<body>
<a href="index.html">返回</a>
<div class="app">
    <h2>指令</h2>
<!--
    v-on    注册事件
    v-bind  单向绑定
    v-model 双向绑定
    v-for   遍历对象
    v-if    条件渲染（是否存在）
    v-else  同上
    v-show  条件决定是否显示
-->
    <div v-text="name">v-text会把现在的内容替换掉，不能显示标签体本来的内容</div>
    <div v-html="name">v-html会替换html内容</div>
<!--    网速影响大的时候，这个内容会在有网的时候被替换掉
    配合样式表，可以先不显示这里-->
    <div v-pre>原样输出内容，不会被vue解释执行{{count}}</div>
    <div v-cloak>{{name}}</div>
    <div>初值<span v-once>{{  count}}</span>现在{{count}} <button @click="count++">加1</button></div>
</div>
<script>
    Vue.config.productionTip=false  //关闭生产状态提示
    const x=new Vue({
        // el:".app",
        data:function (){  //data的第二种写法
            return{
                name:"<a href='#'>显示</a>名字",
                count:1
            }
        },
        computed:{

        },
        watch:{

        }
    })
        x.$mount(".app")//挂载方式
</script>
</body>
</html>