Vue学习笔记（三）-内部指令

1.v-text/v-html

v-text：当我们网速很慢或者javascript出错时，会暴露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的。

v-html：显示带有html标签的数据。在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。

<div id="app">
        <span v-text="message"></span>
        <span v-html="dodo"></span>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                message:'Hello World!',
                dodo:'<h2>hello word</h2>'
            }
        })
    </script>

 

2.v-on指令

绑定事件监听器，监听DOM事件来触发一些javascript代码

<div id="app">
        本场比赛得分： {{count}}<br/>
        <!--v-on可以用@替换简写-->
        <button @click="jiafen">加分</button>
        <button v-on:click="jianfen">减分</button>

        <!--v-on:keyup.enter键盘回车事件-->
        <input type="text" v-on:keyup.enter="onEnter" v-model="fenshu2">
 
     </div>
 
     <script type="text/javascript">
         var app=new Vue({
             el:'#app',
             data:{
                 count:1,
                 fenshu2:1
             },
             methods:{
                 jiafen:function(){
                     this.count++;
                 },
                 jianfen:function(){
                     this.count--;
                 },
                 onEnter:function(){
                     //文本框的数字会默认转变成字符串,需要用parseInt()函数进行整数转换
                     this.count=this.count+parseInt(this.fenshu2);
                 }
             }
         })
     </script>