Web前端-Vue.js必備框架（三）

時間 2019-11-14

標籤 web 前端 vue.js vue 必備框架欄目 HTML 简体版

原文原文鏈接

Web前端-Vue.js必備框架（三）javascript

vue是一款漸進式javascript框架，由evan you開發。vue成爲前端開發的必備之一。css

vue的好處輕量級，漸進式框架，響應式更新機制。html

開發環境，瀏覽器使用chrome，ide：vs code或者webstorm，node.js8.9+，npm等前端

uni-app直接使用<script>引入vue.js，vue會被註冊爲一個全局變量，開發環境不要使用壓縮版本，一：開發版本有完整的警告和調式模式，二：生產版本刪除了警告。vue

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

生產環境：java

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.js"></script>

開發：node

<!DOCTYPE html>
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" type="text/css" media="screen" href="main.css">
 <script src="main.js"></script>
</head>
<body>
<div id="app">
 {{ message }}
 <ol>
  <todo-item v-for="item in arrList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
 </ol>
</div>

 <script src="https://cdn.jsdelivr.net/vue@2.6.8/dist/vue.js"></script>

<script>
 Vue.component('todo-item', {
  props: ['todo'],
  template: '<li class="text"> {{ todo.text }} </li>'
 })
 var app = new Vue({
  el: '#app',
  data: {
   message: 'hello',
   arrList: [{
     id: 0,
     text: 'da'
   },{
     id: 1,
     text: 'shu'
   }]
  }
 })
</script>
 </body>
</html>

<body>
 <div id="app">
  {{message}}
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.js"></script>
 <script>
  var app = new Vue({
   el: '#app',
   data: {
    message: 'hello',
   }
  })
 </script>
</body>

vue CLI
npm install -g @vue/cli
vue create hello
cd hello
npm run serve

屬性：自定義屬性，原生屬性，特殊屬性。web

組件中props中聲明屬性。chrome

vue組件=vue實例=new Vue(options)

每個vue組件都是一個vue實例，vue實例經過new vue函數建立的。vue-cli

事件：普通事件，修飾符事件。

@click @input @change 普通事件

@input.trim @click.stop @submit.prevent 修飾符事件

<template>
 <div>
  name: {{ name || "--" }}
  <br/>
  <input :value="name" @change="handleChange"/>
  <br/>
  <div @click="handleDivClick">
   <buttom @click="handleClick">成功</button>&nbsp;
   <button @click.stop="handleClick">失敗</button>
  </div>
 </div>
</template>

<script>
export default {
 name: "EventDemo",
 props: {
  neme: String
 },
 methods: {
  handleChange(e) {
   this.$emit("change",  e.targer.value);
  },
  handleDivClick() {
   this.$emit("change", "");
  },
  handleClick(e) {
   //e.stopPropagation();
  }
 }
};
</script>

插槽：普通插槽和做用域插槽。

<template slot="#"></template>
<template v-slot:#></template>

<template slot="#" slot-scope="props"></template>
<template v-slot:#="props'></template>

<a-tab-pane key="event" tab="事件">
 <Event :name="name" @change="handleEventChange"/>
</a-tab-pane>

<a-tab-pane key="slot" tab="插槽">
 <h2>新語法</h2>
 <$lotDemo>
  <p></p>
  <template v-slot:title>
  <p>title</p>
  <p>tiltle</p>
  </template>
  <template v-slot:item="props">
   <p>item {{ props }} </p>
  </template>
 <$lotDemo>
 <br/>
</a-tab-pane>

<template>
 <div>
 <slot/>
 <slot name="title"/>
 <slot name="item" v-bind="{ value: 'vue' }"/>
 </div>
</template>

<script>
export default {
 name: "SlotDemo"
};
</script>

小結：

屬性，自定義屬性：props，原生屬性：attrs，特殊屬性：class，style。

事件：普通事件，修飾符事件。
插槽：普通插槽，做用域插槽。

雙向綁定：

model數據的更新會致使view視圖的更新，view視圖的更新會致使model數據的更新。但vue是單向數據流，Object.defineProperty響應式更新。

// 語法糖
<Personalnfo
 v-model="phoneInfo"
 :zip-code.sync="zipCode"
/>

<PersonalInfo
 :phone-info="phoneInfo"
 @change="val => (phoneInfo = val)"
 :zip-code="zipCode"
 @update:zipCode="val => (zipCode=val)"
/>

狀態data和屬性props

狀態是組件自身的數據，屬性來自父組件的數據。
狀態和屬性的改變都未必會觸發更新。

好了！下面開講：

開發環境版本：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生產環境版本：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

新手不建議用vue-cli哦！

數據渲染：

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

<div id="app-2">
  <span v-bind:title="message">
    鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
  </span>
</div>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '頁面加載於 ' + new Date().toLocaleString()
  }
})

<div id="app-3">
  <p v-if="seen">如今你看到我了</p>
</div>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '學習 1' },
      { text: '學習 2' },
    ]
  }
})

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆轉消息</button>
</div>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello dashucoding!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'dashucoding!'
  }
})

組件化：

<div id="app-7">
  <ol>
    <!--
      如今咱們爲每一個 todo-item 提供 todo 對象
      todo 對象是變量，即其內容能夠是動態的。
      咱們也須要爲每一個組件提供一個「key」，稍後再
      做詳細解釋。
    -->
    <todo-item
      v-for="item in gList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    gList: [
      { id: 0, text: '123' },
      { id: 1, text: '456' }
    ]
  }
})

建立一個 Vue 實例

var vm = new Vue({
  // 選項
})

$用於區分與用戶定義的屬性。

v-once執行一次性插值，數據改變後，不會再改變。
v-bind:

修飾符：

<form v-on:submit.prevent="onSubmit">...</form>

v-bind和v-on

<!-- 完整語法 -->
<a v-bind:href="url"></a>

<!-- 縮寫 -->
<a :href="url"></a>

<!-- 完整語法 -->
<a v-on:click="do"></a>

<!-- 縮寫 -->
<a @click="do"></a>

結言

好了，歡迎在留言區留言，與你們分享你的經驗和心得。

感謝你學習今天的內容，若是你以爲這篇文章對你有幫助的話，也歡迎把它分享給更多的朋友，感謝。

做者簡介

達叔，理工男，簡書做者&全棧工程師，感性理性兼備的寫做者，我的獨立開發者，我相信你也能夠！閱讀他的文章，會上癮！，幫你成爲更好的本身。長按下方二維碼可關注，歡迎分享，置頂尤佳。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。