[vue]基础常用的指令

<div id="app">

<p>{{dataname}}</p>                    <!--直接的插值方法-->

<p v-cloak>{{dataname}}</p>       <!--加上v-cloak可以避免直接的插值方法的直接显示源码后闪烁问题-->

<p v-text="dataname"></p>          <!--v-text将会直接使用数据覆盖dom里面的全部内容-->

<p v-html="dataname"></p>         <!--v-html将会直接使用数据覆盖dom里面的全部内容，并且支持html语法-->

<p v-bind:title="ptitle"></p>                 <!--v-bind将会为元素增加一个属性，并且以data相对应名称的数据作为属性内容-->

<input type="button" v-on:click="buttonclick" value="点我">                <!--v-on将会为元素增加一个事件，并且绑定methods里面相对应名称的function事件-->

</div>

<script>

    var vm =new Vue{(

        el:"#app",// 表示 Vue 实例要控制页面上的哪个区域

        data:{//存放数据

            dataname:"hello word",

            ptitle:"这是一个title",

        },

        methods:{ // 这个 methods属性中定义了当前Vue实例所有可用的方法

            buttonclick:function(){

               console.log("你刚才点击了一下带v-on:click=pclick的元素");

            }

        }

    )}

</script>