Vuejs

1.引入Vue.js

<script src="https://unpkg.com/vue/dist/vue.js"></script>

2.文本插值实现数据绑定

<div id="app">
  {{ message }}
</div>
//这是定义视图View

 new Vue({
     el: '#app', //指向view 将Vue实例挂载
     data: {
       message: 'Hello World!';
      } //指向model
 })
// 用来连接 View 与 Model

3.输出纯HTML

<div id = "app">
    <div v-html="text"></div>
</div>

new Vue({
     el: '#app', 
     data: {
       text:'<h1>hello</h1>'
      } 
 })

4.双向数据绑定

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

5.给元素的属性绑定数据

 <div id="app" v-bind:title='message' v-bind:style='color' v-once>
     <a :href='url'>{{message}}</a>
  </div>

var vm = new Vue({
  el: '#app',
  data:{
    message: 'Google',
    color: 'color:green',
    url:'https://google.com'
  }
})

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

6.条件与循环

<div id="app">
  <h1 v-if="num > 0">Num: {{ num }}</h1>
  <p v-if="seen">now you see me</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    num:12,
    seen: true,
    name:'WannaCry'
  }
})

<h1 v-show="name.indexOf('Walker') >= 0">Name: {{ name }}</h1>

<div id="app">
   <h1 v-if="age >= 25">Age: {{ age }}</h1>
   <h1 v-else>Name: {{ name }}</h1>
</div>

var vm = new Vue({
            el: '#app',
            data: {
                age:20,
                name: 'Alan Walker',
                sex: 'Man'
            }
        })

<div class="title">
    <ul>
       <li v-for="todo in todos">
        {{ todo.text }}
       </li>
   </ul>
 </div>

var app = new Vue({
   el: '.title',
    data: {
      //定义todos数组
      todos: [
        { text: 'study hard' },
        { text: 'find a girlfriend' },
         { text: 'around the world' }
      ]
   }
})

7.处理用户点击

<div class="title">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>

new Vue({
   el: '.title',
   data: {
       message: 'Hello Vue.js!'
      },
    methods: {
       reverseMessage: function () {
         this.message = this.message.split('').reverse().join('')
         //split()用于将字符串转化为数组
         //reverse()用于颠倒数组中元素顺序
         //join()用于将数组转化为字符串
      }
    }
 })