文章目錄
- 一,Vue練習
- --1,vue決議資料
- --2,Vue指令
- 二,Vue組件
- --1,概述
- --2,測驗
- 三,Axios技術
- --1,概述
- --2,測驗
- 專案結構
- 網頁代碼
- 1.json檔案代碼
- 總結
- 四,Vue路由
- --1,概述
- --2,測驗
- 作業
- 把Vue的組件 / axios / 路由 的代碼,最少,各敲三遍
一,Vue練習
–1,vue決議資料
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 vue決議資料</title>
<script src="vue/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{str}}</h1>
<h1>{{person.name}} {{person.age}} {{person.coding()}}</h1>
<h1>{{users[1].address}} {{users[0].age}}</h1>
<h1>{{show()}}</h1>
</div>
<script>
new Vue({
el:"#app",//id選擇器
data(){
return{
str:'vue',
person:{ //物件
name:'jack',
age:20,
coding(){ //簡寫的函式
alert(this.name+this.age)
}
},
users:[ //陣列
{
name:'tony',
age:10,
address:'西安'
},
{
name:'jerry',
age:20,
address:'廣州'
}
]
}
} ,
methods:{
show(){
alert('show()呼叫成功!');
}
}
})
</script>
</body>
</html>
–2,Vue指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 vue指令</title>
<script src="vue/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="fun()">單擊按鈕</button>
<!-- 6.v-on給元素添加事件:dblclick雙擊事件,click單擊事件 -->
<button v-on:dblclick="fun()">雙擊按鈕</button>
<!-- 練習:用vue做一個點贊的按鈕
QQ:2250432165
-->
<button v-on:click="count++">點贊{{count}}</button>
<!-- 7.v-bind: 把后面出現的資料當變數使用,會決議變數的值-->
<a href="https://www.baidu.com/">點我,百度一下</a>
<!-- 問題:把url當字串了,而不是當變數用的 -->
<a href="{{url}}">點我,百度一下</a>
<a v-bind:href="url" target="_blank">點我,百度一下</a>
</div>
<script>
new Vue({
el:"#app", //掛載點
data:{ //準備資料
count:0, //點贊數
url:'https://www.baidu.com'
},
methods:{ //創建函式
fun(){
console.log(1);
}
}
})
</script>
</body>
</html>
二,Vue組件
–1,概述
擴展了HTML的元素,好處是: 提高了組件代碼的復用性
使用步驟: 1,創建組件 2,使用組件(當做HTML標簽)
1,分類: 全域組件 和 區域組件 : 作用域
全域組件語法: Vue.component(1,2)–1是標簽名/組件名2是配置選項
區域組件語法:給Vue物件添加components屬性
–2,測驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 vue組件</title>
<!-- vue組件:擴展了HTML元素(提高了組件代碼的復用性),
使用步驟:1,定義組件 2,使用組件
1,定義組件分為:全域組件和區域組件
2,兩種組件的區別??
全域組件:可以在所有的資料渲染區使用,而且是先定義再new Vue()
區域組件:是在Vue物件里使用components來定義的,只能在當前物件的資料渲染區來使用
-->
<script src="vue/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 2,使用全域組件(本質上就是一個HTML元素) -->
<car></car>
<!-- 4,使用區域組件(本質上就是一個HTML元素) -->
<person></person>
</div>
<div id="d">
id=d位置,使用的全域組件:<car></car> ,使用成功!
id=d位置,使用的區域組件:<person></person> ,使用失敗!
</div>
<script>
//1,創建全域組件
//給vue添加組件(組件名稱,組件的模板)
Vue.component('car',{
// 通過template,描述car組件的功能
template:'<h3>hello Component</h3>'
})
//創建Vue物件,擁有了car組件
new Vue({
el:"#app",
components:{//3,創建區域組件
// 組件名稱,組件模板
'person': {
template:'<h1>區域組件</h1>'
}
}
})
new Vue({
el:"#d"
})
</script>
</body>
</html>
三,Axios技術
–1,概述
是Vue提供的Ajax技術,和JS實作的Ajax不同,Vue提供了更簡單語法,封裝了js代碼
Ajax技術是實作了網頁的區域重繪,異步訪問的功能.好處是: 避免了重繪整個網頁,而只重繪區域
1,語法:
axios.get(訪問資源的url).then( a => { 處理a的方式,a代表了服務器給瀏覽器回傳來的資料 } )
2,使用步驟: 引入vue.js + 引入axios.js
–2,測驗
專案結構
網頁代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>練習 vue的axios</title>
<script src="vue/vue.js"></script>
<script src="vue/axios.min.js"></script>
</head>
<body>
<div id="app">
<!-- 需求:點擊按鈕,去1.json里獲取city的資料并展示 -->
<button @click="show()">點我,展示資料</button>
<select>
<option v-for="i in city">{{i}}</option>
</select>
</div>
<script>
new Vue({
el:"#app",
data:{
city:''
},
methods:{
show(){
//去1.json里獲取city的資料
axios.get('1.json').then(
a => {
this.city=a.data.city;
}
)
}
}
})
</script>
</body>
</html>
1.json檔案代碼
{
"name":"jack",
"city":["北京","上海","深圳"]
}
總結
四,Vue路由
–1,概述
接受瀏覽器的請求,根據不同的請求的方式,找到匹配的組件
工具類:
1,VueRouter表示Vue的路由物件.
2,routes屬性是VueRouter的核心屬性,用來把不同的請求匹配的不同的組件
使用步驟:
1, 引入vue.js 2, 引入vue-router.js
–2,測驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 vue路由</title>
<!-- 1.引入js檔案 -->
<script src="vue/vue.js"></script>
<script src="vue/vue-router.js"></script>
</head>
<body>
<!-- 2.準備資料渲染區 -->
<div id="app">
<!-- 3.4.使用路由 ,router-link被HTML翻譯成了a標簽,to翻譯成href屬性-->
<router-link to="/home">1</router-link>
<router-link to="/help">2</router-link>
<!-- 3.5.展示匹配成功的組件,路由的出口 -->
<router-view></router-view>
</div>
<!-- 3.準備路由功能 -->
<script>
//3.3. 創建組件
let home = {
template:"<h1>我是主頁~~</h1>"
}
let help = {
template:"<h1>我是幫助頁~~</h1>"
}
//3.2.創建路由物件VueRouter,通過routes屬性指定請求和組件的匹配關系
let router = new VueRouter({
routes:[
//path請求路徑,component匹配到的組件
{path:'/home',component:home},
{path:'/help',component:help}
]
})
//3.1.通過router屬性指定路由功能
new Vue({
el:"#app",
//router:router
router //key和value一樣的話就可以直接簡寫
})
</script>
</body>
</html>
作業
把Vue的組件 / axios / 路由 的代碼,最少,各敲三遍
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/323468.html
標籤：其他
上一篇：js面試題--變數型別和計算
下一篇：從個人資料模型中獲取用戶實體