Vue基础语法回顾
Vue版的hello world
首先，按照傳統，我們來寫個hello world。
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>第一個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 的內容會被 data對象里面 message替換
我們也可以換種方式寫：
<span v-text="message"></span><span v-text=“message”></span> 是和 {{message}} 等價的
都是將內容進行替換
同時還有一種更高級的 寫法 v-html=“某些信息”
他的特點是會將里面的解析為html代碼，和js里的innerHtml 相對應
總結
- v-html主要用于渲染html元素
- v-text主要用于渲染文本
Vue版的綁定事件
語法：
v-on:事件名=“某個方法”
實例
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>Vue學習</title><script src="../js/vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">/*** 時間：2020年7月8日21:41:47* 名稱：* 內容： v-on 綁定事件* * new Vue 一個新的屬性 methods 綁定事件對應函數* 事件 ： 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("點我干嘛！")},changeIt:function(){this.message += ",真好吃！"}}})</script></body> </html>總結：
v-on 主要用于綁定事件 ， 和js里的addEventListner類似
v-on: 可以簡寫成 @
v-if 和 v-show 的區別與聯系
語法
v-if(表達式)
v-show(表達式)
//這個表達式必須要能得出 布爾值 類型的數據結果，其值為false ，則將對應元素隱藏
區別
v-if 和 v-show 在效果上都是讓元素 顯示和消失
- 但是原理上不同，v-if 是從dom中直接取出掉該元素
- 而v-show 是添加了一個css樣式 display：none
- 兩者相比：v-show 更適合于頻繁的操作元素顯示或者隱藏
- v-if 由于需要操作dom，相對開銷較大
v-bind的使用
語法
v-bind:屬性名=“data里面的屬性” //必須和data里面的屬性一一對應
功能
v-bind 用于操作 元素的 屬性
使用
v-bind:屬性名 可以簡寫為 :屬性名
v-bind:class 可以用一個表達式判定這個類是否添加 有兩種寫法
- 三元運算法 v-bind:class=“isActive?‘test’:’’”
- v-bind:class="{test:isActive}" :class="{類名:表達式}" // 一定要加 { }，里面的值是json格式，不加無法解析
v-for的使用
語法
- v-for(item in arr/obj)
- v-for((item,index) in arr/obj) //如果采用這種方式，第一個元素的實際含義就是item，第二個則是index
功能
v-for 可以讓我們方便的動態生成元素
使用
<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的使用
語法
v-model=“message” //message 和data里的數據一一對應
功能
綁定的數據 和 表單元素的值 雙向綁定
即你變我就跟著你變
使用
<body><div id="app"><button type="button" @click="changeText">點我</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
簡介
Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。
//簡介點說就是ajax的再封裝，讓我們更加方便的使用ajax 使用簡介
依賴
axios不是vue里面內嵌的，所以需要調用包
https://unpkg.com/axios/dist/axios.min.js //包地址語法
axios.get("url") .then(function(response) { //這個是申請成功后執行的函數體console.log(response); }, function(err) { //這個是申請失敗后執行的函數體console.log(err); })還有一種寫法更正規，但是麻煩些。
axios.get('url') .then(function (response) {console.log(response); }) .catch(function (error) {console.log(error); });本人是懶狗，一般用第一種，少打一個.catch。
實例
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>Vue學習</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">/*** 時間：2020年7月9日18:24:23* 名稱：獲取一個笑話* 內容：* */</script></head><body><div id="app"><button type="button" @click="getJok">點我</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>總結
- 上一篇： 【前端】你打console.log要花几
- 下一篇： 【快速通关】Git快速上手gitee