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);
    }
})