當前位置：首頁 > 前端技术 > vue >内容正文

vue

【前端5】vue：实例，插值表达式，v-，组件

發布時間：2024/4/24 vue 122 豆豆

生活随笔收集整理的這篇文章主要介紹了【前端5】vue：实例，插值表达式，v-，组件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

1.vue安裝：MVVM
2.案例：對象是vm，里面el等是構造參數
3.案例：num是數據即M，前端是V，這樣交互簡化了jquary(js)
4.vue實例：先綁定
5.vue對象的生命周期：8個函數（主要created）
6.this/指令/插值表達式：el是element
7.v-text&v-html：解決插值閃爍，將數據渲染到頁面
8.v-model數據的雙向綁定：使用v-model實現與表單（form）控件的雙向綁定，其他控件只能單向
9.v-on，v-for：給頁面元素綁定事件
10.v-if，v-show：渲染是源碼，不同于顯示
11.v-bind：給html的屬性綁定值（html元素本來就有的屬性如：name，id等）
12.computed計算屬性：進行邏輯處理，才能得到最終的結果
13.watch：監控，對用戶界面輸入數據進行異步校驗
14.組件：可重復使用的代碼

1.vue安裝：MVVM

VM：View-Model。

html能被瀏覽器解析，成本低，就像靜態文件一樣拿來就能用，性能高。jsp不能被瀏覽器解析，必須經過服務端處理成html再返回前端。vue是mvvm架構的js框架。

如下vue三種安裝方式：

CDN：服務器存靜態資源（圖片，js文件，css文件）。應用場景：直播視頻，對速度要求高的網站，加速資源請求。

idea創建vue工程：-y(yes)，Static Web - Static Web。

2.案例：對象是vm，里面el等是構造參數

如下拖進來表示導入，因為是js代碼，所以在 < script > 標簽里。

網頁顯示如下。

如下網頁控制臺，name屬性是我們自己寫的，上面的網頁顯示也跟著變。

3.案例：num是數據即M，前端是V，這樣交互簡化了jquary(js)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>入門案例2</title><script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{name}}，比較帥<br>有很多粉絲{{num}}個<input type="text" v-model="num"/><br><button v-on:click="add">刷粉</button> </div> </body> <script>//2.創建vue的實例//{}對象//數據的雙向綁定必須和表單控件（input select texteare）進行綁定//v-model將表單控件與vue定義的屬性進行綁定var vm = new Vue({//el element 元素el: "#app",//3.將vue的實例與視圖元素進行綁定，指定vue的操作范圍data: {//4.定義需要渲染的數據模型name: "寶強",//定義數據num: 100},methods: {//定義用戶事件或方法 function add(){} 或 add：function(){} add() { //ES6語法this.num++;},other() {this.add();}}}); </script> </html>

4.vue實例：先綁定

5.vue對象的生命周期：8個函數（主要created）

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>創建vue的實例</title><script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"><input type="text" v-model="message"><h2>{{message}}</h2> </div> </body> <script>var vm = new Vue({el: '#app',data: {message: "we are 伐木累!"},beforeCreate: function () {console.group('beforeCreate 創建前狀態===============》');console.log("%c%s", "color:red", "el : " + this.$el); //undefinedconsole.log("%c%s", "color:red", "data : " + this.$data); //undefinedconsole.log("%c%s", "color:red", "message: " + this.message); //undefined},created: function () { //調用created方法console.log("===========this " + this); //undefinedconsole.group('created 創建完畢狀態===============》');console.log("%c%s", "color:red", "el : " + this.$el); //undefinedconsole.log("%c%s", "color:red", "data : " + this.$data); //已被初始化console.log("%c%s", "color:red", "message: " + this.message); //已被初始化},beforeMount: function () {console.group('beforeMount 掛載前狀態===============》');console.log("%c%s", "color:red", "el : " + (this.$el)); //已被初始化console.log(this.$el);console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化console.log("%c%s", "color:red", "message: " + this.message); //已被初始化},mounted: function () {console.group('mounted 掛載結束狀態===============》');console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化console.log(this.$el);console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化console.log("%c%s", "color:red", "message: " + this.message); //已被初始化},beforeUpdate: function () {console.group('beforeUpdate 更新前狀態===============》');console.log("%c%s", "color:red", "el : " + this.$el);console.log(this.$el);console.log("%c%s", "color:red", "data : " + this.$data);console.log("%c%s", "color:red", "message: " + this.message);},updated: function () {console.group('updated 更新完成狀態===============》');console.log("%c%s", "color:red", "el : " + this.$el);console.log(this.$el);console.log("%c%s", "color:red", "data : " + this.$data);console.log("%c%s", "color:red", "message: " + this.message);},beforeDestroy: function () {console.group('beforeDestroy 銷毀前狀態===============》');console.log("%c%s", "color:red", "el : " + this.$el);console.log(this.$el);console.log("%c%s", "color:red", "data : " + this.$data);console.log("%c%s", "color:red", "message: " + this.message);},destroyed: function () {console.group('destroyed 銷毀完成狀態===============》');console.log("%c%s", "color:red", "el : " + this.$el);console.log(this.$el);console.log("%c%s", "color:red", "data : " + this.$data);console.log("%c%s", "color:red", "message: " + this.message)}}) </script> </html>

dopost和doget（鉤子函數）是servlet中doservice調的。

6.this/指令/插值表達式：el是element

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>入門案例1</title><script src="node_modules/vue/dist/vue.js"></script> </head> <body><h3>差值表達式{{}}}</h3><div id="app">基本數據類型：{{name}}<br>對象數據類型：{{user.name}}--{{user.age}}<br>表達式：{{1+1}}<br>js內置對象：{{new Date()}}<br>調用方法：{{add()}}<br></div> </body> <script>var vm = new Vue({//el element 元素el:"#app",//3.將vue的實例與視圖元素進行綁定，指定vue的操作范圍data:{//4.定義需要渲染的數據模型name:"jack",user:{name:"ross",age:18}},methods:{add(){return "你是最棒的";}}}); </script> </html>

7.v-text&v-html：解決插值閃爍，將數據渲染到頁面

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>入門案例1</title><script src="node_modules/vue/dist/vue.js"></script> </head> <body><h3>v-text<br>v-html</h3><div id="app">v-text:<li v-text="name"/><br>v-html:<li v-html="name"/></div> </body> <script>var vm = new Vue({el:"#app",//3.將vue的實例與視圖元素進行綁定，指定vue的操作范圍data:{//4.定義需要渲染的數據模型name:"<b>jack</b>",},}); </script> </html>

差值閃爍：差值表達式，數據沒過來顯示源碼。

8.v-model數據的雙向綁定：使用v-model實現與表單（form）控件的雙向綁定，其他控件只能單向

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>v-model</title><script src="node_modules/vue/dist/vue.js"></script> </head> <body><h3>v-model 實現數據的雙向綁定</h3><div id="app">{{name}}<br><input type="text" v-model="name" /> </div> </body> <script>var vm = new Vue({el:"#app", data:{ //定義需要渲染的數據模型name:"",},}); </script> </html>

9.v-on，v-for：給頁面元素綁定事件

如下在new Vue{}里。如上@click.stop是阻止事件的傳播。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>v-on</title><script src="node_modules/vue/dist/vue.js"></script> </head> <body><h3>v-for 遍歷數據</h3><div id="app"><ul><li v-for="item in users">{{item.name}}-- {{item.gender}}-- {{item.age}}</li></ul>-------序號<ul><li v-for="(item,indx) in users">{{indx}}--{{item.name}}-- {{item.gender}}-- {{item.age}}</li></ul>--------遍歷對象<ul><li v-for="(v,k,index) in user"> {{index+1}}--- {{v}}-- {{k}}</li></ul></div> </body> <script>var vm = new Vue({el:"#app", data:{ users:[{name: '柳巖', gender: '女', age: 21},{name: '有哥', gender: '男', age: 30},{name: '范冰冰', gender: '女', age: 24},{name: '劉亦菲', gender: '女', age: 18},{name: '古力娜扎', gender: '女', age: 25}],user:{name:'柳巖', gender:'女', age: 21}}}); </script> </html>

10.v-if，v-show：渲染是源碼，不同于顯示

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title> v-if&v-show根據條件渲染</title><script src="node_modules/vue/dist/vue.js"></script> </head> <body><h3>v-if&v-show根據條件渲染</h3><div id="app"><p v-if="show">看得見我if</p> <p v-else>  我是看不見else</p>------v-show<p v-show="show">我是v-show</p></div> </body> <script>var vm = new Vue({el:"#app", data:{show:true}}); </script> </html>

11.v-bind：給html的屬性綁定值（html元素本來就有的屬性如：name，id等）

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title> v-bind</title><script src="node_modules/vue/dist/vue.js"></script> </head> <body><h3>v-bind 給用html元素綁定值</h3><div id="app"><a :name="name" v-bind:href="url">baidu</a><br><a :id="id" :href="url">baidu</a> </div> </body> <script>var vm = new Vue({el:"#app",data:{url:"http://www.baidu.com",name:"baidu",id:"my"}}); </script> </html>

下行是上行的簡寫。

12.computed計算屬性：進行邏輯處理，才能得到最終的結果

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>計算屬性</title><script src="node_modules/vue/dist/vue.js"></script> </head> <body><h3>計算屬性</h3><div id="app">語文：<input type="text" v-model="chinese"/><br>數學：<input type="text" v-model="math"/><br>總分：{{total}}</div> </body> <script>//2.創建vue的實例//{}對象var vm = new Vue({//el element 元素el:"#app",//3.將vue的實例與視圖元素進行綁定，指定vue的操作范圍data:{chinese:100,math:10},computed:{total(){return this.chinese+this.math;}}}); </script> </html>

13.watch：監控，對用戶界面輸入數據進行異步校驗

14.組件：可重復使用的代碼

總結

以上是生活随笔為你收集整理的【前端5】vue：实例，插值表达式，v-，组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【前端4】bootstrap：栅格系统，
下一篇：【Java12】tomcatservle