vue學習筆記

vue對比jquery

vue：mvvm 數(shù)據(jù)驅動影響視圖 適用于復雜數(shù)據(jù)
jquery：mvc 視圖塞入數(shù)據(jù) 適用于復雜視圖動效

生命周期

以下都是鉤子函數(shù)

beforeCreate（創(chuàng)建前）
created（創(chuàng)建后）
beforeMount (載入前)
mounted（載入后）
beforeUpdate（更新前）
updated（更新后）
beforeDestroy（銷毀前）
destroyed（銷毀后）

計算屬性

computed：計算屬性
區(qū)別與methods：
性能相比methods要高 因為有緩存 只有在相關值發(fā)生改變時才會觸發(fā) 在第一次渲染頁面也會主動觸發(fā)

計算屬性的數(shù)據(jù)源未發(fā)生變化 則不會觸發(fā)響應的計算屬性
屬性區(qū)分于方法

  <div id="app">
    <p>原始字符串: {{ message }}</p>
    <p>計算后反轉字符串: {{ reversedMessage }}</p>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Runoob!'
      },
      computed: {
        // 以下的函數(shù)將提供給計算屬性的 getter   計算屬性默認只有getter
        reversedMessage: function() {
          // `this` 指向 vm 實例
          return this.message.split('').reverse().join('')
        }
      }
    })
  </script>

計算屬性中默認存在getter方法 我們可以手動添加setter方法:

  <div id="app">
    <p>{{ site }}</p>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        name: 'Google',
        url: 'http://www.google.com'
      },
      computed: {
        site: {
          // getter
          get: function() {
            return this.name + ' ' + this.url
          },
          // setter
          set: function(newValue) {
            var names = newValue.split(' ')
            this.name = names[0]
            this.url = names[names.length - 1]
          }
        }
      }
    })
    // 調用 setter， vm.name 和 vm.url 也會被對應更新
    vm.site = '菜鳥教程 http://www.runoob.com';  //觸發(fā)set方法
    document.write('name: ' + vm.name); //動態(tài)更新dom樹
    document.write('<br>');
    document.write('url: ' + vm.url);
  </script>

相關指令

v-text 等同大胡子效果 但是會轉換為字符串

v-html 綁定html屬性
例如：

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

  <script>
    new Vue({
      el: '#app',
      data: {
        message: '<h1>菜鳥教程</h1>'
      }
    })
  </script>

v-if三兄弟 只會渲染判斷為真的dom
v-show 綁定值的布爾值來判斷是否顯示 會渲染整個dom只是會根據(jù)布爾只能判斷是否增加display none這個內聯(lián)樣式
v-if和v-show的區(qū)別：
v-if有更高的切換消耗；
v-show有更高的初始渲染消耗买羞；
v-if適合運營條件不大可能改變；
v-show適合頻繁切換

v-for: 循環(huán)

v-once 只會渲染一次 即使數(shù)據(jù)改變

v-bind 用來響應地更新html屬性 使用場景：綁定接口請求得到的數(shù)據(jù) 簡寫： : 吃挑，可以綁定class和內聯(lián)樣式 例如：

<style>
  .class1 {
    background: #444;
    color: #eee;
  }
</style>

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

  <div id="app">
    <label for="r1">修改顏色</label><input type="checkbox" v-model="class1" id="r1">
    <br><br>
    <!-- 單引號只是對下面對兩個class1作出區(qū)分 不使用也可以 前面是class 樣式 后面是bool值 -->
    <div v-bind:class="{'class1': class1}">
      directiva v-bind:class
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        class1: false
      }
    });
  </script>
</body>

v-on：用來監(jiān)聽dom事件 其修飾符可以指定鍵盤事件
v-on:click 簡寫@click：事件監(jiān)聽
v-model:雙向綁定 一般結合input textarea (多行) 使用 其有修飾符.lazy .number .trim

過濾器

vue中可以自定義過濾器 被用作常見地文本格式化

<!-- 在兩個大括號中 -->
{{ message | capitalize }}

<div id="app">
    <!-- 過濾器的用法 -->
    {{ message | capitalize }}
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'runoob'
      },
      filters: {
        capitalize: function(value) {
          if (!value) return ''
          value = value.toString()
          return value.charAt(0).toUpperCase() + value.slice(1) //對字符串的第一個字母進行大寫
        }
      }
    })
  </script>

監(jiān)聽屬性

watch：響應數(shù)據(jù)變化

<div id="computed_props">
    <!-- 分別綁定kilometers和meters -->
    千米 : <input type="text" v-model="kilometers"> 米 : <input type="text" v-model="meters">
  </div>
  <p id="info"></p>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#computed_props',
      data: {
        kilometers: 0,
        meters: 0
      },
      methods: {},
      computed: {},
      watch: {
        kilometers: function(val) {  //dom中的相關綁定會觸發(fā)對應的觀察屬性
          this.kilometers = val;
          this.meters = val * 1000;
        },
        meters: function(val) {
          this.kilometers = val / 1000;
          this.meters = val;
        }
      }
    });
    // $watch 是一個實例方法 $作用與vue自帶的屬性區(qū)別u與自定義的屬性
    vm.$watch('kilometers', function(newValue, oldValue) {
      // 這個回調將在 vm.kilometers 改變后調用
      document.getElementById("info").innerHTML = "修改前值為: " + oldValue + "逛犹，修改后值為: " + newValue;
    })
  </script>

樣式綁定

  • 單樣式綁定：
<style>
  .active {
    width: 100px;
    height: 100px;
    background: green;
  }
</style>

<body>
  <div id="app">
    <!-- 主要是v-bind的使用 -->
    <div v-bind:class="{ active: isActive }"></div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        isActive: true
      }
    })
  </script>
  • 多樣式綁定：
<style>
  .active {
    width: 100px;
    height: 100px;
    background: green;
  }

  .text-danger {
    background: red;
  }
</style>

<body>
  <div id="app">
    <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        isActive: true,
        hasError: false
      }
    })
  </script>

組件

組件是整個vue知識體系中最重要的一個模塊
組件的作用是：復用
前端路由相對于傳統(tǒng)路由 請求少 節(jié)省資源
mode:history //不使用html5 實現(xiàn)前進和后退 默認設置
關于組件的引用 除了直接引用自定義標簽 is標簽也可以引用組件到指定的位置,動態(tài)綁定組件

全局組件

<div id="app">
    <runoob></runoob>
  </div>

  <script>
    // 注冊  此中注冊方式為全局組件 所有的外部組件中都可以引用
    Vue.component('runoob', {
      template: '<h1>自定義組件!</h1>'
    })
    // 創(chuàng)建根實例
    new Vue({
      el: '#app'
    })
  </script>

局部組件

區(qū)分于全局組件

<div id="app">
    <runoob></runoob>
</div>

<script>
var Child = {
  template: '<h1>自定義組件!</h1>'
}

// 創(chuàng)建根實例
new Vue({
  el: '#app',
  components: {
    // <runoob> 將只在父模板可用
    'runoob': Child
  }
})
</script>

template

template 模版 用來承載dom樹 常在組件中使用

props

自定義組件屬性：通過props申明屬性 可以通過v-bind動態(tài)綁定自定義屬性

  <div id="app">
    <child message="hello!"></child>
  </div>

  <script>
    // 注冊
    Vue.component('child', {
      // 聲明 props
      props: ['message'],
      // 同樣也可以在 vm 實例中像 “this.message” 這樣使用
      template: '<span>{{ message }}</span>' //可以這樣理解：此處message既是屬性也是變量
    })
    // 創(chuàng)建根實例
    new Vue({
      el: '#app'
    })
  </script>

動態(tài)props

通過v-bind實現(xiàn)

<div id="app">
    <div>
      <input v-model="parentMsg">
      <br>
      <!-- 通過v-bind綁定父組件中的parentMsg 實現(xiàn)動態(tài)綁定-->
      <child v-bind:message="parentMsg"></child>
    </div>
  </div>

  <script>
    // 注冊
    Vue.component('child', {
      // 聲明 props
      props: ['message'],
      // 同樣也可以在 vm 實例中像 “this.message” 這樣使用
      template: '<span>{{ message }}</span>'
    })
    // 創(chuàng)建根實例
    new Vue({
      el: '#app',
      data: {
        parentMsg: '父組件內容'
      }
    })
  </script>

組件間交互

父組件往子組件傳入數(shù)據(jù)使用props 反過來則用emit

父傳子：
子組件props定義屬性 子組件標簽引用v-bind將父組件參數(shù)與子組件屬性綁定

    <div id="counter-event-example">
      <button-todo v-bind:todo="item"></button-todo>
    </div>

    <script>
      Vue.component('button-todo', {
        props: ['todo'],
        template: '<button >{{ todo }}</button>'
      })
      new Vue({
        el: '#counter-event-example',
        data: {
          item: '我是item'
        }
      })
    </script>

子傳父：
父組件定義method：fv_fuc 接受參數(shù)arg
子組件 this.$.emit(<fuc>,<arg>)
子組件標簽引用 v-on：<fuc>="fv_fuc"
流程： 子組件的emit觸發(fā)標簽引用的fuc繼而觸發(fā)父組件的fv_fuc

  <div id="app">
      <div id="counter-event-example">
        <p>{{ counter }}</p>
        <button-counter v-on:increment="setCounter"></button-counter>
      </div>
    </div>

    <script>
      Vue.component('button-counter', {
        template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
        data: function() {
          return {
            counter: 0
          }
        },
        methods: {
          incrementHandler: function() {
            this.counter += 1
            this.$emit('increment', this.counter)
          }
        },
      })
      new Vue({
        el: '#counter-event-example',
        data: {
          counter: 0
        },
        methods: {
          setCounter: function(somedata) {
            this.counter = somedata //接收子組件的數(shù)據(jù)
          }
        }
      })
    </script>

自定義指令

directive 定義指令名稱
inserted 當綁定元素插入到dom中會觸發(fā)

<div id="app">
    <p>頁面載入時脖岛，input 元素自動獲取焦點：</p>
    <input v-focus>
  </div>

  <script>
    // 注冊一個全局自定義指令 v-focus
    Vue.directive('focus', {
      // 當綁定元素插入到 DOM 中。
      inserted: function(el) {
        // 聚焦元素
        el.focus()
      }
    })
    // 創(chuàng)建根實例
    new Vue({
      el: '#app'
    })
  </script>

vue.directive定義全局指令 directives: {}的方式定義局部指令 這點和component(組件)相似

  <div id="app">
    <p>頁面載入時，input 元素自動獲取焦點：</p>
    <input v-focus>
  </div>

  <script>
    // 創(chuàng)建根實例
    new Vue({
      el: '#app',
      directives: {
        // 注冊一個局部的自定義指令 v-focus 和components的使用相似
        focus: {
          // 指令的定義
          inserted: function(el) {
            // 聚焦元素
            el.focus()
          }
        }
      }
    })
  </script>

directive可以和鉤子函數(shù)配合使用 不需要鉤子函數(shù)也可以簡寫 第二個參數(shù)是function，默認的第一個參數(shù)是el

  Vue.directive('runoob', {
      // 綁定bind的鉤子函數(shù)
      bind: function(el, binding, vnode) {
        var s = JSON.stringify
        el.innerHTML =
          'name: ' + s(binding.name) + '<br>' +
          'value: ' + s(binding.value) + '<br>' +
          'expression: ' + s(binding.expression) + '<br>' +
          'argument: ' + s(binding.arg) + '<br>' +
          'modifiers: ' + s(binding.modifiers) + '<br>' +
          'vnode keys: ' + Object.keys(vnode).join(', ')
      }
    })
    new Vue({
      el: '#app',
      data: {
        message: '菜鳥教程!'
      }
    })
  </script>

路由

路由：
需要下載 vue_router庫 然后vue.use(VRouter)
使用步驟：
1.定義路由組件
2.定義路由:映射組件
3.通過routes配置新建router實例
4.通過router參數(shù)注入路由 并且掛載根實例

頁面跳轉 rooter-link

<!-- 導入路由用到的js -->
<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
  <div id="app">
    <h1>Hello App!</h1>
    <p>
      <!-- 使用 router-link 組件來導航. -->
      <!-- 通過傳入 `to` 屬性指定鏈接. -->
      <!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
      <router-link to="/foo">Go to Foo</router-link>
      <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的組件將渲染在這里 -->
    <router-view></router-view>
  </div>

  <script>
    // 0. 如果使用模塊化機制編程，導入Vue和VueRouter合武，要調用 Vue.use(VueRouter)

    // 1. 定義（路由）組件稼跳。
    // 可以從其他文件 import 進來
    const Foo = {
      template: '<div>foo</div>'
    }
    const Bar = {
      template: '<div>bar</div>'
    }

    // 2. 定義路由
    // 每個路由應該映射一個組件。 其中"component" 可以是
    // 通過 Vue.extend() 創(chuàng)建的組件構造器红淡，
    // 或者在旱，只是一個組件配置對象颈渊。
    // 我們晚點再討論嵌套路由俊嗽。
    const routes = [{
        path: '/foo',
        component: Foo
      },
      {
        path: '/bar',
        component: Bar
      }
    ]

    // 3. 創(chuàng)建 router 實例，然后傳 `routes` 配置
    // 你還可以傳別的配置參數(shù), 不過先這么簡單著吧竹揍。
    const router = new VueRouter({
      routes // （縮寫）相當于 routes: routes
    })

    // 4. 創(chuàng)建和掛載根實例芬位。
    // 記得要通過 router 配置參數(shù)注入路由，
    // 從而讓整個應用都有路由功能
    const app = new Vue({
      router
    }).$mount('#app')

    // 現(xiàn)在被饿，應用已經(jīng)啟動了！
  </script>

路由參數(shù)

在映射表里設置 如：path：'/apple/:color'

ex6 語法

import 配合export default使用以page的形式導出組件 這都是ex6的語法
另外一種寫法： 區(qū)別與上一種寫法 需要 {} 的使用

let com={ //let 在當前作用域下聲明一個變量,不會泄漏到外部  區(qū)別與var const：常量
}
export { com } //注意{}的使用
引用的時候：
import { com } from ...

腳手架

vue-cli 官方腳手架工具

優(yōu)勢

  • 成熟的vue項目架構設計
  • 本地測試服務器 熱加載服務器 熱更新
  • 集成打包上線方案 webpack

系統(tǒng)要求：
node>4.0

指令

vue list:查看模版方案
vue init webpack demo 利用腳手架 初始化項目

項目結構

利用vue_lic生成的項目結構：
build: 項目構建(webpack)相關代碼
config：配置目錄 包括端口號等 初學可以使用默認的
node_modules :npm 加載的項目依賴模塊
src：源碼 包含幾個目錄及文件：

  • assets :放置一些圖片 logo
  • components :放置一個組件文件 可以不使用
  • App.vue : 項目入口文件 可以直接把組件寫在這里 取代 components目錄
  • main.js :項目的核心文件

.****文件 配置文件 包括語法配置 git配置
static：靜態(tài)文件 資源目錄 如圖片 字體等
package.json :npm需要的一套配置文件
index.html: 首頁文件入口 可以添加一些meta信息或者統(tǒng)計代碼

npm run build：此指令用于生成部署用的文件 文件會存在dist中

創(chuàng)建項目

步驟：

  • vue init webpack Vue-Project
  • 根據(jù)提示配置項目信息
  • cd 到項目下 執(zhí)行npm install：安裝相關依賴 此處需要翻墻
  • npm run dev :運行項目

有時候瀏覽器打不開頁面可能是端口被占用
更換端口：


更換端口.png

mac下查詢端口占用情況 例如查看8081端口：
lsof -i tcp:8081

細節(jié)雜記

字符串反轉：

message.split('').reverse().join('')

"-" 命名的屬性引用時必須使用單引號

vue中可以綁定對象 也可以綁定對象的計算屬性
例子：

<div id="app">
  <div v-bind:class="classObject"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
  isActive: true,
  error: null
  },
  computed: {
    classObject: function () {
      return {
        active: this.isActive && !this.error,
        'text-danger': this.error && this.error.type === 'fatal',
      }
    }
  }
})
</script>

內聯(lián)樣式的兩種寫法：

  • 在html中直接{}
  • 在css中定義class 然后html中引用

關于導出組件的data中采用函數(shù)return data的方式 形成自己的實例 防止復用沖突

vue2.0 如果需要js的完全編程能力 必須使用render渲染外部引入的app組件 區(qū)別與template更接近與編譯器

template 寫 html撼泛，script寫 js损俭，style寫樣式雁仲，一個template只能有一個div

除了數(shù)據(jù)屬性，Vue 實例還提供了一些有用的實例屬性與方法吹艇。它們都有前綴 $，以便與用戶定義的屬性區(qū)分開來,例如：

  <div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>Alexa : {{alexa}}</h1>
  </div>
  <script type="text/javascript">
    // 我們的數(shù)據(jù)對象
    var data = {
      site: "菜鳥教程",
      url: "www.runoob.com",
      alexa: 10000
    }
    var vm = new Vue({
      el: '#vue_det',
      data: data
    })

    document.write(vm.$data === data) // true  使用的時候需要前綴$
    document.write("<br>") // true
    document.write(vm.$el === document.getElementById('vue_det')) // true
  </script>
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌廉嚼，老刑警劉巖，帶你破解...
    沈念sama閱讀 218,284評論 6贊 506
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件矫夷，死亡現(xiàn)場離奇詭異阳仔，居然都是意外死亡近范，警方通過查閱死者的電腦和手機叶堆，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門忘渔，熙熙樓的掌柜王于貴愁眉苦臉地迎上來辨萍，“玉大人义起，你說我怎么就攤上這事椅棺。” “怎么了？”我有些...
    開封第一講書人閱讀 164,614評論 0贊 354
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經(jīng)常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,671評論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任堤框，我火速辦了婚禮域滥，結果婚禮上，老公的妹妹穿的比我還像新娘蜈抓。我一直安慰自己启绰，他們只是感情好沟使，可當我...
    茶點故事閱讀 67,699評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布委可。 她就那樣靜靜地躺著，像睡著了一般腊嗡。 火紅的嫁衣襯著肌膚如雪着倾。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,562評論 1贊 305
  • 城市分裂傳說
    那天燕少，我揣著相機與錄音卡者，去河邊找鬼。 笑死客们，一個胖子當著我的面吹牛崇决，可吹牛的內容都是我干的。 我是一名探鬼主播底挫，決...
    沈念sama閱讀 40,309評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼恒傻，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了建邓？” 一聲冷哼從身側響起盈厘，我...
    開封第一講書人閱讀 39,223評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎官边，沒想到半個月后扑庞，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體睹限，經(jīng)...
    沈念sama閱讀 45,668評論 1贊 314
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡会钝，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,859評論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片还绘。...
    茶點故事閱讀 39,981評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖辉懒，靈堂內的尸體忽然破棺而出屈糊，到底是詐尸還是另有隱情，我是刑警寧澤租悄，帶...
    沈念sama閱讀 35,705評論 5贊 347
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布谨究，位于F島的核電站，受9級特大地震影響泣棋，放射性物質發(fā)生泄漏胶哲。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 41,310評論 3贊 330
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一潭辈、第九天 我趴在偏房一處隱蔽的房頂上張望鸯屿。 院中可真熱鬧，春花似錦把敢、人聲如沸寄摆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,904評論 0贊 22
  • 一樁弒父案修赞，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽婶恼。三九已至，卻和暖如春柏副，著一層夾襖步出監(jiān)牢的瞬間勾邦，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,023評論 1贊 270
  • 情欲美人皮
    我被黑心中介騙來泰國打工割择， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留检痰，地道東北人。 一個月前我還...
    沈念sama閱讀 48,146評論 3贊 370
  • 代替公主和親
    正文 我出身青樓锨推，卻偏偏與公主長得像铅歼，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子换可，可洞房花燭夜當晚...
    茶點故事閱讀 44,933評論 2贊 355

推薦閱讀更多精彩內容

  • vue學習筆記 安裝 Vue 提供一個官方命令行工具椎椰，可用于快速搭建大型單頁應用。只需幾分鐘即可創(chuàng)建并啟動一個帶熱...
    EL_PSY_CONGROO閱讀 1,059評論 0贊 5
  • 項目腳手架 在這里我使用vue-cli來進行安裝 查看項目結構沾鳄，index.html/main.js是項目入口慨飘，A...
    等酒香醇V閱讀 717評論 0贊 1
  • 個人基于對 Vuejs 的學習制作了一個 Todo 單頁應用 Lightodo，功能包括：添加待辦事項卡片，對卡片...
    AlessiaLi閱讀 21,564評論 16贊 308
  • 父 => 子 傳值 父組件中定義屬性 <com-a :aaa="parm"> ,子組件通過 props:['aaa...
    _月光臨海閱讀 395評論 0贊 0
  • Vue學習筆記 Vue初始化對象 data和methods里面的屬性都是Vue這個實例對象的代理屬性,例:vm.m...
    土豪碼農閱讀 1,001評論 1贊 1