<div id="app">
  <!-- 动态绑定 DOM 文本 -->
  <p>{{ message1 }}</p>
  <p>
    <!-- 动态绑定 DOM 属性 -->
    <span v-bind:title="message2">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
  </p>
</div>

<div id="app-3">
  <!-- 条件渲染 -->
  <p v-if="seen">现在你看到我了</p>
  <!-- 列表渲染 -->
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>

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

<div id="app-7">
  <ol>
    <!-- 现在我们为每个todo-item提供待办项对象    -->
    <!-- 待办项对象是变量，即其内容可以是动态的 -->
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

<div v-html="rawHtml"></div>

<div v-bind:id="dynamicId"></div>

<button v-bind:disabled="someDynamicCondition">Button</button>

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

<p v-if="seen">Now you see me</p>

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

<a v-on:click="doSomething">

<form v-on:submit.prevent="onSubmit"></form>

<!-- in mustaches -->
{{ message | capitalize }}

<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

{{ message | filterA | filterB }}

{{ message | filterA('arg1', arg2) }}

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

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

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

<div id="example">
  <!-- 结果：Hello -->
  <p>Original message: "{{ message }}"</p>
  <!-- 结果：olleH -->
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

<div id="app">
  <p>{{ message }}</p>
  <p>{{ reversedMessage }}</p>
  <p>{{ reversedMessage }}</p>
  <p>{{ reversedMessage }}</p>
  <p>{{ reversedMessage2() }}</p>
  <p>{{ reversedMessage2() }}</p>
  <p>{{ reversedMessage2() }}</p>
</div>
<script>
    new Vue({
    el: '#app',
    data: {
      message: 'Hello'
    },
    computed: {
      reversedMessage: function() {
        console.log('computed')
        return this.message.split('').reverse().join('')
      }
    },
    methods: {
      reversedMessage2: function() {
        console.log('methods')
        return this.message.split('').reverse().join('')
      }
    }
  })
</script>

<div id="demo">{{ fullName }}</div>

<script>
  var vm = new Vue({
    el: '#demo',
    data: {
      firstName: 'Foo',
      lastName: 'Bar',
      fullName: 'Foo Bar'
    },
    watch: {
      firstName: function (val) {
        this.fullName = val + ' ' + this.lastName
      },
      lastName: function (val) {
        this.fullName = this.firstName + ' ' + val
      }
    }
  })
</script>

<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>

<!-- Since there is already a rich ecosystem of ajax libraries    -->
<!-- and collections of general-purpose utility methods, Vue core -->
<!-- is able to remain small by not reinventing them. This also   -->
<!-- gives you the freedom to just use what you're familiar with. -->
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 如果 question 发生改变，这个函数就会运行
    question: function (newQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.getAnswer()
    }
  },
  methods: {
    // _.debounce 是一个通过 lodash 限制操作频率的函数。
    // 在这个例子中，我们希望限制访问yesno.wtf/api的频率
    // ajax请求直到用户输入完毕才会发出
    // 学习更多关于 _.debounce function (and its cousin
    // _.throttle), 参考: https://lodash.com/docs#debounce
    getAnswer: _.debounce(
      function () {
        var vm = this
        if (this.question.indexOf('?') === -1) {
          vm.answer = 'Questions usually contain a question mark. ;-)'
          return
        }
        vm.answer = 'Thinking...'
        axios.get('https://yesno.wtf/api')
          .then(function (response) {
            vm.answer = _.capitalize(response.data.answer)
          })
          .catch(function (error) {
            vm.answer = 'Error! Could not reach the API. ' + error
          })
      },
      // 这是我们为用户停止输入等待的毫秒数
      500
    )
  }
})
</script>

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

<!-- v-bind:class 指令可以与普通的 class 属性共存 -->
<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

<div v-bind:class="classObject"></div>
<script>
  new Vue({
    data: {
      classObject: {
        active: true,
        'text-danger': false
      }
    }
  })
</script>

<!-- 可以把一个数组传给 v-bind:class ，以应用一个 class 列表 -->
<div v-bind:class="[activeClass, errorClass]">

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

<!-- 根据条件切换列表中的 class ，可以用三元表达式： -->
<div v-bind:class="[isActive ? activeClass : '', errorClass]">

<!-- 可以在数组语法中使用对象语法： -->
<div v-bind:class="[{ active: isActive }, errorClass]">

<!-- CSS 属性名可以用驼峰式（camelCase）或名短横分隔命（kebab-case） -->
<div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

<!-- 直接绑定到一个样式对象 -->
<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

<!-- v-bind:style 的数组语法可以将多个样式对象应用到一个元素上 -->
<div v-bind:style="[baseStyles, overridingStyles]">

<!-- 基本用法 -->
<h1 v-if="ok">Yes</h1>

<!-- 
  通过 template 包装多个元素，渲染结果不包含 template 
  v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。
-->
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

<!-- 使用 v-else 指令来表示 v-if 的“else 块” -->
<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

<!-- 
  v-else-if，顾名思义，充当 v-if 的“else-if 块”。可以链式地使用多次： 
  v-else,，v-else-if 必须紧跟在 v-if 或者 v-else-if 元素之后
-->
<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

<script>
  var example1 = new Vue({
    el: '#example-1',
    data: {
      items: [
        {message: 'Foo' },
        {message: 'Bar' }
      ]
    }
  })
</script>

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

<script>
  var example2 = new Vue({
    el: '#example-2',
    data: {
      parentMessage: 'Parent',
      items: [
        { message: 'Foo' },
        { message: 'Bar' }
      ]
    }
  })
</script>

<div v-for="item of items"></div>

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

<ul id="repeat-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

<script>
  new Vue({
    el: '#repeat-object',
    data: {
      object: {
        FirstName: 'John',
        LastName: 'Doe',
        Age: 30
      }
    }
  })
</script>

<div v-for="(value, key) in object">
  {{ key }} : {{ value }}
</div>

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }} : {{ value }}
</div>

<div>
  <span v-for="n in 10">{{ n }}</span>
</div>

<my-component v-for="item in items"></my-component>

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index">
</my-component>

<div id="todo-list-example">
  <input
    v-model="newTodoText"
    v-on:keyup.enter="addNewTodo"
    placeholder="Add a todo"
  >
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:title="todo"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</div>

<script>
  Vue.component('todo-item', {
    template: '\
      <li>\
        {{ title }}\
        <button v-on:click="$emit(\'remove\')">X</button>\
      </li>\
    ',
    props: ['title']
  })
  new Vue({
    el: '#todo-list-example',
    data: {
      newTodoText: '',
      todos: [
        'Do the dishes',
        'Take out the trash',
        'Mow the lawn'
      ]
    },
    methods: {
      addNewTodo: function () {
        this.todos.push(this.newTodoText)
        this.newTodoText = ''
      }
    }
  })
</script>

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

<ul v-if="shouldRenderTodos">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>

<li v-for="n in evenNumbers">{{ n }}</li>

<script>
  new Vue({
    // ...
    data: {
      numbers: [ 1, 2, 3, 4, 5 ]
    },
    computed: {
      evenNumbers: function () {
        return this.numbers.filter(function (number) {
          return number % 2 === 0
        })
      }
    }
  })
</script>

<li v-for="n in even(numbers)">{{ n }}</li>

<script>
  new Vue({
    // ...
    data: {
      numbers: [ 1, 2, 3, 4, 5 ]
    },
    methods: {
      even: function (numbers) {
        return numbers.filter(function (number) {
          return number % 2 === 0
        })
      }
    }
  })
</script>

<div id="example-1">
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>

<script>
  var example1 = new Vue({
    el: '#example-1',
    data: {
      counter: 0
    }
  })
</script>

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

<script>
  var example2 = new Vue({
    el: '#example-2',
    data: {
      name: 'Vue.js'
    },
    // 在 `methods` 对象中定义方法
    methods: {
      greet: function (event) {
        // `this` 在方法里指当前 Vue 实例
        alert('Hello ' + this.name + '!')
        // `event` 是原生 DOM 事件
        alert(event.target.tagName)
      }
    }
  })

  // 也可以用 JavaScript 直接调用方法
  example2.greet() // -> 'Hello Vue.js!'
</script>

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

<script>
  new Vue({
    el: '#example-3',
    methods: {
      say: function (message) {
        alert(message)
      }
    }
  })
</script>

<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>

<script>
  new Vue({
    // ...
    methods: {
      warn: function (message, event) {
        // 现在我们可以访问原生事件对象
        if (event) event.preventDefault()
        alert(message)
      }
    }
  })
</script>

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

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

<span>Multiline message is:</span>
<p style="white-space: pre">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

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

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>

<script>
  new Vue({
    el: '...',
    data: {
      checkedNames: []
    }
  })
</script>

<div id="example-4" class="demo">
  <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>

<script>
  new Vue({
    el: '#example-4',
    data: {
      picked: ''
    }
  })
</script>

<div id="example-5" class="demo">
  <select v-model="selected">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

<script>
  new Vue({
    el: '#example-5',
    data: {
      selected: null
    }
  })
</script>

<div id="example-6" class="demo">
  <select v-model="selected" multiple style="width: 50px">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

<script>
  new Vue({
    el: '#example-6',
    data: {
      selected: []
    }
  })
</script>

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

<script>
  new Vue({
    el: '...',
    data: {
      selected: 'A',
      options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
      ]
    }
  })
</script>

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 当选中时，`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

<!-- 
  当选中时，vm.toggle === vm.a
  当没有选中时，vm.toggle === vm.b
 -->
<input
  type="checkbox"
  v-model="toggle"
  v-bind:true-value="a"
  v-bind:false-value="b"
  >

<!-- 当选中时，vm.pick === vm.a -->
<input type="radio" v-model="pick" v-bind:value="a">

<!-- 
  // 当选中时
  typeof vm.selected // -> 'object'
  vm.selected.number // -> 123
 -->
<select v-model="selected">
    <!-- 内联对象字面量 -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

<input v-model.number="age" type="number">

<input v-model.trim="msg">

<div id="example">
  <my-component></my-component>
</div>

<div id="example">
  <div>A custom component!</div>
</div>

<body>
  <div id="app">
    <!-- 渲染为 <div>局部组件</div> -->
    <my-component></my-component>
  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      components: {
        'my-component': {
          template: '<div>局部组件</div>'
        }
      },
      data: {
      },
    })
  </script>
</body>

<table>
  <my-row>...</my-row>
</table>

<table>
  <tr is="my-row"></tr>
</table>

<child message="hello!"></child>

<body>
  <div id="app">
    <p>{{ total }}</p>
    <child v-on:increment="incrementTotal"></child>
    <child v-on:increment="incrementTotal"></child>
  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    Vue.component('child', {
      template: `
      <div>
        <span>{{ counter }}</span>
        <button @click="increment">increment</button>
      </div>`,
      data () {
        return {
          counter: 0
        }
      },
      methods: {
        increment () {
          this.counter += 1
          this.$emit('increment')
        }
      }
    })
    new Vue({
      el: '#app',
      data: {
        total: 0
      },
      methods: {
        incrementTotal () {
          this.total += 1
        }
      }
    })
  </script>
</body>

<my-component v-on:click.native="doTheThing"></my-component>

<body>
  <div id="app">
    <child-a></child-a>
    <child-b></child-b>
  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    const bus = new Vue()
    Vue.component('child-a', {
      template: `
      <div>
        <p>组件 child A</p>
        <button @click="emitDataToB">发射数据到</button>
      </div>
      `,
      methods: {
        emitDataToB() {
          // 在组件 A 中通过 $emit 发射 data 事件，组件 B 中的钩子监听了 data 事件
          bus.$emit('data', '组件a传递过来的数据')
        }
      }
    })
    Vue.component('child-b', {
      template: `
      <div>
        <p>组件 child B</p>
        <p>{{ message }}</p>
      </div>
      `,
      created() {
        const vm = this
          // 在组件 B 的钩子中通过 bud 的 $on 监听事件
        bus.$on('data', function (data) {
          vm.message = data
        })
      },
      data() {
        return {
          message: 'hello child b'
        }
      }
    })
    new Vue({
      el: '#app',
      data: {},
    })
  </script>
</body>

<app>
  <app-header></app-header>
  <app-footer></app-footer>
</app>

<body>
  <div id="app">
    <bs-panel title="面板1">
      面板1的内容
    </bs-panel>
    <bs-panel title="面板2">
      面板2的内容
    </bs-panel>
    <bs-panel title="没有分发内容的面板">
    </bs-panel>
  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    Vue.component('bs-panel', {
      template: `
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">{{ title }}</h3>
        </div>
        <div class="panel-body">
          <slot>
            只有才没有分发的内容时才会显示
          </slot>
        </div>
      </div>
      `,
      props: {
        title: { type: String, required: true }
      }
    })
    new Vue({
      el: '#app',
      data: {},
    })
  </script>
</body>

<body>
  <div id="app">
    <app-layout>
      <h1 slot="header">顶部</h1>
      <p>内容段落</p>
      <p>内容段落</p>
      <p slot="footer">底部信息</p>
    </app-layout>
  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    Vue.component('app-layout', {
      template: `
        <div class="container">
          <header>
            <slot name="header"></slot>
          </header>
          <main>
            <slot></slot>
          </main>
          <footer>
            <slot name="footer"></slot>
          </footer>
        </div>
      `
    })
    new Vue({
      el: '#app',
      data: {},
    })
  </script>
</body>

<body>
  <div id="app">
    <child>
      <template scope="props">
        <p>hello from parent</p>
        <p>{{ props.text }}</p>
        <p>{{ props.message }}</p>
      </template>
    </child>
  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    Vue.component('child', {
      template: `
        <div class="child">
          <input v-model="message" />
          <slot text="hello from child" :message="message"></slot>
        </div>
      `,
      data () {
        return {
          message: 'child message'
        }
      }
    })
    new Vue({
      el: '#app',
      data: {
      },
    })
  </script>
</body>

<body>
  <div id="app">
    <my-awesome-list :todos="todos">
      <template slot="item" scope="props">
        <li class="my-fancy-item">{{ props.text }}</li>
      </template>
    </my-awesome-list>
  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    Vue.component('my-awesome-list', {
      props: ['todos'],
      template: `
        <ul>
          <slot name="item"
            v-for="item in todos"
            :text="item.title">
            <!-- fallback content here -->
          </slot>
        </ul>
      `
    })
    new Vue({
      el: '#app',
      data: {
        todos: [
          { id: 1, title: '吃饭' },
          { id: 2, title: '睡觉' },
          { id: 3, title: '打豆豆' },
        ]
      },
    })
  </script>
</body>

<body>
  <div id="app">
    <select v-model="currentView">
      <option value="home">home</option>
      <option value="posts">posts</option>
      <option value="archive">archive</option>
    </select>
    <component v-bind:is="currentView"></component>
  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        currentView: 'home'
      },
      components: {
        home: {
          template: '<div>home</div>',
        },
        posts: {
          template: '<div>posts</div>',
        },
        archive: {
          template: '<div>archive</div>',
        }
      }
    })
  </script>
</body>

<body>
  <div id="app">
    <ul>
      <li><a href="JavaScript:void(0)" @click="defaultView = 'register'">注册</a></li>
      <li><a href="JavaScript:void(0)" @click="defaultView = 'login'">登陆</a></li>
    </ul>
    <div>
      <component :is="defaultView"></component>
    </div>
    <hr><hr><hr><hr>
    <div>
      <!-- 可以使用 keep-alive 保持组件状态 -->
      <keep-alive>
        <component :is="defaultView"></component>
      </keep-alive>
    </div>
  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      components: {
        login: {
          template: `
            <form action="">
              <div>
                <label for="">用户名</label>
                <input type="text" />
              </div>
              <div>
                <label for="">密码</label>
                <input type="password" />
              </div>
              <div>
                <input type="submit" value="点击登陆" />
              </div>
            </form>
          `
        },
        register: {
          template: `
            <form action="">
              <div>
                <label for="">用户名</label>
                <input type="text" />
              </div>
              <div>
                <label for="">密码</label>
                <input type="password" />
              </div>
              <div>
                <label for="">确认密码</label>
                <input type="password" />
              </div>
              <div>
                <label for="">验证码</label>
                <input type="password" />
              </div>
              <div>
                <input type="submit" value="点击注册" />
              </div>
            </form>
          `
        }
      },
      data: {
        defaultView: 'login'
      },
    })
  </script>
</body>

<div id="app" ng-cloak>
  {{ message }}
</div>