1.es6的語法
let
特點：
1.局部作用域
2.不會存在變量提升
3.變量不能重復聲明
const
特點：
1.局部作用域
2.不會存在變量提升
3.不能重復聲明，只聲明常量 不可變的量
模板字符串
tab鍵上面的反引號 ${變量名}來插值
let name = '未來';
let str = `我是${name}`
箭頭函數
function(){} === ()=>{} this的指向發生了改變
es6的類
原型 prototype 當前類的父類（繼承性）
class Person{
constructor(name){
this.name = name;
}
fav(){
}
}
Vue的基本用法
2.vue的介紹
前端有三大框架： 可以去github查看三個框架的 star星
| 框架 | 介紹 |
|---|---|
| vue | 尤雨溪,漸進式的JavaScript框架 |
| react | Facebook公司，里面的高階函數非常多，對初學者不用好 |
| angular | 谷歌公司，目前更新到6.0，學習angular得需要玩一下typescript |
Vue angular2.0 3.0~6.0 React(高階函數 es6)初學者不友好 |
vue的基本引入和創建
-
1.下載
cdn方式下載
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> -
2.引包
<script src='./vue.js'></script>
-
3.實例化
//2.實例化對象 new Vue({ el:'#app', //綁定那塊地 data:{ //數據屬性 種子 msg:'黃瓜', person:{ name:'wusir' }, msg2:'hello Vue' } });
Vue的模板語法
可以插入任何你想插入的內容，除了if-else if-else用三元運算符代替
<!--模板語法-->
<h2>{{ msg }}</h2>
<h3>{{ 'hhahda' }}</h3>
<h3>{{ 1+1 }}</h3>
<h4>{{ {'name':'alex'} }}</h4>
<h5>{{ person.name }}</h5>
<h2>{{ 1>2? '真的': '假的' }}</h2>
<p>{{ msg2.split('').reverse().join('') }}</p>
v-text和v-html
v-text相當於innerText
v-html相當於innerHTML
-----------------------------------------------
<div id="app">
{{ msg }}
<div v-text="msg"></div>
<div v-html="msg"></div>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:"#app",
data () {
/*data是一個函數,函數中return一個對象,
可以是一個空對象但是一定要有return*/
return{
msg:"<h2>你好</h2>"
}
}
})
v-if和v-show
v-show 相當於 style.display
v-if 相當於
v-if和v-show的區別
記住：
v-if vs v-show
v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。
v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。
// 相比之下，v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
// 一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。
v-bind 和v-on
v-bind可以綁定標簽中任何屬性
v-on 可以監聽 js中所有事件
簡寫：
v-bind:src 等價於 :src
v-on:click 等價於 @click
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
.active{
background-color: green;
}
</style>
</head>
<body>
<div id="app">
<!--<button v-on:click = 'handlerChange'>切換顏色</button>-->
<!--v-bind 標簽中所有的屬性 img標簽src alt,a標簽的href title id class-->
<!--<img v-bind:src="imgSrc" v-bind:alt="msg">-->
<!--<div class="box" v-bind:class = '{active:isActive}'></div>-->
<button @mouseenter = 'handlerChange' @mouseleave = 'handlerLeave'>切換顏色</button>
<!--v-bind 標簽中所有的屬性 img標簽src alt,a標簽的href title id class-->
<img :src="imgSrc" :alt="msg">
<div class="box" :class = '{active:isActive}'></div>
</div>
<!--1.引包-->
<script src='./vue.js'></script>
<script>
//數據驅動視圖 設計模式 MVVM Model View ViewModel
//聲明式的JavaScript框架
// v-bind和v-on的簡便寫法 : @
new Vue({
el: '#app',
data() {
//data中是一個函數 函數中return一個對象，可以是空對象 但不能不return
return {
imgSrc:'./1.jpg',
msg:'美女',
isActive:true
}
},
methods:{
handlerChange(){
// this.isActive = !this.isActive;
this.isActive = false;
},
handlerLeave(){
this.isActive = true;
}
}
})
</script>
</body>
</html>
v-for 遍歷列表
v-for可以遍歷列表，也可以遍歷對象
在使用vue的v-for指令的時候，一定要綁定key,避免vue幫咱們計算DOM
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
.active {
background-color: green;
}
</style>
</head>
<body>
<div id="app">
<ul v-if="data.status === 'ok'">
<!--v-for的優先級是最高的 diff算法-->
<li v-for = '(item,index) in data.users' :key="item.id" >
<h3>{{ item.id }} -- {{ item.name }} -- {{ item.age }}</h3>
</li>
</ul>
<div v-for = '(value,key) in person'>
{{ key }}-----{{ value }}
</div>
</div>
<!--1.引包-->
<script src='./vue.js'></script>
<script>
new Vue({
el: '#app',
data() {
return {
data: {
status: 'ok',
users: [
{id: 1, name: 'alex', age: 18},
{id: 2, name: 'wusir', age: 30},
{id: 3, name: 'yuan', age: 48}
]
},
person:{
name:'alex'
}
}
},
methods: {}
})
</script>
</body>
</html>
watch和computed
watch可以監聽單個屬性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<button @click = 'clickHandler'>修改</button>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data(){
return {
msg:"alex",
age:18
}
},
methods:{
clickHandler(){
this.msg = "wusir"
}
},
watch:{
//watch單個屬性，如果想監聽多個屬性 聲明多個屬性的監聽
'msg':function (value) {
console.log(value);
if (value === 'wusir'){
alert(1);
this.msg = '大武sir'
}
},
'age' :function (value) {
}
}
})
</script>
</body>
</html>
計算屬性 computed
監聽多個屬性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
<p>{{ myMsg }}</p>
<button @click='clickHandler'>修改</button>
</div>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data() {
return {
msg: "alex",
age: 18
}
},
created() {
//定時器 ajax 庫 function(){}
setInterval(() => {
})
},
methods: {
clickHandler() {
//this的指向就是當前對象
this.msg = "wusir";
this.age = 20;
},
clickHandler: function () {
console.log(this);
}
},
computed: {
myMsg: function () {
//業務邏輯
// 計算屬性默認只有getter方法
return `我的名字叫${this.msg},年齡是${this.age}`;
}
}
})
console.log(vm);
</script>
</body>
</html>
MVVM設計模式
數據驅動邏輯流程
