new Vue({
    el: '#first-app',
    data: {
        title: 'Hello World',
    },
    methods: {
        changeText: function (event) {
            this.title = event.target.value;
        }    
})

 <input type="text" id="txt-title" v-on:keyup.enter="changeText">

<h1 v-once>{{title}}</h1>

{{myMethod()}}

new Vue({
    el: '#first-app',
    data: {
        link: 'http://openlearn.ir'
    }
})

<a v-bind:href="link">openlearn</a>

new Vue({
    el: '#first-app',
    data: {
       htmlLink: '<a href="http://openlearn.ir">OpenLearn</a>'
    }
})

{{htmlLink}}
<p v-html="htmlLink"></p>

v-bind:click:"myFunction($event)"

v-bind:mousemove.stop:""

keyup.enter.space.esc

 <input type="text" v-model="name" />
{{name}}

new Vue({
    el: '#first-app',
    data: {
        name: 'openlearn',
    },
}

  <div class="demo" :class="{ red: attachRed , blue : !attachRed }" @click="attachRed = !attachRed"></div>

new Vue({
  el: '#roxo-app',
  data: {
    attachRed: false
  }
}

  <div class="demo" :class="divClasses" @click="attachRed = !attachRed"></div>
  <div class="demo" :class="{red: attachRed}"></div>
  <div class="demo" :class="[color, {blue: attachRed}]"></div>

  <input type="text" v-model="color">
  <hr>

  <h1>Dynamic Styles</h1>
  <div class="demo" :style="{backgroundColor: bgColor}"></div>
  <div class="demo" :style="divStyles"></div>
  <div class="demo" :style="[divStyles, {height: width + 'px'}]"></div>

new Vue({
  el: '#roxo-app',
  data: {
    attachRed: false,
    color: 'green',
    width: 100,
    bgColor: 'gray'
  },
  computed:{
    divClasses: function(){
      return {
        red: this.attachRed,
        blue: !this.attachRed
      }
    },
    divStyles: function(){
      return {
        backgroundColor: this.bgColor,
        width: this.width + 'px'
      }
    }
  }
})

new Vue({
  el: '#roxo-app',
  data: {
    show: true,
    foods: ['پیتزا', 'قرمه سبزی','چلو کباب'],
    persons: [
      {name: 'masoud', age: 28, website: 'www.roxo.ir'},
      {name: 'morvarid', age: 28, website:'www.google.com'}
    ]
  }
})

<p v-if="show">شما می‌توانید این پاراگراف را ببینید.</p>
  <p v-else>شما نمی‌توانید این پاراگرافت را مشاهده کنید</p>
  <template v-if="show">
  <h3>گروه بندی قالب</h3>
  <p>این پاراگراف در یک گروه بندی قرار دارد</p>
  </template>
<p v-show="show">آیا می‌توانید من را ببینید؟</p>
  <button type="button" @click="show = !show">تغییر وضعیت</button>
  <hr>
  <ul>
  <li v-for="(food, i) in foods" :key="food">{{food}} - ({{i}})</li>
  <button type="button" @click="foods.push('دنده کباب')">افزودن غذای جدید</button>
  </ul>
  <hr>
  <ul dir="ltr">
  <li v-for="person in persons">
  <span v-for="(value, key, index) in person">
  {{key}}: {{value}} - ({{index}})
  </span>
  </li>
  </ul>