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

vue

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

發(fā)布時間：2024/4/24 vue 160 豆豆

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

文章目錄

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

1.vue安裝：MVVM

VM：View-Model。

html能被瀏覽器解析，成本低，就像靜態(tài)文件一樣拿來就能用，性能高。jsp不能被瀏覽器解析，必須經(jīng)過服務(wù)端處理成html再返回前端。vue是mvvm架構(gòu)的js框架。

如下vue三種安裝方式：

CDN：服務(wù)器存靜態(tài)資源（圖片，js文件，css文件）。應(yīng)用場景：直播視頻，對速度要求高的網(wǎng)站，加速資源請求。

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

2.案例：對象是vm，里面el等是構(gòu)造參數(shù)

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

網(wǎng)頁顯示如下。

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

3.案例：num是數(shù)據(jù)即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.創(chuàng)建vue的實例//{}對象//數(shù)據(jù)的雙向綁定必須和表單控件（input select texteare）進行綁定//v-model將表單控件與vue定義的屬性進行綁定var vm = new Vue({//el element 元素el: "#app",//3.將vue的實例與視圖元素進行綁定，指定vue的操作范圍data: {//4.定義需要渲染的數(shù)據(jù)模型name: "寶強",//定義數(shù)據(jù)num: 100},methods: {//定義用戶事件或方法 function add(){} 或 add：function(){} add() { //ES6語法this.num++;},other() {this.add();}}}); </script> </html>

4.vue實例：先綁定

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

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>創(chuàng)建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 創(chuàng)建前狀態(tài)===============》');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 () { //調(diào)用created方法console.log("===========this " + this); //undefinedconsole.group('created 創(chuàng)建完畢狀態(tài)===============》');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 掛載前狀態(tài)===============》');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 掛載結(jié)束狀態(tài)===============》');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 更新前狀態(tài)===============》');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 更新完成狀態(tài)===============》');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 銷毀前狀態(tài)===============》');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 銷毀完成狀態(tài)===============》');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（鉤子函數(shù)）是servlet中doservice調(diào)的。

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">基本數(shù)據(jù)類型：{{name}}<br>對象數(shù)據(jù)類型：{{user.name}}--{{user.age}}<br>表達式：{{1+1}}<br>js內(nèi)置對象：{{new Date()}}<br>調(diào)用方法：{{add()}}<br></div> </body> <script>var vm = new Vue({//el element 元素el:"#app",//3.將vue的實例與視圖元素進行綁定，指定vue的操作范圍data:{//4.定義需要渲染的數(shù)據(jù)模型name:"jack",user:{name:"ross",age:18}},methods:{add(){return "你是最棒的";}}}); </script> </html>

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

<!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.定義需要渲染的數(shù)據(jù)模型name:"<b>jack</b>",},}); </script> </html>

差值閃爍：差值表達式，數(shù)據(jù)沒過來顯示源碼。

8.v-model數(shù)據(jù)的雙向綁定：使用v-model實現(xiàn)與表單（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 實現(xiàn)數(shù)據(jù)的雙向綁定</h3><div id="app">{{name}}<br><input type="text" v-model="name" /> </div> </body> <script>var vm = new Vue({el:"#app", data:{ //定義需要渲染的數(shù)據(jù)模型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 遍歷數(shù)據(jù)</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根據(jù)條件渲染</title><script src="node_modules/vue/dist/vue.js"></script> </head> <body><h3>v-if&v-show根據(jù)條件渲染</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計算屬性：進行邏輯處理，才能得到最終的結(jié)果

<!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>數(shù)學(xué)：<input type="text" v-model="math"/><br>總分：{{total}}</div> </body> <script>//2.創(chuàng)建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：監(jiān)控，對用戶界面輸入數(shù)據(jù)進行異步校驗

14.組件：可重復(fù)使用的代碼

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【前端4】bootstrap：栅格系统，
下一篇： Vue.js项目新建及目录结构分析