Vue.js - 1
Vue.js - day1
Vue.js - day2javascript
- 初識vue
<!--首先在頁面中引入vue.js文件-->
<!--HTML頁面至關於mvvm結構的view層-->
<!--這種mvvm的展示數據的方式:數據驅動頁面閃現,data中數據若是發生改變,頁面同時跟着改變.-->
<body>
<div id="app">
<!--在本做用域中完成項目的全部業務邏輯.-->
<!--利用插值表達式{{}}將數據展現在頁面上-->
{{msg}} <!--Hello Vue.js！-->
</div>
<script type="text/javascript">
new Vue({
//規定做用域
el:"#app",
//放置全部數據
data:{
msg:"Hello Vue.js！"
}
});
</script>
</body>
- 插值運算符{{ }}
- 插值表達式中,除了null和undefined均可以展示到頁面上.
- js中的關鍵字不能在插值運算符中使用,包括var , if , for
- 在{{ }}中能夠進行簡單的運算,判斷時可使用三元運算符,能夠用一些js原生的方法.
- {{ }}中只能使用不改變原數組的方法.
- 指令(1)
v-texthtml
- v-text與{{ }}同樣用於展示數據.
- {{ }}是v-text的縮寫形式,通常狀況下 {{}}和v-text通用.
- 插值表達式在先加載html後加載vue.js框架的狀況下,可能會出現{{}}一個很醜標記,而v-text內部進行了處理,在數據加載完以前,先將元素進行隱藏.
v-htmlvue
- v-html一樣也是用於展現數據.
- 與{{ }}和v-text區別在於v-html會編譯字符串中的標籤,{{ }}和v-text不會.
<div id="app">
<!--v-html會編譯字符串中的標籤,{{}}和v-text不會-->
<div v-text="msg"></div> <!-- 顯示：<p>Hello World</p> -->
<div v-html="msg"></div> <!-- 顯示：Hello World -->
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"<p>Hello World</p>"
}
})
</script>
v-cloakjava
/* 當插值表達式{{ }}在先加載html後加載vue.js框架的狀況下使用時，
可能會先出現{{ }} 標記再把數據渲染出來，致使一個頁面閃爍問題. */
/* 解決方法: 1. 在{{ }}外套一個標籤,標籤上掛載v-cloak指令
2. 在style標籤中書寫相應樣式:*/
例： <style>
[v-cloak]{
display: none;
}
</style>
/*在做用域裏寫*/
<div v-cloak>
{{sayHi}}
</div>
v-on算法
- 與原生js相比,就是把on變成v-on
- v-on能夠縮寫成@
<div id="app">
<button v-on:click="dothis()">點我</button>
<button @click="dothis()">點我</button>
<!--在沒有參數的狀況下,函數後邊的小括號可加可不加.-->
<button @click="dothis">點我</button>
<!-- 點擊按鈕count值自增 -->
{{count}}
<!--頁面上放置的數據,在data中是綁定起來的-->
</div>
<script>
new Vue({
el: "#app",
data: {
count: 1
},
// methods屬性用於添加函數
methods: {
dothis: function () {
// 如何在methods的函數中獲取到data值,前邊加this
this.count++
}
}
})
</script>
- 事件修飾符
.stopjson
- .stop是簡便方法阻止事件冒泡.
- 若是想在參數中傳遞原生event對象,可使用$event內置方法.
<div id="app">
<!--添加事件的修飾符-->
<div @click="doTwo">
外層父容器
<div @click.stop="doOne('hello',$event)">
內層子節點
</div>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {},
methods: {
doOne: function () {
alert("內層子節點");
},
doTwo: function () {
alert('外層父容器');
}
}
})
</script>
.prevent數組
- .prevent用於取消默認事件.
<div id="app">
<!--取消了a標籤的默認跳轉,彈出alert內容,點擊確認後頁面不會跳轉了-->
<a href="http://baidu.com" @click.prevent="pre">點我跳啊!</a>
</div>
<script>
new Vue({
el: "#app",
data: {},
methods: {
pre(){
alert("禁止默認事件.prevent");
}
}
})
</script>
keyCodeapp
- keycode修飾符用於鍵盤事件制定按鍵功能.
<div id="app">
<!-- keydown 和 keyup 均可以觸發 -->
<!-- enter鍵對應的是數字13 -->
<input type="text" @keyup.13="keyc">
<input type="text" @keyup.enter="keyc">
<input type="text" @keydown.login="keyc">
</div>
<script>
//自定義配置按鍵名稱
Vue.config.keyCodes.login = 13;
new Vue({
el: "#app",
data: {
count: 1
},
methods: {
keyc: function () {
alert("鍵盤事件修飾符");
}
}
})
</script>
- 指令(2)
v-bind框架
- v-bind是綁定屬性用的.
- 例：↓ ↓ ↓
<style>
.div1 {
background-color: red;
}
.div2 {
color: yellow
}
</style>
<div id="app">
<!--v-bind將data中的值注入到標籤的屬性上-->
<div v-bind:id="id">Hello</div> <!-- <div id="div1">123</div> -->
<!--縮寫 將v-bind去掉-->
<div :id="id">Hello</div>
<!--一個靜態字符串和data中的值進行組合當作a標籤的href-->
<!--v-bind後直接賦值一個字符串嵌套對象的格式,對象的key是屬性名,value靜態字符串與data中數據的連接-->
<a v-bind="{'href':'http://xxx.com'+url}"></a>
<!-- 縮寫 -->
<a :href="'http://xxx.com'+url"></a>
<!--下邊這兩種寫法等價-->
<div class="div1 div2">Hello</div>
<div :class="[color1,color2]">Hello</div>
<!-- 下面這種寫法會報錯，由於會把"color1 color2" 識別成一個值 -->
<!-- <div :class="color1 color2">Hello</div> -->
<!--動態綁定style 行內樣式-->
<div v-bind:style="[style1,style2]">Hello</div>
</div>
<script>
new Vue({
el: "#app",
data: {
id: "div1",
url: "/aa/bb",
color1: "div1",
color2: "div2",
style1:{color:"pink"},
style2:{'background-color':'skyblue'}
}
})
</script>
v-formvvm
- 循環遍歷
- 案例：將data中的數據帶入到頁面的li上.
<div id="app">
<ul>
<!--基礎用法-->
<!--v-for的使用方法 in運算符前是數組的每一項,這個變量本身能夠隨便定義-->
<!--in運算符後邊是data的數據,由於咱們是渲染列表,因此,數據只能是數組類型和對象類型-->
<li v-for="item in arr">{{item}}</li>
</ul>
<!--
顯示：
1
1
1
-->
<ul>
<!--循環數組時,若是in運算符前邊是(),能夠接受兩個參數-->
<!--第一個是數組中的每一項,第二個參數,是每一項值的index索引-->
<li v-for="(item,index) in arr">{{index}}-{{item}}</li>
</ul>
<!--
顯示：
0-1
1-1
2-1
-->
<ul>
<!--循環對象-->
<!--若是循環的數據是一個對象.那麼in前邊的小括號內第一個參數是對象的每個值value,第二個參數是每個值的key鍵,三個參數是索引index-->
<li v-for="(value,key,index) in obj">{{index}}-{{key}}-{{value}}</li>
</ul>
<!--
顯示：
0-a-1
1-b-2
2-c-3
-->
<!--diff算法.key值是當數據從新渲染時,提升運行效率用的.原則上寫v-for時給加上-->
<button @click="changeArr">點我item加1</button>
<ul>
<li v-for="(item,index) in arr" :key="index">{{index}}-{{item}}</li>
</ul>
<!--
點擊按鈕item自增：
0-item
1-item
2-item
-->
</div>
<script>
new Vue({
el: "#app",
data: {
arr: [1,1,1],
obj:{a:1,b:2,c:3}
},
methods:{
changeArr:function () {
//在函數中,改變data中的變量時要注意
//改變原數組的方法能夠直接用,不改變原數組的方法須要賦值回原數組
//this.arr.push('d')
this.arr = this.arr.map(function (item, index) {
return item+1
})
}
}
})
</script>
v-if
- v-if v-else
- v-if v-else-if v-else
- template標籤
<div id="app">
<!--v-if用來控制標籤的顯示和隱藏,若是等號後邊的data變量是true顯示,false隱藏-->
<!--v-else相似於原生js的邏輯,當v-if值爲false的時候顯示標籤二-->
<button @click="show">點我</button> <!-- 點擊按鈕觸發show方法 -->
<div v-if="sh">我是標籤一</div> <!-- 當sh是true的時候默認顯示 當點擊上面按鈕的時候sh變爲false時標籤一隱藏(整個標籤結構都沒了)-->
<div v-else>我是標籤二</div> <!-- 標籤一隱藏 顯示標籤二 show方法來回改變sh的值 因此標籤一和標籤二來回切換 -->
</div>
<script>
new Vue({
el: "#app",
data: {
sh: true,
},
methods: {
show: function () {
// this 指的是Vue實例對象
this.sh = !this.sh; // 取反(當sh爲真時改成假，反之爲假時改成真)
}
}
})
</script>
<!-- v-if v-else-if v-else 的用法 -->
<div id="app">
<div v-if="str =='a'">我是標籤一</div>
<div v-else-if="str =='b'">我是標籤二</div>
<div v-else>我是標籤三</div>
</div>
<script>
new Vue({
el: "#app",
data: {
str: "b"
}
})
</script>
<!-- 當str的值是b的時候就現實標籤二 -->
<div id="app">
<!--可使用template標籤代替div包裹多個元素,template標籤不可見-->
<button @click="show">點我啊</button>
<template v-if="sh">
<h1>Title111</h1>
<p>Paragraph 222</p>
</template>
<template v-else>
<h1>Title222</h1>
<p>Paragraph 333</p>
</template>
</div>
<script>
new Vue({
el: "#app",
data: {
sh: true,
},
methods: {
show: function () {
// this 指的是Vue實例對象
this.sh = !this.sh; // 取反(當sh爲真時改成假，反之爲假時改成真)
}
}
})
</script>
v-show
<div id="app">
<!--通常來講,一個元素進行顯示隱藏用v-show,效率比較高-->
<!--由於v-show不能和v-else和v-else-if一塊兒使用,因此v-show只能控制一個元素的顯示和隱藏-->
<div v-show="sh">我是v-show</div>
</div>
<script>
new Vue({
el: "#app",
data: {
sh: true,
},
methods: {
show: function () {
// this 指的是Vue實例對象
this.sh = !this.sh; // 取反(當sh爲真時改成假，反之爲假時改成真)
}
}
})
</script>
- 單項數據綁定和雙向數據綁定
- 單項數據綁定
<div id="app">
<!--v-bind單項數據綁定,改變頁面的值並不影響data中的值-->
<input type="text" :value="msg">
<input type="text" :value="msg">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "Hello World",
}
})
console.log(vm);
</script>
- 雙向數據綁定
<div id="app">
<!--不只data中的數據能夠影響到view頁面,並且view頁面發生改變時,一樣能夠改變data中的數據,這個就叫雙向綁定-->
<!--v-model內部綁定的是value,因此要求標籤必須有value屬性才能用-->
<!--應用:在登陸頁面中能夠經過雙向綁定的方式,利用data中的值,獲取到頁面的改變-->
<input type="text" v-model="msg">
<input type="text" v-model="msg">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "Hello World",
}
})
console.log(vm); // 改變data中msg的數據,view頁面的值也跟着改變,改變view中的值,data中的msg數據也跟着改變
</script>
- v-model中的修飾符
.lazy
.number
.trim
<div id="app">
<!--.lazy 當光標移除文本框時 才進行雙向綁定,也就是說延遲了雙向綁定-->
<input type="text" v-model.lazy="msg">
<input type="text" v-model="msg">
<!--.number 當輸入的是一段數字字符串的時候,使用.number會自動轉化爲number類型.-->
<button @click="getValue">獲取</button>
<input type="text" v-model.number="value">
<!--.trim 去除左右兩邊的空格-->
<input type="text" v-model.trim="msg">
<input type="text" v-model="msg">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "hello world",
value:""
},
methods:{
getValue:function () {
console.log(typeof this.value);
}
}
})
</script>
產品案例
功能分析
- 在data中定義一組數組，供咱們使用，arr [ { name , time } , { name , time } , {} ] 構建一個json
- v-for用遍歷數組的方式將數據進行展示
- 添加操做，設置文本框和按鈕，當點擊按鈕時，將文本框的數據添加到arr數據數組中，使用mvvm的渲染方式會直接改變頁面的結構 ( push )
- 刪除操做，確認刪除行的index索引，傳入函數中 ( splice )
編號 品牌名稱 建立時間 操做 1 寶馬 2017-12-1 11:11:11 刪除 2 奧迪 2017-12-1 12:12:12 刪除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="引入vue.js文件"></script>
<style>
table {
width: 800px;
text-align: center;
border: 1px solid #000;
border-collapse: collapse;
margin: 0 auto;
}
table th {
background-color: #0094ff;
color: #fff;
}
table th, table td {
border: 1px solid #000;
padding: 2px;
}
</style>
</head>
<body>
<div id="app">
<input type="text" placeholder="品牌名稱" v-model="value" @keyup.add="add"/>
<button @click="add">添加數據</button>
<table>
<tr>
<th>編號</th>
<th>品牌名稱</th>
<th>建立時間</th>
<th>操做</th>
</tr>
<tr v-for="(item,index) in arr">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.time}}</td>
<!--渲染列表時的index能夠傳入到函數中做爲每個列表項的惟一標示-->
<td><a href="#" @click.prevent="del(index)">刪除</a></td>
</tr>
</table>
</div>
</body>
<script>
Vue.config.keyCodes.add = 13;
new Vue({
el: "#app",
data: {
// 在這裏定義一組數據,供展示使用
arr: [
{name: "寶馬", time: new Date},
{name: "奔馳", time: new Date},
{name: "大衆", time: new Date}
],
//定義input上添加的數據
value:""
},
methods:{
//添加數據函數
add:function () {
//獲取input框中的值
var value=this.value;
// 將input框中的value追加到arr數據中
this.arr.push({name:value,time:new Date});
//將input框置空
this.value="";
},
del:function (index) {
//從當前索引開始刪除一個，至關於刪除了自己
this.arr.splice(index,1);
}
}
})
</script>
</html>
相關文章
- 1. vue.js - 1
- 2. 1. Vue.js和MVVM
- 3. Vue.js筆記（1）
- 4. Vue.js 基礎1
- 5. Vue.js ---Hello---1
- 6. Vue.js小案例(1)
- 7. Vue.js學習No.1
- 8. vue.js學習（1） vue.js 第一個實例
- 9. Vue.js基礎教程（1）--Vue.js介紹
- 10. 遇見 vue.js --------阿文的vue.js學習筆記（1）-----初識vue.js
- 更多相關文章...
- • 屏幕分辨率 統計 - 瀏覽器信息
- • R 列表 - R 語言教程
- • 算法總結-二分查找法
- • 算法總結-股票買賣
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
