vue template 圖檔_VUE 的使用，學會這些就足夠了！| 原力計劃

作者 |  敲出億行bug 責編 | 夕顔 出品 | CSDN部落格

Vue.js 是什麼?

vue是一套用于建構使用者界面的漸進式架構。與其它大型架構不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫隻關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鍊以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。

vue執行個體

Vue.js 的核心是一個允許采用簡潔的模闆文法來聲明式地将資料渲染進 DOM 的系統。

1、在檔案中引入vue.js，下面兩種方式選擇其中一種

2、建立簡單的vue執行個體對象

//調用vue中的資料

{{message}}

//下面的兩種書寫方式結果相同

click

click01

var ve= new Vue({el:'#app',data:{message:'hello',},methods:{click:function(){alert("你好，世界");}}});

vue常用指令

1、v-on：綁定事件監聽器，事件的類型由參數決定

例如：v-on：事件名稱

或者@事件名稱

2、v-if/v-else-if/v-else判斷指令：根據表達式的值，進行渲染

例如：

//isshow為true時，标簽内的内容顯示到頁面

{{isshow}}ok

new Vue({el:'#app',data:{message:'hello',isshow:true,},methods:{click:function(){alert("你好，世界");}}});

3、v-model：資料綁定指令(一般為表單輸入綁定)

//v-model 指令在表單、 及  元素上建立雙向資料綁定{{message}}
           

文本框裡的内容與外面的内容綁定

4、v-for：循環(可以多層嵌套顯示和java中的for循環原理一緻)

v-for格式：

{{item}}  li>
           

其中：item是被疊代數組元素的别名

items是源資料數組

使用 item in items 的特殊格式文法

{{item}}

{{item}}

{{item}}

new Vue({el:'#demo',data:{items:[23,23,344,45],arr1:{"a":[1,2,3],"b":[2,2,3]},},methods:{}});

運作結果如圖

5、v-bind：動态綁定屬性

使用格式

v-bind:屬性名=“data資料對象中的值”

簡寫

：屬性名=“data資料對象中的值”

.child{width: 50px;height: 50px;background-color: gray;color: black;}
           

//動态綁定了imges屬性，img改變了圖檔，那麼img标簽也會改變

div6

//div區域的顯示根據isshow的值來判定

new Vue({el:'#app',data:{isshow:true,img:'111.png',}})

生命周期函數|鈎子函數

1、生命周期函數

beforecreated:加一些loading事件

created：結束loading事件，還做一些初始化，實作函數自執行

mounted：發起後端請求，取回資料

接受頁面之間傳遞的參數

子元件向父元件傳遞參數

2、下面用一個生命周期函數示範的執行個體

{{message}}

changemessage

var ve =new Vue({el:'#demo',data:{message:'vue生命周期',},beforeCreate:function(){console.group("------------beforecreate-----------")console.log('el:'+this.$el)console.log('data:'+this.$data)console.log('message:'+this.message)},created:function(){console.group("------------created-----------")console.log('el:'+this.$el)console.log('data:'+this.$data)console.log('message:'+this.message)},beforeMount:function(){console.group("------------beforemount-----------")console.log('el:'+this.$el)console.log('data:'+this.$data)console.log('message:'+this.message)},mounted:function(){console.group("------------mounted-----------")console.log('el:'+this.$el)console.log('data:'+this.$data)console.log('message:'+this.message)},beforeUpdate:function(){console.group("------------beforeupdate-----------")console.log('el:'+this.$el)console.log('data:'+this.$data)console.log('message:'+this.message)},updated:function(){console.group("------------updated-----------")console.log('el:'+this.$el)console.log('data:'+this.$data)console.log('message:'+this.message)},beforeDestroy:function(){console.group("------------destotry-----------")console.log('el:'+this.$el)console.log('data:'+this.$data)console.log('message:'+this.message)},destroyed:function(){console.group("------------destroyed-----------")console.log('el:'+this.$el)console.log('data:'+this.$data)console.log('message:'+this.message)},methods:{changemessage:function(){this.message='666'}}});//銷毀是在執行個體外面調用的ve.$destroy()

實際的效果

點選changemessage按鈕

vue元件

借用官網的一張圖。

1、為什麼使用元件？

使用元件一方面可以不用去直接修改标簽，另一方面也會優化頁面顯示。

注意:元件在執行個體前面書寫

2、全局元件

{{message}}

Vue.component("all",{template:'

{{name}}

',// template:'#box1',data:function(){return{name:'李四'}}})var ve = new Vue({el:"#box",data:{message:'hello'}});

3、局部元件:局部元件放在執行個體中

父子元件可以嵌套使用

父子元件間作用域互相獨立

子元件隻能在父元件的模闆中進行調用

子元件是父元件細化拆分的過程

父元件向子元件傳值通過props進行

下面的示例中包含了父元件向子元件傳值的功能

var ve = new Vue({el:'#box',data:{},//父級components:{'test':{template:"#box1",data:function(){return{message:'aaa'}},//子級components:{'box1':{template:"#box2",//子級想将父級的一個值，作為自己的一個局部變量data:function(){return{mymsg:this.msg}},//計算屬性computed:{mymsg1:function(){return this.msg+'!'}},props:['num','txt','msg']}}}}})
           

4、自定義監聽事件(子元件向父元件傳值)

自定義監聽事件： $emit()

傳值的過程：

子元件設定了一個點選事件，點選事件中夾帶着傳遞的值—》通過getval方法将拿到的值指派給父元件的message—》父元件顯示出message值

父元件:{{parentmsg}}||{{message}}

子元件:{{childmsg}}

var vm = new Vue({el:"#box",components:{"parent":{template:'#par',data:function(){return {parentmsg:"父元件的資訊",message:''}},methods:{getval:function(val){this.message = valconsole.log(val)}},components:{'child':{template:'#child',data:function(){return{childmsg:'子元件的資訊'}},methods:{fn:function(){this.$emit('change',this.childmsg)}}}}}}})

5、SLOT插槽(vue2.6.0之前版本使用的slot)

目的:其目的在于讓元件的可擴充性更強,用來混合父元件的内容與子元件自己的模闆。

分為匿名slot和具名slot

//匿名slot
           

頭部

如果沒有分發，則預設顯示

底部

Vue.component('my-component',{template:'#mycomponent'})Vue.component('my-computer',{template:'#mycomputer'})var vm = new Vue({el:'#box',})

//具名slot
           

n9000

OOOO

GPU

CPU

DIST

Vue.component('my-computer',{template:'#mycomputer'})var vm = new Vue({el:'#box',})

vue的路由設定

要引入vue-router.js庫檔案

作用：根據url錨點的位置，在容器中加載不同的子產品，本質是作為頁面導航，完成SPA(Singal Page Application)的開發。

一種特殊的web應用，它将所有活動局限于一個web頁面中，僅web頁面初始化時附加元件應的html、JavaScript、css。

一旦頁面加載完成，SPA不會因為使用者的操作而進行頁面的重新加載或跳轉，而是利用JavaScript動态的變換HTML(采用的是div切換顯示或隐藏)，進而實作ui與使用者的互動。

下面是一個簡單地單頁面示例

首頁

新聞

熱點

go back

const Home={template:'

首頁

'}const News={template:'

新聞

'}const Hot={template:'

熱點

'}//Vue.extend(template:'

首頁

')//配置路徑const routes=[{path:'/home',component:Home},{path:'/news',component:News},{path:'/hot',component:Hot}]//建立routerconst router = new VueRouter({routes})var vm = new Vue({el:'#app',router,beforeCreate:function(){this.$router.push('/home').catch(err=>{err})},methods:{back(){this.$router.go(-1);}}})

二級路由的配置是在一級路由的基礎上，在某一個path下再分離出幾個低級的path。

示例

{//新聞子產品下有将新聞進行分類：科技、軍事等；其他步驟不影響path:'/news',component:News,children:[/* 二級路由，path配置設定，前面沒有“ / ” */{path:'js',component:{template:'
           

軍事類新聞

'}},{path:'kj',component:{template:'

科技類新聞

'}},{path:'/',redirect:'js'// component:{// template:'

預設值

'// }}]}

路由的進一步詳解

axios的使用

使用了常用的兩種axios的方法：

axios的get方法使用

{{msg}}

Click

var vm=new Vue({el:'#app',data:{msg:''},methods:{ getMsg:function(){//方式二axios.get('./text.txt',{params:{name:'zhy',age:20}}).then(res=>{this.msg=res.data}).catch(err=>{console.log(err)})} }})

點選事件觸發後，就會将text檔案中的資料拿到前端顯示，post和get方法使用相同。

版權聲明：本文為CSDN部落客「敲出億行bug」的原創文章，遵循CC 4.0 BY-SA版權協定，轉載請附上原文出處連結及本聲明。

原文連結：https://blog.csdn.net/wenquan19960602/article/details/106174485

【END】

更多精彩推薦

☞加碼 2000 億新基建還不夠，阿裡雲再放話：今年招 5000 人！

☞議題曝光！百位頂級講師、20大論壇，總有一個話題吸引你

☞張一鳴是如何練就位元組跳動的

☞性能超越最新序列推薦模型，華為諾亞方舟提出記憶增強的圖神經網絡

☞DevOps 在移動應用程式開發中扮演什麼角色？

☞穩定币經濟：十大穩定币簡史

你點的每個“在看”，我都認真當成了喜歡