vue-常用指令

 一、一些指令

1.v-bind 绑定元素（简写 :）

<div id="app-2">
 <span v-bind:title="message">
 鼠标悬停几秒钟查看此处动态绑定的提示信息！
 </span>
</div>

var app2 = new Vue({
  el: '#app-2',
 data: {
 message: '页面加载于 ' + new Date().toLocaleString()
 }
})

2.v-if 、v-else 、 v-else-if： 条件判断

3.v-show : 条件判断

4.v-for ： 循环

<div id="app-4">
 <ol>
 <li v-for="（todo, index）in todos" :key="index">

 {{ todo.text }}
 </li>
 </ol>

 <ul>
 <li v-for="（item, key, index）in project" :key="index">

      {{ item}}-{{key}}-{{index}}
    </li>
  </ul>

</div>

var app4 = new Vue({

  el: '#app-4',
 data: {
 todos: [ // 数组
 { text: '学习 JavaScript' },
 { text: '学习 Vue' },
 { text: '整个牛项目' }
 ]，
 project: {
     name: '菜鸟教程',       
     url: 'http://www.runoob.com',
     slogan: '学的不仅是技术，更是梦想！' 

 }
})

5.v-on 事件监听器(简写 @)

6.v-model 能轻松实现表单输入和应用状态之间的双向绑定。(

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

)

7.v-cloak  这个指令是防止页面加载时出现 vuejs 的变量名而设计的,在el挂载的标签上添加

<div class="#app" v-cloak>
    <p>{{value.name}}</p>
</div>
css:

[v-cloak] {
    display: none;
}
or

[v-cloak] {
    display: none !important;
}

8. v-text

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

9. v-html
10. v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

css:

[v-cloak] {
  display: none;
}
html:

<div v-cloak>
  {{ message }}
</div>

11. v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
 <h1>comment</h1>
 <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
 <li v-for="i in list" v-once>{{i}}</li>
</ul>

二、一些特殊属性
1. key (v-for)

2. ref
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。

<div id="app">
    <navbar ref="navbar"></navbar> <pagefooter ref="pagefooter"></pagefooter> </div>

Vue.component('navbar',{
    template:'#navbar', data:function () { return { navs:[] } } }); Vue.component('pagefooter',{ template:'#pagefooter', data:function () { return { footer:'' } } }); new Vue({ el:'#app', mounted:function () { //ready, //这里怎么直接访问navbar的navs和pagefooter的footer值呢， } })

new Vue({
    el:'#app',
    mounted:function () { //ready, //这里怎么直接访问navbar的navs和pagefooter的footer值呢， console.log(this.$refs.navbar.navs); console.log(this.$refs.pagefooter.footer); } })

转载于:https://www.cnblogs.com/yanyan1114/p/8507620.html