Vue基础语法回顾
Vue版的hello world
首先，按照傳統(tǒng)，我們來(lái)寫個(gè)hello world。
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>第一個(gè)Vue程序</title><script src="../js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">{{message}}</div><script type="text/javascript">var app = new Vue({el:"#app",data:{message:"hello world!"}})</script></body> </html>{{ messge }} 中 message 的內(nèi)容會(huì)被 data對(duì)象里面 message替換
我們也可以換種方式寫：
<span v-text="message"></span><span v-text=“message”></span> 是和 {{message}} 等價(jià)的
都是將內(nèi)容進(jìn)行替換
同時(shí)還有一種更高級(jí)的 寫法 v-html=“某些信息”
他的特點(diǎn)是會(huì)將里面的解析為html代碼，和js里的innerHtml 相對(duì)應(yīng)
總結(jié)
- v-html主要用于渲染html元素
- v-text主要用于渲染文本
Vue版的綁定事件
語(yǔ)法：
v-on:事件名=“某個(gè)方法”
實(shí)例
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>Vue學(xué)習(xí)</title><script src="../js/vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">/*** 時(shí)間：2020年7月8日21:41:47* 名稱：* 內(nèi)容： v-on 綁定事件* * new Vue 一個(gè)新的屬性 methods 綁定事件對(duì)應(yīng)函數(shù)* 事件 ： dblclick , click等* */</script></head><body><div id="app"><input type="button" v-on:click="doIt" value="按鈕1"/><input type="button" @click="doIt" value="按鈕2"/><input type="button" value="按鈕3" @dblclick="changeIt"/><span>{{ message }}</span></div><script type="text/javascript">var app = new Vue({el:"#app",data:{message:"番茄炒蛋"},methods:{doIt:function(){alert("點(diǎn)我干嘛！")},changeIt:function(){this.message += ",真好吃！"}}})</script></body> </html>總結(jié)：
v-on 主要用于綁定事件 ， 和js里的addEventListner類似
v-on: 可以簡(jiǎn)寫成 @
v-if 和 v-show 的區(qū)別與聯(lián)系
語(yǔ)法
v-if(表達(dá)式)
v-show(表達(dá)式)
//這個(gè)表達(dá)式必須要能得出 布爾值 類型的數(shù)據(jù)結(jié)果，其值為false ，則將對(duì)應(yīng)元素隱藏
區(qū)別
v-if 和 v-show 在效果上都是讓元素 顯示和消失
- 但是原理上不同，v-if 是從dom中直接取出掉該元素
- 而v-show 是添加了一個(gè)css樣式 display：none
- 兩者相比：v-show 更適合于頻繁的操作元素顯示或者隱藏
- v-if 由于需要操作dom，相對(duì)開銷較大
v-bind的使用
語(yǔ)法
v-bind:屬性名=“data里面的屬性” //必須和data里面的屬性一一對(duì)應(yīng)
功能
v-bind 用于操作 元素的 屬性
使用
v-bind:屬性名 可以簡(jiǎn)寫為 :屬性名
v-bind:class 可以用一個(gè)表達(dá)式判定這個(gè)類是否添加 有兩種寫法
- 三元運(yùn)算法 v-bind:class=“isActive?‘test’:’’”
- v-bind:class="{test:isActive}" :class="{類名:表達(dá)式}" // 一定要加 { }，里面的值是json格式，不加無(wú)法解析
v-for的使用
語(yǔ)法
- v-for(item in arr/obj)
- v-for((item,index) in arr/obj) //如果采用這種方式，第一個(gè)元素的實(shí)際含義就是item，第二個(gè)則是index
功能
v-for 可以讓我們方便的動(dòng)態(tài)生成元素
使用
<body><div id="app"><span v-for="item in arr"> {{ item }}</span><br><span v-for="(item,index) in arr">{{ index }}{{ item }}</span><br><span v-for="(item) in objTest">{{ item }}</span><br><button type="button" @click="add">增加</button><button type="button" @click="remove">減少</button><span v-for="item in obj">{{ item.name }}</span></div><script type="text/javascript">var app = new Vue({el:"#app",data:{arr:["南京","北京","上海","蘇州"],obj:[{name:"小紅"},{name:"小明"}],objTest:{name:"小小",age:18}},methods:{add:function(){this.obj.push({name:"小明"});},remove:function(){this.obj.shift();}}})</script> </body>v-model的使用
語(yǔ)法
v-model=“message” //message 和data里的數(shù)據(jù)一一對(duì)應(yīng)
功能
綁定的數(shù)據(jù) 和 表單元素的值 雙向綁定
即你變我就跟著你變
使用
<body><div id="app"><button type="button" @click="changeText">點(diǎn)我</button><input type="text" v-model="message" @keyup.enter="func"/><h2> {{ message }} </h2></div><script type="text/javascript">var app = new Vue({el:"#app",data:{message:"我愛編程"},methods:{func:function(){alert(this.message);},changeText:function(){this.message = "test";}}})</script> </body>vue + axios
簡(jiǎn)介
Axios 是一個(gè)基于 promise 的 HTTP 庫(kù)，可以用在瀏覽器和 node.js 中。
//簡(jiǎn)介點(diǎn)說(shuō)就是ajax的再封裝，讓我們更加方便的使用ajax 使用簡(jiǎn)介
依賴
axios不是vue里面內(nèi)嵌的，所以需要調(diào)用包
https://unpkg.com/axios/dist/axios.min.js //包地址語(yǔ)法
axios.get("url") .then(function(response) { //這個(gè)是申請(qǐng)成功后執(zhí)行的函數(shù)體console.log(response); }, function(err) { //這個(gè)是申請(qǐng)失敗后執(zhí)行的函數(shù)體console.log(err); })還有一種寫法更正規(guī)，但是麻煩些。
axios.get('url') .then(function (response) {console.log(response); }) .catch(function (error) {console.log(error); });本人是懶狗，一般用第一種，少打一個(gè).catch。
實(shí)例
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>Vue學(xué)習(xí)</title><script src="./../js/vue.js" type="text/javascript" charset="utf-8"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script type="text/javascript">/*** 時(shí)間：2020年7月9日18:24:23* 名稱：獲取一個(gè)笑話* 內(nèi)容：* */</script></head><body><div id="app"><button type="button" @click="getJok">點(diǎn)我</button><p> {{ jok }} </p></div><script type="text/javascript">var app = new Vue({el: "#app",data: {jok:"笑話"},methods: {getJok: function() {var that = this;axios.get("https://autumnfish.cn/api/joke/list?num=1").then(function(response) {console.log(response);var obj = response.data.jokesthat.jok = obj[0];}, function(err) {console.log(err);})}}})</script></body> </html>總結(jié)
- 上一篇： 【前端】你打console.log要花几
- 下一篇： 【快速通关】Git快速上手gitee