Vue基础指令

1.v-clock

<div id="app" v-clock> 在app上加上v-clock 然后[v-clock]样式设置display:none

display:none使加了属性的元素一开始不显示 vue框架运行时会自动去掉

[v-clock] {
        display: none;
    }


<div id="app" v-clock>

2.v-text 与 v-html

显示文本到页面

 v-text vue运行时msg3显示到标签

v-html同v-text会渲染字符串中的标签如<b></b>

<div v-text="msg3"></div>
<div v-html="msg4"></div>

3.v-pre

v-pre静默  跳过编译不去识别msg1  页面直接显示{{msg}}

<div v-pre>{{msg1}}</div>

属性文本绑定

v-bind:src="" 可以让src中填一个字符串 而字符串可以去data中获取

简写v-bind:src----:src

还可以写v-bind:value等

事件绑定

@click="fn" 或v-on:click="fn"  绑定点击事件  

@click.prevent阻止默认事件的发生 如a标签的点击跳转事件

事件函数写在methods部分 这是一个存放方法的地方

methods:{
   fn(){}
}