VUE—从入门到飞起（一）
生活随笔
收集整理的這篇文章主要介紹了
VUE—从入门到飞起（一）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
基礎
起步
插值表達式{{}}、v-cloak、v-text、v-html、v-bind、v-on
學了這么多了，寫一個跑馬燈效果鞏固一下吧
事件修飾符（打開瀏覽器f12調試哦）
v-model實操
樣式
外聯樣式
內聯樣式
v-if、v-show
v-for
VUE—從入門到飛起（一）
VUE—從入門到飛起（二）
VUE—從入門到飛起（三）
VUE—從入門到飛起（四）
VUE—從入門到飛起（五）
基礎
?
起步
一定一定要引入vue.js：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app"><p>{{ message }}</p> </div><script>//當我們導包的時候，瀏覽器的內存中，就多了一個Vue構造函數var vm = new Vue({ //每次都需要new Vueel: '#app',data: { //data屬性中存放的是el中要用到的數據message: 'Hello Vue.js!' //不需要手動操作dom元素}}) </script>插值表達式{{}}、v-cloak、v-text、v-html、v-bind、v-on
<style>[v-cloak] {display: none;} </style> <div id="app"><!-- 使用v-cloak 能夠解決插值表達式閃爍問題--><p v-cloak>-----{{ message }}--+++</p><h4 v-text="message">=-=-=-=</h4><!--區別：1.v-text會覆蓋元素中原本的內容，插值表達式只會替換自己的占位符，不會把整個元素內容清空。2.v-text不會有閃爍問題，插值表達式會有閃爍問題3.v-html會解析html標簽--><div>{{ message2 }}</div><div v-text="message2"></div><div v-html="message2"></div><!--v-bind: 是vue定義提供的用于綁定屬性的指令 --><!--v-bind:可以簡寫為: --><!--v-bind:中可以寫合法的js表達式 --><input type="button" value="按鈕" v-bind:title="mytitle + '123'" /><!-- vue中提供了v-on:事件綁定機制 ，注意，v-on里面也是變量，不能直接alert等等--><!-- vue中提供了v-on:事件綁定機制 ，v-on可以縮寫為@，方法不需要傳參可以不寫括號--><input type="button" value="按鈕2" :title="mytitle + '123'" v-on:click="show" /><input type="button" value="按鈕3" :title="mytitle + '123'" @mouseleave="show()" /> </div><script>var vm = new Vue({el: '#app',data: {message: 'Hello Vue.js!',message2: '<h1>我是H1</h1>',mytitle: '這是自定義title'},methods: { //這個metho屬性中定義了當前vue實例中所有的方法show: function() {alert('hello');}}}) </script>學了這么多了，寫一個跑馬燈效果鞏固一下吧
<body><div id="app"><!--<input type="button" value="浪起來" @click="lang"/>--><input type="button" value="浪起來2" @click="lang2" /><input type="button" value="停止" @click="stop" /><h4>{{ msg }}</h4></div> </body><script>//this.數據屬性名 或this.方法名，來獲取當前實例的屬性和方法//vue會監聽data的改變,如果data改變,會立即應用到view中去（好處：只關心數據，不需要關心如何渲染到頁面）var vm = new Vue({el: "#app",data: {msg: "猥瑣發育，別浪~~",intervalId: null //定時器的id},methods: {lang: function() {var _this = this;//this指向問題if(this.intervalId != null) return;this.intervalId = setInterval(function() {var start = _this.msg.substring(0, 1);var end = _this.msg.substring(1);_this.msg = end + start;}, 200)},lang2() { //es6語法//箭頭函數，解決this指向問題//定時器只能開一次，做判斷if(this.intervalId != null) return;this.intervalId = setInterval(() => {var start = this.msg.substring(0, 1);var end = this.msg.substring(1);this.msg = end + start;}, 200)},stop() { //停止定時器clearInterval(this.intervalId);this.intervalId = null;}}}) </script>事件修飾符（打開瀏覽器f12調試哦）
<style>.inner {height: 50px;background-color: chartreuse;}.out {padding: 10px;background-color: red;} </style> <body><div id="app"><!-- 這里點擊按鈕，會先觸發按鈕的事件，再觸發div的點擊事件，原因：冒泡 --><div class="inner" @click="divclk"><input type="button" @click="btnclk" value="戳我" /><!-- .stop來阻止冒泡，只觸發按鈕的點擊事件 --><input type="button" @click.stop="btnclk" value="戳我" /><br/><!-- prevent阻止默認行為，這里阻止了a標簽跳轉到百度（也可以用于阻止submit） --><a href="http://www.baidu.com" @click.prevent="aclk">先去百度</a></div><div class="inner" @click.capture="divclk"><!-- capture捕獲機制，先觸發外層div的點擊，再觸發按鈕的點擊事件 --><!-- 這里需要在上層的div點擊事件加capture<div class="inner" @click="divclk">--><input type="button" @click="btnclk" value="戳我capture" /></div><!-- self只有點擊當前元素時才會觸發--><div class="inner" @click.self="divclk"><input type="button" @click="btnclk" value="戳我self" /></div><!-- prevent阻止默認行為，這里阻止了a標簽跳轉到百度（也可以用于阻止submit） --><!-- once只會觸發一次，默認行為也會只執行一次 --><!--可以串聯使用 --><a href="http://www.baidu.com" @click.prevent.once="aclk">先去百度</a><!--演示.stop和.self區別--><!--.self只會阻止自己身上冒泡行為的觸發，并不會真正阻止冒泡行為。--><div class="out" @click="otdivclk"><div class="inner" @click="divclk"><input type="button" @click.stop="btnclk" value="戳我" /></div></div><div class="out" @click="otdivclk"><div class="inner" @click.self="divclk"><input type="button" @click="btnclk" value="戳我" /></div></div></div> </body> <script>var vm = new Vue({el: "#app",data: {},methods: {btnclk() {console.log("這是按鈕的點擊");},divclk() {console.log("這是div點擊");},aclk() {console.log("a點擊了");},otdivclk() {console.log("外層div點擊");}}}) </script>v-model實操
<body><div id="app"><h4>{{ msg }}</h4><!--v-bind只能實現數據的單向綁定--><input type="text" :value="msg" /><!--v-model能實現數據的雙向綁定，只能用于表單元素input,select,checkbox,textarea--><input type="text" v-model="msg" /></div> </body> <script>var vm = new Vue({el: "#app",data: {msg: "大家都是好學生"},methods: {}}) </script> <body><div id="app"><input type="text" v-model="n1" /><select v-model="opt"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><input type="text" v-model="n2" /><input type="button" value="=" @click="calc" /><input type="text" v-model="result" /></div> </body> <script>var vm = new Vue({el: "#app",data: {n1: 0,n2: 0,result: 0,opt: '+'},methods: {calc() {/*switch (this.opt){case '+':this.result = parseInt(this.n1) +parseInt(this.n2);break;case '-':this.result = parseInt(this.n1) -parseInt(this.n2);break;case '*':this.result = parseInt(this.n1) *parseInt(this.n2);break;case '/':this.result = parseInt(this.n1) /parseInt(this.n2);break;default:break;}*///eval解析字符串 投機取巧的方式，正式開發盡量少用var codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)'this.result = eval(codeStr);}}}) </script>樣式
外聯樣式
<style>.red {color: red;}.thin {font-weight: 200;}.italic {font-style: italic;}.active {letter-spacing: 0.5em;} </style> <body><div id="app"><h1 class="red thin">這是一個h1</h1><!--第一種方式，直接傳遞一個數組，注意這里需要用v-bind做綁定。如果沒有該變量，用引號可以直接獲取class--><h1 :class="['red', 'italic']">數組</h1><!--第二種方式：三元表達式--><h1 :class="['red', 'italic', flag ? 'active':'']">三元表達式</h1><!--第三種方式：數組中使用對象--><h1 :class="['red', 'italic', {'active':flag}]">對象</h1><!--第四種方式：直接使用對象，為class使用v-bind使用對象時候，對象屬性是類名（屬性可帶引號可不帶）；屬性值為標識符--><h1 :class="{'red':flag, italic:flag,active:false}">直接使用對象</h1><h1 :class="classObj">直接使用對象</h1></div> </body> <script>var vm = new Vue({el: "#app",data: {flag: true,classObj: {'red': false,italic: true,active: false}},methods: {}}) </script>內聯樣式
<body><div id="app"><!--對象就是無序鍵值對的集合--><h1 :style="{color:'red', 'font-weight':200}">這是對象</h1><h1 :style="styleObj1">這是對象</h1><!--對象數組--><h1 :style="[styleObj1, styleObj2]">這是對象數組</h1></div> </body> <script>var vm = new Vue({el: "#app",data: {flag: true,styleObj1: {color: 'red','font-weight': 200},styleObj2: {'font-style': 'italic'}},methods: {}}) </script>v-if、v-show
<body><div id="app"><input type="button" value="點擊" @click="toggle" /><input type="button" value="或者直接這樣點擊" @click="flag = !flag" /><!--v-if是每次都會重新刪除或創建元素；v-show是每次不會重新刪除創建元素，只是切換display:none樣式v-if有較高的切換性能消耗，v-show有較高的初始渲染消耗--><h3 v-if="flag">v-if</h3><h3 v-show="flag">v-show</h3></div> </body><script>var vm = new Vue({el: '#app',data: {flag: true},methods: {toggle() {this.flag = !this.flag;}}}) </script>v-for
<body><div id="app"><!--循環數字數組--><span v-for="item in list">{{ item }}</span><br /><span v-for="(item, i) in list">值：{{ item }}索引： {{ i }}</span><hr /><!--循環對象數組,i為索引--><p v-for="user in listObj">id:{{ user.id }}名字：{{ user.name }}</p><!--<p v-for="(user, i) in listObj">id:{{ user.id }}名字：{{ user.name }}</p>--><hr /><!--循環對象--><!--注意，在遍歷對象身上的鍵值對時，除了有val，key，還有索引i--><p v-for="(val, key, i) in user">{{ val }}: {{ key }}: {{ i }}</p><hr /><!--迭代數字,從1開始，同樣也有索引--><p v-for="(count, i) in 5">{{ count }} {{ i }}</p></div> </body> <script>var vm = new Vue({el:"#app",data:{list:[1, 2, 3, 4, 5, 6],listObj:[{ id :1, name:'z1'},{ id :2, name:'z2'},{ id :3, name:'z3'},{ id :4, name:'z4'}],user:{id:1,name:'z3',gender:'男'}},methods:{}}) </script> <body><div id="app"><div><label>id:<input type="text" v-model="id" /></label><label>name:<input type="text" v-model="name" /></label><input type="button" value="添加" @click="add" /></div><!--注意：v-for循環的時候，key屬性只能用number或string注意：key在使用的時候，必須使用v-bind綁定在組件中使用v-for，或者在一些特殊情況中，必須使用key--><p v-for="item in list" :key="item.id"><input type="checkbox" value="item.id" /> ------{{ item.id }}----{{ item.name }}</p></div> </body> <script>var vm = new Vue({el: "#app",data: {id: '',name: '',list: [{id: 1,name: 'z1'},{id: 2,name: 'z2'},{id: 3,name: 'z3'},{id: 4,name: 'z4'}]},methods: {add() {this.list.unshift({id: this.id,name: this.name}); //前插入}}}) </script>?
總結
以上是生活随笔為你收集整理的VUE—从入门到飞起（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： git bash、eclipse中git
- 下一篇： VUE—从入门到飞起（二）