vue-02-安裝-指令

1, vue安裝

1), 安裝vue-cli

npm install -g cnpm --registry=https://registry.npm.taobao.org

之后可以用 淘寶的npm鏡像安裝
cnpm install vue-cli -g

# -g  等價於 --global

2), 初始化項目, 創建基於webpack的模版

vue init webpack lisa-yoga-baby

路由: n, Eslink(代碼檢查): n, test: n, Nighwatch: n

3), 進入項目

cd lisa-yoga-baby

4), 安裝依賴, 根據package.json安裝

npm install

5), 啟動項目

npm run dev

6), 打包

npm run build

 

2, 項目目錄結構

index.html: 項目根目錄視圖

.postcssrc.js　　postcss 配置文件

static: 　　　　靜態文件目錄, 服務器啟動后可以直接訪問到

src: 　　　　　源碼文件

config: 　　　  配置文件

build: 　　　　服務器到配置文件

3, 模板語法: 

Mustache: 模板

表現形式: {{ 語法 }}

{{ hello }}
通過下面的 script進行返回
<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: 'Hello Vue'
      }
    }
  }
</script>

2), 可以做運行

{{ 1 + 1 }}
{{ 0 < 10 ? "true" : "false" }}

3), 只能存在單行語句

 

4, vue組件, 包含3個內容

1), 視圖部分

<template>
  <div class="hello">
    {{ msg }}
  </div>
</template>

 

2), 邏輯部分

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: 'Hello Vue'
      }
    }
  }
</script>

 

3), 樣式部分

<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>

 

5, 基本命令

指令的簡寫形式  v-bind:key=‘’  簡寫為    :key=‘’

1), v-text

<p v-text="msg">text</p>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: '<p>Hello Vue</p>',
        flag: ' i am flag'
      }
    }
  }
</script>

不能解析html標簽, 原樣輸出 

2), v-html

<div v-html="msg"></div>

解析標簽為 html的元素

3),  v-bind 綁定

<span v-bind:class="bind_ha">hahaha a</span>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: '<p>Hello Vue</p>',
        flag: ' i am flag',
        bind_ha: "ha111"
      }
    }
  }
</script>

可通過 v-bind, 更改 html標簽的 內置屬性

雙花括號 {{ }} 不可以用來更改html的內斂標簽

4), v-if 條件渲染

    <!--v-if 屬性-->
    <div>
      <p v-if="show">if can see</p>
      <p v-else-if="show"> else if can see </p>
      <p v-else="!show">else can see </p>
    </div>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: '<p>Hello Vue</p>',
        flag: ' i am flag',
        bind_ha: "ha111",
        show: false
      }
    }
  }
</script>

 5), v-show  和v-if 類似, 但沒有else

<div>
      <p v-show="show"> show can see </p>
    </div>

v-if 是惰性的, v-show總是被渲染, 且基於css 進行切換

頻繁切換使用 v-show

6), v-for 循環渲染, 針對數組進行渲染

<!--v-for-->
    <div>
      <ul>
        <li v-for="(name, index) in names" v-bind:index="index">{{ name.name }} : {{ name.age }}</li>
      </ul>
    </div>

使用 v-for進行遍歷, 使用 v-bind 進行name, id之類的綁定

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: '<p>Hello Vue</p>',
        flag: ' i am flag',
        bind_ha: "ha111",
        show: false,
        names: [{name: 'vini', age: 24}, {name: 'wenbronk', age: '26'}, {name: 'lisa', age: '25'}]
      }
    }
  }
</script>

 7), v-on: 事件監聽

簡單事件

<div>
      <button v-on:click="num += 1"> 按鈕</button>
      <p> {{ num }}</p>
    </div>

<script> 
num: 1, </>

 事件參數:  methods: 

 

    <!--methods -->
    <div>
      <button v-on:click="handlerClick"> methods 按鈕 </button>
    </div>

放在data的同級下

<script>
  export default {
    name: 'hello',
    data() {
      return {
        names: [{name: 'vini', age: 24}, {name: 'wenbronk', age: '26'}, {name: 'lisa', age: '25'}],
        num: 1,
      }
    },

　　handlerClick() {
  　　　　alert("事件1 ")
  　　　　// 去上面data的值, this索引當前data中的數據
  　　　　this.show = !this.show
　　}

 } </script>

事件修飾符: 

.stop　　阻止時間冒泡

.prevent 阻止事件

.capture

.self

.once　　只生效一次

 只需要在 on.click后添加, 即可

<li v-on:click.once="getItemInfo(index, $event)" v-for="(name, index) in names">{{ name }}</li>

鍵盤監聽: 

<div>
  <input type="text" v-on:keyup="getKeyInfo"/>
  <!--只有enter才會監聽-->
  <input type="text" v-on:keyup.enter="getKeyInfo"/>
</div>

 

 methods: {
      getItemInfo(index, event) {
          console.log(this.names[index]);
         console.log(event);
      },
      getKeyInfo(event) {
        console.log(event.keyCode)
        console.log(event.key)
      }
    }

此外還提供了例如

.enter,   .tab　　.delete　　.esc　　.space　　.up　　.down　　.left　　.right 等多個快捷監聽, 

只有相應的按鍵才會被觸發

<input type="text" v-on:keyup.enter="getKeyInfo"/>

 8), 數組動態更新

數據變化可以引起視圖的變化

 <div>
      <button v-on:click="pushArr">pushArr</button>
    </div>

pushArr() {
        this.names.push("wenbronk")
      }

但有些方法無法引起視圖的變化

filter, concat, split等

不會修改原數組變化

方法的簡寫

@ 代替  v-on:   

6, 計算屬性

1), 如果一個methods在多個地方需要調用, 可以使用計算屬性  

 但計算屬性相對於methods, 可以進行緩存結果, 多次訪問 methods可以立刻返回緩存結果

computed: {
       msgRe() {
         return this.message.split('').reverse().join('');
       }
    }

 

<!--觀察這-->
    <div>
      <p> {{ msgRe}}</p>
    </div>

2), 表單計算綁定  v-model

雙向數據綁定

使輸入的內容可以立刻獲取

<!--表單數據綁定， 數據立馬顯示在下面-->
    <div>
      <input type="text" v-model="msg"/>
      <p> {{ msg }}</p>
    </div>

script

export default {
    name: "a03_computed",
    data() {
      return {
        message: "hello every body",
        msg: ""
      }
    },

如果要實時監聽數據

   data() {
      return {
        message: "hello every body",
        msg: ""
      }
    },

    methods: {},

    computed: {
      msgRe() {
        return this.message.split('').reverse().join('');
        // return this.message.split('').reverse().concat('');
      }
    },
    watch: {
      msg: function (data) {
        console.log(data + "   data 就是你輸入的額信息")
      }
    }

在data同級 加 watch

3), 修飾符

lazy, 失去焦點了在使用,  v-model.lazy='msg'

number, 　轉換為number類型的時候, 才處理

.trim,