文章目錄
- 一,練習
- --1,測驗
- 二,vue指令
- --1,概述
- --2,測驗
- 三,Vue指令v-on v-bind
- --1,測驗
- 四,Vue 組件
- --1,概述
- --2,測驗
- 五,Vue專案
- --1,安裝腳手架
- --2,配置專案
一,練習
–1,測驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 Vue基礎語法</title>
<!-- 引入外部檔案的路徑問題:
1. 如果你想要的引入的資源,和你在同級目錄,直接寫 vue.js
2. 如果你想要的引入的資源,和你不在同級目錄,就先寫同級的目錄再繼續寫資源名稱js/vue.js
-->
<script src="js/vue.js"></script>
</head>
<body>
<div id="d1">
{{msg}}
{{show()}}
{{add(1,2)}}
</div>
<script>
new Vue({
el:"#d1",
data:{
msg:100
},
methods:{
// show:function(){ //標準寫法
show(){ //簡寫
alert(1)
},
// add:function(a,b){ //標準寫法
add(a,b){ //簡寫
alert(a+b)
}
}
})
</script>
</body>
</html>
二,vue指令
–1,概述
使用方式: 就是在HTML的標簽上,加一些v-的指令.
v-model: 實作資料驅動,雙向系結.
v-if: 用來判斷,不滿足判斷條件就不展示
v-show: 用來判斷,不滿足判斷條件就不展示(通過css實作)
v-else-if / v-else : 順序的要求類似于java
v-cloak : 用來解決閃現問題(網頁展示了插值運算式)
v-html: 獲取資料,也可以決議HTML標簽
–2,測驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 Vue指令</title>
<!-- 1.引入vue.js -->
<script src="js/vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<!-- 2.準備資料渲染區 -->
<div id="app" v-cloak>
{{msg}} <br />
{{msg}} <br />
<!--
2.1. v-model是Vue的指令,實作了雙向系結的功能.把值系結到指定屬性上
資料驅動,雙向系結: 改Model會影響View,改View會影響Model
-->
<input type="text" v-model="msg" />
<!-- 2.2. v-html指令可以決議資料,并識別HTML代碼 -->
<p v-html="msg"></p>
<!-- 2.3. v-cloak指令解決插值表示的閃現問題 -->
<!-- 2.4. v-if指令用來做判斷,條件滿足才展示,不滿足就不展示 -->
<p v-if="person.age>=18">成年人</p>
<!-- 2.5. v-show指令也用來做判斷,不滿足的話,利用css控制著style="display: none;" -->
<p v-show="person.age>=18">成年人</p>
<!-- 2.6. v-else指令,組成順序依次 if...else if...else -->
<p v-if="type === 'A'">優秀</p>
<p v-else-if="type === 'C'">中等</p>
<p v-else-if="type === 'B'">良好</p>
<p v-else>錯誤</p>
<!-- 2.7. v-for指令用來回圈,可以回圈陣列,類似于JS里的for...in語法,
i表示遍歷得到的資料,index是下標
-->
<ol>
<li v-for="i in arr">{{i}}</li>
</ol>
<ul>
<li v-for="i,index in arr">資料是:{{i}} -> 下標是:{{index}}</li>
</ul>
</div>
<!-- 3.創建Vue物件 -->
<script>
new Vue({
el:"#app", //掛載點
data: { //要被渲染的資料
msg : '<h1>hello vue123</h1>',
type: 'C' ,
person:{
age:10
},
arr : ['楊冪','迪樂熱巴','Anglelababa']
}
})
</script>
</body>
</html>
三,Vue指令v-on v-bind
–1,測驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 Vue指令</title>
<!-- 引入vue.js -->
<script src="js/vue.js"></script>
</head>
<body>
<!-- 渲染區 -->
<div id="app">
<!-- 1. v-on指令用來給HTML元素添加Vue事件,
用:指定事件的觸發方式v-on:可以簡寫成一個@
-->
<button v-on:click="show()">點我1</button>
<button @click="say('hi bro')">點我2</button>
<button v-on:dblclick="say('hi vue')">點我3</button>
<!-- 練習:計數器,點一次按鈕就把次數++ -->
<button v-on:click="count++">贊{{count}}</button>
<!-- 2. v-bind指令用來獲取變數的值-->
<a href="{{url}}">點我跳轉1</a> <!-- 錯的 -->
<a v-bind:href="url">點我跳轉2</a> <!-- 對的 -->
<a :href="url">點我跳轉3</a> <!-- 簡寫 -->
</div>
<!-- Vue物件 -->
<script>
new Vue({
el:"#app",//掛載點
data:{
count:0 ,//計數器
url:'https://www.baidu.com'
},
methods:{ //存方法
// show:function(){
show(){//函式的簡寫形式
alert(100);
},
say(a){
alert(a);
}
}
})
</script>
</body>
</html>
四,Vue 組件
–1,概述
當想要擴展HTML的功能時,使用vue定義一些組件.
1,全域組件: Vue.component(組件名, 組件的功能)
2,區域組件: 在Vue物件里, 再加一個屬性components
3,使用組件: 在資料渲染區 , 直接把組件名當做HTML的標簽名用
區別? 全域組件可以被多個Vue物件使用.區域組件只能在當前Vue物件中使用.
–2,測驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 組件Component</title>
<!-- 1.匯入vue.js -->
<script src="js/vue.js"></script>
</head>
<body>
<!-- 2.資料渲染區 -->
<div id="app">
<!-- 5.使用組件 -->
<Hellocom></Hellocom>
</div>
<div id="d1">
<Hellocom></Hellocom>
<person></person>
</div>
<script>
//4. 創建Vue的全域組件(可以被多個Vue實體使用):類似于擴展了HTML的標簽
//Vue.component(1,2)-1是組件名(最好是全小寫)-2是組件的顯示效果
Vue.component('Hellocom',{
template : '<h1>你好 Vue組件</h1>' //組件的顯示效果
})
//3. 創建Vue物件
new Vue({
el:'#app'
})
new Vue({
el:'#d1' ,
// 區域組件(只被當前的Vue物件擁有,在指定渲染區可以使用)
components: {
'person':{//組件名
template : '<h1>你好 person組件</h1>' //組件的顯示效果
}
}
})
</script>
</body>
</html>
五,Vue專案
–1,安裝腳手架
node -v #檢查nodejs的安裝版本
npm config get registry # 查看當前配置的鏡像，結果是默認的國外網址
npm config set registry https://registry.npm.taobao.org #設定成淘寶鏡像
npm install vue-cli -g #安裝vue-cli腳手架
vue -V #查看版本
where vue #vue安裝在哪里
–2,配置專案
vue init webpack jt01 # 慢,等....做了很多選擇 # 可能需要執行多次才會成功
cd jt02 #進入專案目錄
npm run dev #啟動專案
打開瀏覽器訪問網址: http://localhost:8080
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/298942.html
標籤：java
上一篇：畢業之后所有面試總結