vue—你必须知道的

<p v-if="seen">超然haha</p>
  <p v-else></p>

  <div v-show="isSeen">超然haha</div>
  <div v-else></div>

  <ul  v-bind:class="{'class1': class1}">
    <li v-for="item in items">{{ item }}</li>
  </ul>

  <button v-on:click="handleClick">click</button>

  <div>
    <p>{{ message }}</p>
    <input v-model="message">
  </div>

  <!-- v-for -->
  <!--  可以通过一个对象的属性来迭代数据 -->
  <li v-for="value in object">
    {{ value }}
  </li>
  <!-- 也可以提供第二个的参数为键名 -->
  <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
  </li>
  <!-- 第三个参数为索引 -->
  <li v-for="(value, key, index) in object">
    {{ index }}. {{ key }} : {{ value }}
  </li>
  <!-- 也可以循环整数 -->
  <li v-for="n in 10">
   {{ n }}
  </li>

  <!-- v-cloak -->
  <!-- 和CSS规则如[v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕 -->
  [v-cloak]{
    display:none;
  }
  <div v-cloak>{{message}}</div>

  <!-- v-once -->
  <!-- 组件 -->
  <my-component v-once :comment="msg"></my-component>

<a v-bind:href="url">超然haha</a>

<div id="app">
  {{ message | capitalize }}
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

 var vm = new Vue({
  el: '#app',
  data: {
    name: 'Google',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);

<li v-for="item in items" :key="item.id">...</li>

<!-- vm.$refs.p will be the DOM node -->
<p ref="p">hello</p>
<!-- vm.$refs.child will be the child comp instance -->
<child-comp ref="child"></child-comp>

<!-- 动态组件由 vm 实例的属性值 `componentId` 控制 -->
<component :is="componentId"></component>
<!-- 也能够渲染注册过的组件或 prop 传入的组件 -->
<component :is="$options.components.child"></component>

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

<div v-bind:class="{ active: isActive }"></div>

<div v-bind:class="[activeClass, errorClass]"></div>

 <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">超然haha</div>

<div v-bind:style="[baseStyles, overridingStyles]">超然haha</div>

<button v-on:click="greet">Greet</button>

<button v-on:click="say('hi')">Say hi</button>

<!-- 文本 -->
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

<!-- 复选框 -->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

<!-- 单选按钮 -->
<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>

<!-- 选择列表 -->
<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样，prop 可以用在模板内
  // 同样也可以在 vm 实例中像“this.message”这样使用
  template: '<span>{{ message }}</span>'
})
<child message="hello!"></child>

<button-counter v-on:increment="incrementTotal"></button-counter>

Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>

var parent = new Vue({ el: '#parent' })
// 访问子组件
var child = parent.$refs.profile

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>
</div>