vue快速上手

vue是一個基于響應(yīng)式編程思想、模塊化設(shè)計實(shí)現(xiàn)的js框架，可以大大簡化開發(fā)，是前端開發(fā)的首選框架。

1、基礎(chǔ)語法

下面這個demo演示了vue的基本使用：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Demo</title>
<!-- 這個是國內(nèi)的vue cdn庫 -->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>

  <div id="app">

    <!-- 插值 -->
    <div>{{ test_message }}</div>
    <!-- 插值html模板 -->
    <div v-html="test_vhtml"></div>

    <!-- 遍歷 -->
    <div>
      <li v-for="user in test_users">
        {{ user.name }}, {{ user.age }} years old.
      </li>
      <li style="list-style: none" v-for="(user, i) in test_users" :key="i">
          {{ i }}: {{ user.name }}, {{ user.age }} years old.
      </li>
    </div>

    <!-- 插值方法 -->
    <div>{{ test_func() }}</div>

    <!-- 計算 -->
    <div>1 + 2 = {{ 1 + 2 }}</div>
    <div>{{ test_bool ? "YES" : "NO" }}</div>

    <!-- 條件分支 -->
    <div v-if="test_bool">see me if test_bool is true</div>
    <div v-else>see me if test_bool is false</div>

    <!-- 綁定值 -->
    <div v-bind:id="'xxx' + test_bind_id">a h1 with id xxx-{{ test_bind_id }}</div>
    <a v-bind:href="test_url">a baidu link</a><br/>
    <!-- 簡寫形式 -->
    <div :id="'xxx' + test_bind_id">a h1 with id xxx-{{ test_bind_id }}</div>
    <a :href="test_url">a baidu link</a><br/>

    <!-- 綁定事件 -->
    <button v-on:click="test_click">a button</button><br/>
    <button v-on:click="test_click_count += 1">a button</button><span>{{ test_click_count }}</span><br/>
    <!-- 事件細(xì)節(jié) -->
    <button v-on:click.once="test_click">a once click button</button><br/>
    <input v-on:keyup.enter="test_summit" placeholder="tap enter to summit"><br/>
    <!-- 簡寫形式 -->
    <button @click="test_click">a button</button><br/>

    <!-- 雙向綁定 -->
    <input v-model="test_input_value"><span>{{ test_input_value }}</span><br/>
    <!-- 多選綁定 -->
    <input type="checkbox" id="check_a" value="a" v-model="test_options"><label for="check_a">A</label>
    <input type="checkbox" id="check_b" value="b" v-model="test_options"><label for="check_b">B</label>
    <input type="checkbox" id="check_c" value="c" v-model="test_options"><label for="check_c">C</label>
    <label>{{ test_options }}</label><br />
    <!-- 列表綁定 -->
    <select v-model="test_select">
      <option value="">choose</option>
      <option value="a">A</option>
      <option value="b">B</option>
    </select>
    <label>{{ test_select }}</label><br/>


    <!-- 綁定樣式 -->
    <div v-bind:style="{ color: test_color }">test style</div>
    <div v-bind:class="{ test_class_active: test_bool }">test class</div>

    <!-- 過濾器 -->
    <div v-bind:id="'id-' + test_bool | test_filter_bool">a div with id id-{{ test_bool | test_filter_bool }}</div>
    <div>{{ test_message }} -> {{ test_message | test_filter_upcase }}</div>

    <!-- 監(jiān)聽器 -->
    <input v-model="test_money_dollar"><span>{{ test_money_yuan }}￥</span><br />

  </div>

  <style>
    .test_class_active {
      color: green;
    }
    .test_class_disable {
      color: gray;
    }
  </style>
  
  <script>
    new Vue({
      el: '#app',
      data: {
        test_message: "a test message",
        test_color: "#ff0000",
        test_vhtml: "<h5>a h5</h5>",
        test_bool: true,
        test_click_count: 0,
        test_money_yuan: 0,
        test_money_dollar: 0,
        test_users: [
          { name: 'Tom', age: 12 },
          { name: 'Helen', age: 11 },
          { name: 'Jack', age: 13 }
        ],
        test_options: [],
        test_select: "",
        test_bind_id: 1,
        test_url: "https://www.baidu.com",
        test_input_value: "the input text"
      },
      filters: {
        test_filter_upcase: function (value) {
          if (!value) return ''
          value = value.toString()
          return value.toUpperCase()
        },
        test_filter_bool: function (value) {
          if (value.booleanValue) {
            return "true"
          } else {
            return "false"
          }
        }
      },
      watch: {
        test_money_dollar: function (value) {
          this.test_money_yuan = value * 6
        }
      },
      methods: {
        test_func: function () {
          return "test_func(): " + this.test_message;
        },
        test_click: function () {
          alert("test_click()")
        },
        test_summit: function () {
          alert("test_summit()")
        }
      }
    })
  </script>
</body>
</html>

2、模塊化

a、注冊組件

<div id="app">
  <!-- 引用 -->
  <test_component_01></test_component_01>
  <test_component_02></test_component_02>
</div>
<script>
  // 注冊全局組件
  Vue.component('test_component_01', {
    template: '<div>test component 01</div>'
  })
  // app實(shí)例
  new Vue({
    el: '#app',
    // 注冊局部組件
    components: {
      'test_component_02': {
        template: '<div>test component 02</div>'
      }
    }
  })
</script>

b、模塊間傳值(父 --> 子)，變量綁定及聲明

<div id="app">
  <input v-model="parent_text"><br/>
  <!-- ② 綁定變量 -->
  <child v-bind:text_from_parent="parent_text"></child>    
</div>
<script>
  Vue.component('child', {
    // ① 聲明變量
    props: ['text_from_parent'],
    template: "<span>{{ text_from_parent }}</span>"
  })
  new Vue({
    el: '#app',
    data: {
      parent_text: "parent text"
    }
  })
</script>

props后面的參數(shù)也可以以map的形式提供，以實(shí)現(xiàn)參數(shù)限定，例如：

props: { 
  varA: Number,
  varB: [String, Number],
  varC: {
    type: Number, 
    required: true,
    default: 1
  },
  varD: {
    validator: function (value) {
      return value > 10
    }
  }
}

c、模塊間傳值(子 --> 父)，事件監(jiān)聽

<div id="app">
    <div>{{ count }}</div>
    <!-- ② 注冊事件監(jiān)聽 -->
    <child v-on:update="childRespondUpdate"></child>
</div>
  
<script>
Vue.component('child', {
  template: '<button v-on:click="onClick">click me to change parent</button>',
  data: function () {
    return {
      count: 0
    }
  },
  methods: {
    onClick: function () {
      this.count += 1
      // ① 在子控件更新的方法中，觸發(fā)事件
      this.$emit('update', this.count)
    }
  },
})
new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    // ③ 執(zhí)行更新
    childRespondUpdate: function (value) {
      this.count = value
    }
  }
})
</script>

3、路由（router）

路由是vue的一個頁面切換組件，基本使用如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Router Demo</title>
<!-- 這個是國內(nèi)的vue cdn庫 -->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- vue router庫 -->
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
</head>

<body>
  <div id="app">
      <!-- 普通鏈接 -->
      <router-link to="/a">a-path</router-link>
      <router-link to="/b">b-path</router-link>
      <br/>

      <!-- 通過名字訪問 -->
      <router-link v-bind:to="{ name:'a' }">a-name</router-link>
      <router-link v-bind:to="{ name:'b' }">b-name</router-link>
      <br/>

      <!-- 帶參數(shù) -->
      <router-link v-bind:to="{ path:'/a', query: { param: 'value' } }">a-param</router-link>
      <router-link v-bind:to="{ path:'/b', query: { param: 'value' } }">b-param</router-link>
      <br/>

      <!-- 指定tag類型 -->
      <router-link to="/a" tag="button">a-tag</router-link>
      <router-link to="/b" tag="button">b-tag</router-link>
      <br/>

      <!-- router區(qū)域 -->
      <router-view></router-view>
  </div>
  <script>
    // 創(chuàng)建router
    const router = new VueRouter({
      routes: [
        { path: '/a', name: 'a', component: { template: '<div>A</div>' } },
        { path: '/b', name: 'b', component: { template: '<div>B</div>' } },
        { path: '/a/b', name: 'c', component: { template: '<div>C</div>' } }
      ]
    })
    // 通過router初始化
    const app = new Vue({
      router: router
    })
    // 手動掛載
    .$mount('#app')
  </script>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 《瞬時花開》目錄上一章：瞬時花開（38） 不知道是不是受到節(jié)日浪漫氣氛的感染，從圣誕節(jié)到元旦這段時間，鼓足勇氣親口...
    星月花木閱讀 309評論 0贊 0
  • 幸福的小黃豆0426閱讀 222評論 0贊 0
  • 要說一個家喻戶曉的中國本土通俗作家，金庸絕對是首當(dāng)其沖的，就算不知道金庸，那他筆下的那些人物卻絕對是知道的——郭靖...
    颯然的秋閱讀 653評論 3贊 0
  • C++輸出格式控制 在輸出數(shù)據(jù)時，為簡便起見，往往不指定輸出的格式，由系統(tǒng)根據(jù)數(shù)據(jù)的類型采取默認(rèn)的格式，但有時希望...
    MinoyJet閱讀 2,500評論 0贊 0

友情鏈接更多精彩內(nèi)容