系列文章目錄
提示：vue是什么，宣告和渲染，讀取data資料，小案例：“切換壁紙”，表格的增刪改查，組件
文章目錄
- 系列文章目錄
- 前言
- 一、vue是什么？
- 二、使用步驟
- 1.宣告和渲染
- 2.讀取data資料物件
- ３.v-if回圈
- ４.小案例＿”切換壁紙“
- 三、計算屬性
- 四、偵聽器
- 五、表格的CRUD
- 六.組件
- 總結
前言
：hello 大家好！ 一起看下Vue.js 吧！
提示：以下是本篇文章正文內容，下面案例可供參考
一、vue是什么？
Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架，與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用，Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有專案整合，
vue官網
二、使用步驟
1.宣告和渲染
代碼如下（第一個vue應用）：
<body>
<!-- el元素命中的內部 -->
<!-- 建議使用id選擇器 其他類 標簽 選擇器也可以 -->
<!-- 其他標簽 除了div可以嗎 可以，但是只能支持雙標簽 但是也有特殊情況：比如
-- 如果是div 那么默認就是選擇的是第一個div
-->
<div id="app" class="app">
{{ message }}
<p>{{age ++ }}</p>
<span> {{message}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
// el:"#app",
// el:".app",
el:'div',
data:{
age:10,
message:"谷歌"
}
})
</script>
</body>
Vue 應用會將其掛載到一個 DOM 元素上 (對于這個例子是 #app) 然后對其進行完全控制，那個 HTML 是我們的入口，但其余都會發生在新創建的 Vue 實體內部，
2.讀取data資料物件
<body>
<div id="app">
{{message}}
<h2>{{schoole.name}} {{schoole.mobile}} </h2>
<ul>
<li>{{ campus[0] }}</li>
<li>{{ campus[1] }}</li>
<li>{{ campus[2] }}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:'hello',
schoole:{
name:'hello',
mobile:"400-789-0909"
},
campus:["小明","小李","小張"],
}
})
</script>
</body>
data:資料物件 vue中用到的資料定義在data中 ，data中可以寫復雜型別的資料 渲染復雜型別的資料時，遵守js的語法即可 物件的obj.name 陣列的[0]
３.v-if回圈
例如，v-for 指令可以系結data的資料來顯示：
<body>
<div id="app">
<h1 v-if="isMary">ｈａｈａ</h1>
<h1 v-else>hello world</h1>
<div v-if="type">v-if</div>
<div v-show="type">v-show</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
isMary: false,
type: true
},
})
</script>
</body>
４.小案例＿”切換壁紙“
<body>
<div id="app" :style="{backgroundImage:bgImg}">
<nav>
<img src="./images/1.jpg" v-on:click="changeBg('./images/1.jpg')" alt="">
<img src="./images/2.jpg" v-on:click="changeBg('./images/2.jpg')" alt="">
<img src="./images/3.jpg" v-on:click="changeBg('./images/3.jpg')" alt="">
</nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
bgImg: 'url(./images/1.jpg)'
},
methods: {
changeBg: function (url) {
console.log(url);
// 切換 bgImg 的值為當前點擊的圖片的路徑
this.bgImg = `url(${url})`
}
}
})
</script>
</body>
三、計算屬性
<body>
<div id="app">
<table>
<thead>
<tr>
<th>編號</th>
<th>標題</th>
<th>發表時間</th>
</tr>
</thead>
<tbody>
<tr v-for="item in blogListFormat">
<td>{{item.id}}</td>
<td>{{item.title}}</td>
<td>{{item.create_time}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script>
/*
*/
let app = new Vue({
el: '#app',
data: {
blogList: [
{ id: 1, title: '今天真的好冷', create_time: 1614665768000 },
{ id: 2, title: '明天氣溫就回升了', create_time: 1614579284000 },
{ id: 3, title: '春暖花開', create_time: 1583043284000 }
]
},
// 用戶自定義的方法
methods: {
// formatTime: function (a) {
// return a
// }
},
//計算屬性
computed : {
blogListFormat :function (){
this.blogList.forEach(item =>{
item.create_time = moment((item.create_time)).format('YYYY-MM-DD HH:mm:ss')
})
return this.blogList
}
}
})
</script>
</body>
data 中和 compoted 中都叫做屬性，也就是說 numbers 和 reversednumbers 都叫做屬性
1、data 中的屬性的值是一個數字、字串、物件、陣列等靜態值
2、compited 中的屬性叫做計算屬性，其值是一個匿名函式
3、匿名函式一定要回傳一個值，作為這個屬性的值
四、偵聽器
雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器，這就是為什么 Vue 通過watch 選項提供了一個更通用的方法，來回應資料的變化，當需要在資料變化時執行異步或開銷較大的操作時，這個方式是最有用的
vue 中的計算屬性是不支持異步操作的，只能計算一些同步的值，但是可以使用 vue-async-computed 插件實作這一點
那為什么不直接使用偵聽器呢？
<body>
<div id="app">
<input type="text" v-model="age">
<br>
<span>{{message}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
age: 20,
message: ''
},
methods: {},
computed: {},
watch: {
age: function (newValue, oldValue) {
// 當 age 屬性發生變化時，就會執行這個函式
if (newValue >= 12) {
this.message = '12雖已經到了入刑年齡'
} else {
this.message = '還不到入刑年齡'
}
}
}
})
</script>
</body>
用戶在文本框中輸入年齡
1、如果年齡>=12，span中就顯示“12雖已經到了入刑年齡”
2、如果年齡<12歲，span中就顯示“還不到入刑年齡”
五、表格的CRUD
六.組件
在注冊一個組件的時候，我們始終需要給它一個名字，
確切的說，只要有UI層的展示，就必定有可以組件化的地方，簡單來說，組件就是將一段UI樣式和其對應的功能作為獨立的整體去看待，無論這個整體放在哪里去使用，它都具有一樣的功能和樣式，從而實作復用，這種整體化的細想就是組件化，不難看出，組件化設計就是為了增加復用性，靈活性，提高系統設計，從而提高開發效率Vue.component(‘my-component-name’, { /* … */ })
- 使用組件
<div id="app">
<list-item></list-item>
</div>
- 案例
總結
提示：這里對文章進行總結：
例如：以上就是今天的內容，本文僅僅簡單介紹了Vue的基本使用，vue提供了大量能使我們快速便捷地處理資料的方法， 原創不易，歡迎回訪
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/266786.html
標籤：其他