初识vue

vue截取html需要渲染的一部分来进行实时渲染操作,代替原来的html渲染完成后通过js来修改dom节点，效率更高，更现代化，是前端的进步。

字符串数据渲染：

    <div id="app">
        my name is {{message}}.
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
      const app = new Vue({
          el: '#app',
          data: {
              message: 'maoriaty' 
          }
      })
    </script>

数组数据渲染：

    <div id="app">
        <ul>
            <li v-for="item in message">{{item}}</li>
        </ul>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
      const app = new Vue({
          el: '#app',
          data: {
              message: ['maoriaty','jabin','susan','jack'] 
          }
      })
    </script>

 ajax等数据渲染：

    <div id="app">
        <ul>
            <li v-for="item in message">{{item}}</li>
        </ul>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
      const app = new Vue({
          el: '#app',
          data: {
              message: [] 
          },
          created () {
            fetch('http://maoriaty.top/myjson/name') //model: cors默认权限跨域访问，需要服务端开启允许跨域访问，no-cors为无权限跨域访问，能拿到数据但不能使用
              .then(Response => Response.json())
              .then(data => this.message = data.names)
          }
      })
    </script>

 计算属性：

    <div id="app">
        <ul>
            <li v-for="item in message">
                {{item.age}} {{item.name}}
                <span v-if='item.age === 2'>- IS GOOD AT ENGLISH.</span>
                <button @click='item.age += 1'>Add</button>
            </li>
        </ul>
        <h2>Total Inventory: {{totalNums}}</h2>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
      const app = new Vue({
          el: '#app',
          data: {
              message: [] 
          },
          computed: {
              totalNums () {
                  return this.message.reduce((sum, person) => {
                      return sum + person.age
                  },0)
              }
          },
          created () {
            fetch('http://maoriaty.top/myjson/name') //model: cors默认权限跨域访问，需要服务端开启允许跨域访问，no-cors为无权限跨域访问，能拿到数据但不能使用
              .then(Response => Response.json())
              .then(data => this.message = data.names)
          }
      })
    </script>

 表单数据绑定：

    <div id="app">
        <ul>
            <li v-for="item in message">
                <input type="number" v-model.number='item.age'> {{item.name}}
                <span v-if='item.age === 2'>- IS GOOD AT ENGLISH.</span>
                <button @click='item.age += 1'>Add</button>
            </li>
        </ul>
        <h2>Total Inventory: {{totalNums}}</h2>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
      const app = new Vue({
          el: '#app',
          data: {
              message: [] 
          },
          computed: {
              totalNums () {
                  return this.message.reduce((sum,person) => {
                      return sum + person.age
                  },0)
              }
          },
          created () {
            fetch('http://maoriaty.top/myjson/name') //model: cors默认权限跨域访问，需要服务端开启允许跨域访问，no-cors为无权限跨域访问，能拿到数据但不能使用
              .then(Response => Response.json())
              .then(data => this.message = data.names)
          }
      })
    </script>