本文演示一些基础的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语法--> <input type="text" style="width:80%" v-model="dataname"> <!--v-model可以实现表单数据的双向绑定，如果输入将会改变dataname的数据值-->
<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> |