vue2.5入門（推薦，差代碼）
課程地址：https://www.imooc.com/learn/980html
教程：https://cn.vuejs.org/v2/guidevue
放在頭部，避免頁面出現抖屏node
掛載點react
下面是原生webpack
模板es6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
</div>
<script>
// 掛載點，模板，實例之間的關係
new Vue({
el: "#root",//掛載點
template: '<h1>{{msg}}</h1>',//模板
data: {
msg: "hello world1"//實例
}
})
// 在vue內部實際操做
// var dom = document.getElementById('root')
// dom.innerHTML = "hello world"
</script>
</body>
</html>
插值表達式，寫法一web
v-text指令，寫法二vue-cli
v-html指令，寫法三npm
v-html與v-text區別：瀏覽器
被轉義
未被轉義
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<!-- 寫法一：插值表達式 -->
<h1>{{number1}}</h1>
<!-- 寫法二：v-text指令 -->
<h1 v-text='number2'></h1>
<!-- 寫法三：v-html指令 -->
<h1 v-html='number3'></h1>
<!-- v-html與v-text區別：v-html的標籤對未被轉義 -->
<h1 v-text='number4'></h1>
<h4 v-html='number4'></h1>
</div>
<script>
// vue實例中的數據
new Vue({
el: "#root",
data: {
msg: "hello world1",
number1: '111',
number2: '222',
number3: '333',
number4: '<h1>444</h1>'
}
})
</script>
</body>
</html>
指令，v-on綁定事件，箭頭函數
簡寫
v-bind指令，綁定title，屬性綁定
等號後面內容是js表達式，不是字符串
簡寫
單項綁定
v-model指令，雙向數據綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<!-- <div v-on:click='()=>{alert(123)}'>{{content}}</div> -->
<!-- v-on事件綁定 -->
<div v-on:click='handdleclick'>{{content}}</div>
<!-- v-on事件綁定的簡寫 -->
<div @click='handdleclick'>{{content}}</div>
<!-- v-bind屬性綁定 -->
<div v-bind:title='title'>hello title1</div>
<div v-bind:title='"del lee" + title'>hello title2</div>
<!-- v-bind屬性綁定的簡寫 -->
<div :title='title'>hello title3</div>
<!-- v-model數據雙向綁定 -->
<input v-model='double'>
<div>{{double}}</div>
</div>
<script>
// vue中的綁定事件
new Vue({
el: "#root",
data: {
content: "hello world1",
title: 'this is hello world',
double: 'this is data'
},
methods: {
handdleclick: function(){
// alert(123)
this.content = 'world'
}
}
})
</script>
</body>
</html>
computed，計算屬性，若是沒改變，會使用上一次計算的緩存結果
計算
和react的reselect庫很像
watch，偵聽器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
姓：<input v-model='firstName'>
名：<input v-model='lastName'>
<div>{{firstName}} {{lastName}}</div>
<div>{{fullName}}</div>
<h2>{{count}}</h2>
</div>
<script>
// vue中的計算屬性和偵聽器
new Vue({
el: "#root",
data: {
firstName: '',
lastName: '',
count: 0
},
computed: {
fullName: function(){
return this.firstName + ' ' + this.lastName
}
},
watch: {
firstName: function(){
this.count ++
},
lastName: function(){
this.count ++
}
}
})
</script>
</body>
</html>
指令v-if，會從dom樹上清除
點擊隱藏顯示
指令v-show，不從dom樹上刪除
display=none
指令v-for,數據作循環
：key會提高每項渲染數據的效率，可是要求每一項數據不一樣
添加index下標，相同數據也能夠
但若是要頻繁對數據進行排序，index會出錯。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<!-- v-if指令,會從dom上清除 -->
<div v-if='show1'>hello1</div>
<button @click=handleClick1>toggle1</button>
<!-- v-show指令,不會從dom上清除 -->
<div v-show='show2'>hello2</div>
<button @click=handleClick2>toggle2</button>
<!-- v-for指令,數據循環 -->
<ul>
<li v-for='item of list1'>{{item}}</li>
</ul>
<!-- ：key會提高每項渲染數據的效率，可是要求每一項數據不一樣 -->
<ul>
<li v-for='item of list2' :key="item">{{item}}</li>
</ul>
<!-- 添加index下標，相同數據也能夠 -->
<ul>
<li v-for='(item,index) of list3' :key="item">{{item}}</li>
</ul>
</div>
<script>
// vue中的計算屬性和偵聽器
new Vue({
el: "#root",
data: {
show1: true,
show2: true,
list1: [1,1,1],
list2: [4,4,6],
list3: [7,6,6],
},
methods: {
handleClick1: function(){
this.show1 = !this.show1
},
handleClick2: function(){
this.show2 = !this.show2
}
}
})
</script>
</body>
</html>
點擊提交而且數據寫在下邊，input框消失
Vue.component定義的是全局組件
var一個，局部組建，在父組件外邊是調用不了的
組件聲明，實例模板裏就能夠使用
傳參
會報錯，彩曾傳遞不能直接使用
利用props來接收傳遞過來的參數
每個vue的組件又是vue的一個實例
根組件下沒有模板的時候，會用掛載點下的內容當模板
父組件到子組件經過屬性傳遞
子組件若是想被刪除，就要在父組件裏把子組件的那條數據給刪除
增長一個參數，index
接收index。經過$emit通知父組件，觸發delete事件
父組件監聽delete事件，監聽到的時候，觸發handleDelete事件
經過子組件向父組件傳值的方式，作好刪除
npm install --global vue-cli vue init webpack todolist cd todolist npm run dev
bulid下放置webpack的配置文件
config是針對開發環境和線上環境的一些文件
node_modules是項目的依賴
src是源代碼所放置的目錄
static是靜態資源
瀏覽器編譯，es6檢測，不須要改動
整個網頁app
——————————————————
src/main.js整個項目的入口文件
建立了一個vue的實例，id=‘app’的掛載點
註冊了一個局部組建App（es6語法引入）
模板就是App組建的內容
Es6:若是鍵值都相同，只寫一個App
template模板，script標籤-組建邏輯，style樣式
vue-cli裏的語法：單文件組建
npm run dev npm run start
之前data是對象,用{}，如今是函數
es6簡化寫法
this指向本組件的實例
縮寫，別名
註冊局部組建
v-for循環
父組件向子組件傳值，利用屬性傳值
子組件接收傳值
增長功能實現
傳遞index
接收傳遞
解決console裏的警告問題，加一個：key
子組件觸發事件傳遞父組件，$emit
父組件監聽delete
觸發刪除事件
子組件樣式不會影響父組件
scoped樣式做用域
去掉scoped就會影響父組件
- 1. React組件（推薦，差代碼）
- 2. Promise 入門（推薦）
- 3. 推薦系統入門代碼（關於MovieLens數據集）
- 4. java入門和入門書籍推薦
- 5. postgresql入門教程推薦
- 6. Spring入門學習推薦
- 7. C語言入門推薦
- 8. C++入門讀物推薦
- 9. Android入門書籍推薦
- 10. MySQL入門推薦書籍
- 更多相關文章...
- • Markdown 代碼 - Markdown 教程
- • Memcached入門教程 - NoSQL教程
- • YAML 入門教程
- • Java Agent入門實戰（二）-Instrumentation源碼概述
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. React組件（推薦，差代碼）
- 2. Promise 入門（推薦）
- 3. 推薦系統入門代碼（關於MovieLens數據集）
- 4. java入門和入門書籍推薦
- 5. postgresql入門教程推薦
- 6. Spring入門學習推薦
- 7. C語言入門推薦
- 8. C++入門讀物推薦
- 9. Android入門書籍推薦
- 10. MySQL入門推薦書籍