小白教程|一小时上手最流行的前端框架vue（推荐）

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

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

new Vue({
 el: '#app',
 data: {
  message: 'Hello Vue!'
 }
})

new Vue({
 el: '#app',
 data: {
  message: 'Hello Vue!',
  url: 'www.salasolo.com'
 },
 methods:{
   showMsg: function(){
     alert(this.message)
   },
   jumpUrl: function(){
     location.href = this.url
   }
 },
})

<span>消息: {{ message }}</span>

<span v-html="htmlCode"></span>

<span v-for="item in list">{{item}}</span>

<span v-if="isHuman">我是人类</span>
<span v-else>我不是人类</span>

<a v-bind:href="url" rel="external nofollow" >这是一个链接</a>
<img :src:href="imgUrl" rel="external nofollow" alt="这是一张图片" />

<span>1+1=: {{ 1+1 }}</span>

<button type="button" v-on:click="showMsg" >点击调用showMsg方法</button>

<select v-on:change="showChangeMsg" >
<option value="1">选项一</option>
<option value="2">选项二</option>
</select>

<div id="app">
  <h3>商品列表</h3>
  <hr/>
  <table>
    <th>
      <td>商品名</td><td>商品图片</td><td>商品数量</td><td>操作</td>
    </th>
    <tr v-for="(item,index) in list">
      <td>{{item.name}}</td>
      <td><img src="item.imgUrl" /></td>
      <td>{{item.quantity}}</td>
      <td>
        <button type="button" v-on:click="delete(index)">删除此商品</button>
      </td>
    </tr>
  </table>
</div>

new Vue({
  el: '#app',
  data: {
    list:[]
  },
  created:function(){
    this.loadProductList();
  },
  methods:{
    loadProductList:function(){
      $.post('/product/apiGetList',function(data){
        this.list = data.data.list;
      });
    },
    deleteProduct:function(index){
      var _this = this;
      $.post('/product/apiDelete',{productId:_this.list[index]['productId']},function(){
        alert('删除成功');
      });
    }
  },
})