Vue常用标签和指令

1.v-text,v-html,v-cloak

v-text会覆盖元素中原本的内容，但是 v-cloak(插值表达式) 只会替换自己的这个占位符，不会把整个元素的内容清空 v-html是以HTML的格式插入

2.v-bind,v-on

v-bind Vue提供的属性绑定机制 缩写是 : v-on Vue提供的事件绑定机制 缩写是 @

 <input type="button" value="按钮"  v-bind:title="mytitle" v-on:click="show">

这里show是一个方法可以加()可以不加()

3.V-model

1.v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V，无法实现数据的双向绑定 2.使用 v-model 指令，可以实现表单元素和 Model 中数据的双向数据绑定 3.v-model 只能运用在表单元素中,input(radio, text, address, email…) select checkbox textarea

<body>
  <div id="app">
    <h4>{{ msg }}</h4>
    <input type="text" style="width:100%;" v-model="msg">
  </div>

  <script>
// 创建 Vue 实例，得到 ViewModelvar vm =new Vue({
      el: '#app',
      data: {
        msg: '大家都是好学生！'
      },
      methods: {
      }
    });
  </script>
</body>

4.V-for

1.V-for 遍历数组

<body>
  <div id="app">
    <p v-for="(user, i) in list">Id：{{ user.id }}--- 名字：{{ user.name }}--- 索引：{{i}}</p>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [
          { id: 1, name: 'zs1' },
          { id: 2, name: 'zs2' },
          { id: 3, name: 'zs3' },
          { id: 4, name: 'zs4' }
        ]
      },
      methods: {}
    });
  </script>
</body>

2.V-for 迭代对象

<body>
  <div id="app">
<!-- 注意：在遍历对象身上的键值对的时候， 除了 有  val  key  ,在第三个位置还有 一个 索引  --><p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p>
  </div>

  <script>
// 创建 Vue 实例，得到 ViewModelvar vm =new Vue({
      el: '#app',
      data: {
        user: {
          id: 1,
          name: '托尼·屎大颗',
          gender: '男'
        }
      },
      methods: {}
    });
  </script>
</body>

3.V-for 迭代数字

<body>
  <div id="app">
<!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 --><p v-for="count in 10">这是第 {{ count }} 次循环</p>
  </div>

  <script>
// 创建 Vue 实例，得到 ViewModelvar vm =new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
  </script>
</body>

4. 在2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的

<p v-for="item in list" :key="item.id">
  <input type="checkbox">{{item.id}}--- {{item.name}}
</p>

key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值