Vue核心語法
vue下載
我們以前都是用的框架來搭建的，省去了很多內(nèi)容，今天我們從原始的方式來使用vue，下面是下載地址
響應(yīng)式
未使用響應(yīng)式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatiable" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app"></div>
<script src="vue.min.js"></script> <!--這里引入的就是我們下載下來的vue.main.js-->
<script>
let value = '這是內(nèi)容'
document.getElementById('app').textContent=value
// value = '新內(nèi)容'
// document.getElementById('app').textContent=value
const vm=new Vue({
})
</script>
</body>
</html>
我們把注釋去掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatiable" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app"></div>
<script src="vue.min.js"></script> <!--這里引入的就是我們下載下來的vue.main.js-->
<script>
let value = '這是內(nèi)容'
document.getElementById('app').textContent=value
value = '新內(nèi)容'
document.getElementById('app').textContent=value
const vm=new Vue({
})
</script>
</body>
</html>
從上面的演示可以看到，沒有用響應(yīng)式的時候，如果我們要變更元素，需要處理數(shù)據(jù)的邏輯，還需要再次操作一下DOM，很繁瑣
let、var、const
const和let的關(guān)系
均不可重復(fù)聲明
let聲明的變量可以改變，值和類型都可以改變；const聲明的常量不可以改變，這意味著，const一旦聲明，就必須立即初始化，不能以后再賦值。
let 和 const 是值的修改問題
let和var的關(guān)系
var是函數(shù)作用域，而let是塊作用域。在函數(shù)內(nèi)聲明了var，整個函數(shù)內(nèi)都是有效的，在for循環(huán)內(nèi)定義了一個var變量，實(shí)際上其在for循環(huán)以外也是可以訪問的，而let由于是塊作用域，所以如果在塊作用域內(nèi)（for循環(huán)內(nèi)）定義的變量，在其外面是不可被訪問的。
使用響應(yīng)式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatiable" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app"><!--1、先為元素定義一個id，后續(xù)這個元素會被定義為vue的生效位置-->
<p>{{title}}</p> <!--4、這里的{{title}}即為插值表達(dá)式-->
<p>{{content}}</p>
</div>
<script src="vue.min.js"></script> <!--這里引入的就是我們下載下來的vue.main.js-->
<script>
const vm=new Vue({
el: '#app' ,//2、 #號，即帶選擇器的使用方式，屬性el，用于設(shè)置Vue的生效位置 ，選定了元素之后，它所有的響應(yīng)式以及后續(xù)的語法功能，只會在app這個元素內(nèi)部生效，在其他元素中編寫的話，是沒有效果的
data(){ // 3、 固定寫法,協(xié)商需要響應(yīng)式的數(shù)據(jù)
return{
title: '這是標(biāo)題文本',
content: '這是文本內(nèi)容'
}
}
})
</script>
</body>
</html>
發(fā)現(xiàn)就展示出來了
還記得我們const vm=new Vue，那我們想要訪問data里的數(shù)據(jù)，就可以通過這個vm實(shí)例來訪問
我們也可以操作元素進(jìn)行變更
這就是響應(yīng)式編程了
這里綁定生效的位置，是不是讓人想起了Vue腳手架創(chuàng)建的項(xiàng)目
methods屬性
methods，顧名思義，是方法，里面就存放著我們定義的各種方法，比如說我要打印一寫內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatiable" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<p>{{output()}}</p> <!--3、調(diào)用了output方法-->
</div>
<script src="vue.min.js"></script>
<script>
const vm=new Vue({
el: '#app' ,
data(){
return{
title: '這是標(biāo)題文本',
content: '這是文本內(nèi)容'
}
},
// 1、methods屬性，沒有()，和data對比一下
methods:{
output(){//2、這個就是帶()的，定義的方法
console.log("methods方法執(zhí)行了")
return '標(biāo)題為:'+ this.title+',內(nèi)容為:'+this.content
}
}
})
</script>
</body>
</html>
計算屬性
那如果我要執(zhí)行三次呢
復(fù)制兩遍
<p>{{output()}}</p> <!--3、調(diào)用了output方法-->
問題是我什么都沒變，還是調(diào)用了三次，是消耗資源的，這就引申出了計算屬性這個概念
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatiable" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<p>{{output()}}</p>
<p>{{output()}}</p>
<p>{{output()}}</p>
<p>{{returnContent}}</p> <!--3、多次執(zhí)行計算屬性中的方法，記?。哼@個計算屬性調(diào)用的時候不能帶()！-->
<p>{{returnContent}}</p>
<p>{{returnContent}}</p>
</div>
<script src="vue.min.js"></script>
<script>
const vm=new Vue({
el: '#app' ,
data(){
return{
title: '這是標(biāo)題文本',
content: '這是文本內(nèi)容'
}
},
methods:{
output(){
console.log("methods方法執(zhí)行了")
return '標(biāo)題為:'+ this.title+',內(nèi)容為:'+this.content
}
},
computed: { //1、計算屬性
returnContent(){ //2、計算屬性中定義方法
console.log("computed方法執(zhí)行了")
return '標(biāo)題為:'+ this.title+',內(nèi)容為:'+this.content
}
}
})
</script>
</body>
</html>
我們發(fā)現(xiàn)明明寫了三行
<p>{{returnContent}}</p>
但是只執(zhí)行了一次，這就是計算屬性的特點(diǎn)：具有緩存性
有意思
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatiable" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<p>{{output()}}</p>
<p>{{output()}}</p>
<p>{{output()}}</p>
<p>{{returnContent}}</p> <!--3、多次執(zhí)行計算屬性中的方法，記?。哼@個計算屬性調(diào)用的時候不能帶()！-->
<p>{{returnContent}}</p>
<p>{{returnContent}}</p>
<p>{{updateTitle()}}</p> <!--4、修改一下data信息-->
</div>
<script src="vue.min.js"></script>
<script>
const vm=new Vue({
el: '#app' ,
data(){
return{
title: '這是標(biāo)題文本',
content: '這是文本內(nèi)容'
}
},
methods:{
output(){
console.log("methods方法執(zhí)行了")
return '標(biāo)題為:'+ this.title+',內(nèi)容為:'+this.content
},
updateTitle(){
this.title='new title'
console.log("updateTitle方法執(zhí)行了")
}
},
computed: { //1、計算屬性
returnContent(){ //2、計算屬性中定義方法
console.log("computed方法執(zhí)行了")
return '標(biāo)題為:'+ this.title+',內(nèi)容為:'+this.content
}
}
})
</script>
</body>
</html>
說明元素變更后，所有的頁面上的涉及了這個元素變更的位置，綁定的方法都執(zhí)行了一遍，甚至包括元素變更的方法自己
偵聽器
監(jiān)聽你某個數(shù)據(jù)有沒有變化，比如說某個data里的數(shù)據(jù)變化了，并不是只想變更頁面元素，還想做點(diǎn)其他的東西，類似于一個鉤子函數(shù)，而且，偵聽的一定是響應(yīng)式的數(shù)據(jù)哈，不是響應(yīng)性的數(shù)據(jù)是不可以的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatiable" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<p>{{title}}</p> <!--3、元素展示，便于觀察-->
</div>
<script src="vue.min.js"></script>
<script>
const vm=new Vue({
el: '#app' ,
data(){
return{
title: '這是標(biāo)題文本',
content: '這是文本內(nèi)容'
}
},
watch:{ //1、監(jiān)聽屬性，也就是偵聽器
title(newValue,oldValue){ //2、定義方法，這個title就是方法名，也等于響應(yīng)式數(shù)據(jù)的key，里面有兩個參數(shù)，一個是新值一個是舊值
console.log(newValue,oldValue)
}
}
})
</script>
</body>
</html>
它的作用就是監(jiān)聽元素的變化，實(shí)際工作中，如果某個元素有變化，你可以發(fā)起網(wǎng)絡(luò)請求或者修改數(shù)據(jù)庫，隨需求變化
指令
渲染指令
v-for
v-html
v-text
v-if //控制是否顯示
v-show //也是控制是否顯示，但是就算不顯示，元素也不會銷毀，只是不展示出來而已，而v-if則是直接銷毀，元素的創(chuàng)建與銷毀的成本是非常高的
v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatiable" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<p v-for="item in obj">{{item}}</p>
<p v-for="(item,key,index) in obj">{{item}}:{{key}}:{{index}}</p>
</div>
<script src="vue.min.js"></script>
<script>
const vm=new Vue({
el: '#app' ,
data(){
return{
obj: {a:10,b:20,c:30}
}
}
})
</script>
</body>
</html>
屬性指令
v-bind
v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatiable" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<p title="就像鼠標(biāo)放在圖片上才顯示出來的小字一樣">這是原生的</p>
<!--現(xiàn)在想要這個title不寫死了，而是和響應(yīng)式數(shù)據(jù)title綁定在一起-->
<p v-bind:title = "title">這是使用v-bind:的</p>
<p :title = "title">這是使用:的</p>
</div>
<script src="vue.min.js"></script>
<script>
const vm=new Vue({
el: '#app' ,
data(){
return{
title: 'hello'
}
}
})
</script>
</body>
</html>
事件指令
v-on
v-on:click
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatiable" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<button v-on:click="output">按鈕綁定點(diǎn)擊方法</button>
<button @click="output2">注意不能用:來簡寫，要用@符號</button>
</div>
<script src="vue.min.js"></script>
<script>
const vm=new Vue({
el: '#app' ,
data(){
return{
}
},
methods:{
output(){
console.log("methods方法執(zhí)行了")
},
output2(){
console.log("2methods方法執(zhí)行了")
}
}
})
</script>
</body>
</html>
表單指令
怎么理解這個表單的意思，我的理解就是頁面上可操作可變化的元素就是表單，例如：輸入框
v-model
v-model
只能用于表單的雙向綁定，雙向的意思就比如頁面上的一個輸入框里的內(nèi)容綁定了一個響應(yīng)式數(shù)據(jù)，那有人操作了頁面上輸入框的內(nèi)容，那響應(yīng)式數(shù)據(jù)就也變更了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatiable" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<!--通過v-model：的方式綁定了響應(yīng)式數(shù)據(jù)-->
<input type="text" v-model="inputValue">
<!--只是用來展示，方便觀察數(shù)據(jù)的變化-->
<p v-text="inputValue"></p>
</div>
<script src="vue.min.js"></script>
<script>
const vm=new Vue({
el: '#app' ,
data(){
return{
inputValue: '默認(rèn)內(nèi)容'
}
}
})
</script>
</body>
</html>
修飾符
什么是修飾符，修飾符是用來修飾指令的文章來源：http://www.zghlxwxcb.cn/news/detail-533139.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatiable" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<input type="text" v-model="inputValue">
<p v-text="inputValue"></p>
<!--通過trim修飾的v-model，就可以去除掉兩邊的空格-->
<input type="text" v-model.trim="inputValue">
</div>
<script src="vue.min.js"></script>
<script>
const vm=new Vue({
el: '#app' ,
data(){
return{
inputValue: '默認(rèn)內(nèi)容'
}
}
})
</script>
</body>
</html>
在第一個輸入框內(nèi)輸入空格
在第二個輸入框內(nèi)輸入空格
文章來源地址http://www.zghlxwxcb.cn/news/detail-533139.html
到了這里，關(guān)于Vue核心語法的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
