v-model雙向綁定，{{}}報(bào)錯(cuò)，HBulider和VScode使用vue指令，v-bind:class【詩書畫唱】
目錄：
例子1：在Vscode中用v-bind:class來控制是否使用class對(duì)應(yīng)的css樣式（ture就是使用，false就是不使用）
firstVue.vue
index.js
例子2：使用{{}}打印出以下表達(dá)式的值：
data:{
? ? i:3,
? ? j:4,
? ? stu:{
? ? ? ? name:'張三',
? ? ? ? age:18
? ? },
? ? msg:'apple'
}
顯示i+j的和
顯示張三
如果age大于等于18就顯示成人，如果小于18就顯示未成年
顯示msg的長(zhǎng)度
顯示msg中下標(biāo)為3的字符
個(gè)人解析：首先題目中的data是對(duì)象，這個(gè)通常是HBuilder中使用的寫法（Vscode中的data是函數(shù)，是寫成data()的），所以我在HBuilder中做這道題
{{}}使用的作業(yè).html
例子3：頁面上有一個(gè)多選框按鈕，點(diǎn)擊這個(gè)按鈕就顯示一個(gè)圖片，取消點(diǎn)擊則顯示另外一個(gè)圖片
頁面上有一個(gè)多選框按鈕，點(diǎn)擊這個(gè)按鈕就顯示一個(gè)圖片，取消點(diǎn)擊則顯示另外一個(gè)圖片.html
v-model="isUse"表示是否使用雙向綁定
v-bind:class="{'caoZuo2':isUse}"表示
當(dāng)isUse為true時(shí)，class='caoZuo1'會(huì)被class="caoZuo1 caoZuo2"取代，或者說是覆蓋，
會(huì)有class='caoZuo2'的效果。caoZuo:是"操作"的意思。
例子4：data中有一個(gè)user對(duì)象，如果user.name有值，就顯示購(gòu)物車按鈕，如果沒有值就顯示登錄按鈕（在vscode中完成）
ZuJian1.vue
index.js
代碼：
{{}}中的表達(dá)式.html
v-bind指令.html
v-for指令.html
?v-for是用來遍歷的，?v-for="val in stu"這種方式只能遍歷出屬性值，
v-for="(val,key) in stu"可以遍歷出key和屬性值。
v-if指令.html
?v-if，?v-else在
<div v-if="visible">歡迎登錄</div>
<div v-else>不可見</div>等類似的代碼中，有進(jìn)行條件判斷的作用。
v-model指令.html
v-model可以進(jìn)行雙向綁定（我個(gè)人認(rèn)為v-model很好用，以后可能會(huì)常常用。一般我認(rèn)為好用的，以后會(huì)常常用，并且可能也記憶得更牢固一些），也就是被雙向綁定的2個(gè)標(biāo)簽中的內(nèi)容會(huì)一起跟著改變，是可以互相影響對(duì)方的，任意一方的內(nèi)容改變，如果另一方不動(dòng)，另一方就會(huì)隨之發(fā)生改變。
v-model.number就是雙向綁定中，使用v-model.number的input中如果先輸非數(shù)字，那么可以繼續(xù)輸入數(shù)字和非數(shù)字，仍然有雙向綁定的效果。但是如果一開始輸入數(shù)字，有雙向綁定的效果，后輸入非數(shù)字，輸入非數(shù)字時(shí)沒有雙向綁定的效果，之后無論輸入非數(shù)字還是數(shù)字都仍然沒有雙向綁定的效果。
第一個(gè)VUE程序.html
個(gè)人寫的代碼解析.html
不要用num++,因?yàn)檫@個(gè)是修改變量的值了，會(huì)導(dǎo)致組件循環(huán)渲染等等，
? ?進(jìn)而報(bào)You may have an infinite update loop in a component render function，
? ?在組件呈現(xiàn)函數(shù)中可能有一個(gè)無限更新循環(huán)。
? ?的錯(cuò)誤。可能是因?yàn)?data類似于state狀態(tài)機(jī)，如果變量改變，就會(huì)多次渲染。
? 每次渲染時(shí)會(huì)渲染整個(gè)HTML的代碼等等，后面渲染到 <p>{{num+1}}</p>這個(gè)部分，因?yàn)?/span>
變量改變了，所以會(huì)重頭渲染整個(gè)HTML的代碼等等，又會(huì)渲染到 <p>{{num+1}}</p>這個(gè)部分，不同
的循環(huán)，后面為什么會(huì)到num=100左右就停止呢？因?yàn)榈?00左右的時(shí)候就是內(nèi)存已經(jīng)消耗光，溢出了，
所以瀏覽器會(huì)報(bào)錯(cuò) 。
? ?
??
?以下就是修改變量的值了，不要像下面那樣寫。
? <p>{{num=num+1}}</p>
<p>{{num++}}</p>
<p>{{typeof(num++)}}</p>
{{}}:外面的花括號(hào)是說：我這里面寫的是js語句
內(nèi)部的花括號(hào)是說：我里面的不是要顯示的文字，而是變量，我要把變量的值解析放在這
v-html="sshc"中的sshc是js部分的new Vue中的內(nèi)容為HTML代碼的變量的名字。
? <p v-html="sshc"></p>的意思是把sshc的HTML內(nèi)容，內(nèi)嵌和渲染到<p></p>里面。
科普（知識(shí)普及）
Vue/React中出現(xiàn)兩個(gè)花括號(hào)的原因
Vue: scoped 樣式與 CSS Module的區(qū)別，，
例子1：在Vscode中用v-bind:class來控制是否使用class對(duì)應(yīng)的css樣式（ture就是使用，false就是不使用）
firstVue.vue
<template>
????<div?v-bind:class="{'bg':?isUser}">{{msg}}</div>
</template>
<script>
export?default?{
????data()?{
????????return?{
????????????msg:?'我的第一個(gè)vue程序',
????????????isUser:?true
????????}
????}
}
</script>
<style?scoped>
.bg?{
????width:?100px;
????height:?100px;
????background-color:?pink;
}
</style>
index.js
import?Vue?from?'vue'
import?Router?from?'vue-router'
import?HelloWorld?from?'@/components/HelloWorld'
//自己加入的必須加載和要使用組件的代碼?START
import?firstVue?from?'@/components/firstVue'
//自己加入的必須加載和要使用組件的代碼?END
Vue.use(Router)
export?default?new?Router({
??routes:?[
???
????//http://localhost:8080/#/firstVue
????{
??????path:?'/firstVue',
??????name:?'firstVue',//路由跳轉(zhuǎn)時(shí)使用
??????component:?firstVue//記得寫加載要使用的這個(gè)組件的代碼
????}
????,
????//自己加的代碼?END
??]
})
//解決重復(fù)點(diǎn)擊路由，界面跳轉(zhuǎn)等時(shí)報(bào)錯(cuò)的代碼?START
const?originalPush?=?Router.prototype.push
Router.prototype.push?=?function?push?(location)?{
??return?originalPush.call(this,?location).catch(err?=>?err)
}
//解決重復(fù)點(diǎn)擊路由，界面跳轉(zhuǎn)等時(shí)報(bào)錯(cuò)的代碼?END
例子2：使用{{}}打印出以下表達(dá)式的值：
data:{
? ? i:3,
? ? j:4,
? ? stu:{
? ? ? ? name:'張三',
? ? ? ? age:18
? ? },
? ? msg:'apple'
}
顯示i+j的和
顯示張三
如果age大于等于18就顯示成人，如果小于18就顯示未成年
顯示msg的長(zhǎng)度
顯示msg中下標(biāo)為3的字符
個(gè)人解析：首先題目中的data是對(duì)象，這個(gè)通常是HBuilder中使用的寫法（Vscode中的data是函數(shù)，是寫成data()的），所以我在HBuilder中做這道題
{{}}使用的作業(yè).html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/vue.js"></script>
</head>
<body>
<div id="app">
顯示i+j的和：
<p>{{i+j}}</p>
顯示張三：
<p>{{stu.name}}</p>
如果age大于等于18就顯示成人，如果小于18就顯示未成年:
<p>{{stu.age>=18? '成人' : '未成年'}}</p>
顯示msg的長(zhǎng)度：
<p>{{msg.length}}</p>
顯示msg中下標(biāo)為3的字符:
<p>{{msg[3]}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
i: 3,
j: 4,
stu: {
name: '張三',
age: 18
},
msg: 'apple'
}
});
</script>
</body>
</html>
例子3：頁面上有一個(gè)多選框按鈕，點(diǎn)擊這個(gè)按鈕就顯示一個(gè)圖片，取消點(diǎn)擊則顯示另外一個(gè)圖片
頁面上有一個(gè)多選框按鈕，點(diǎn)擊這個(gè)按鈕就顯示一個(gè)圖片，取消點(diǎn)擊則顯示另外一個(gè)圖片.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.caoZuo1 {
display: none;
}
.caoZuo2 {
display: block;
}
</style>
<script type="text/javascript" srcc="js/vue.js" ></script>
</head>
<body>
<div id="app">
<!--v-model="isUse"表示是否使用雙向綁定
v-bind:class="{'caoZuo2':isUse}"表示
當(dāng)isUse為true時(shí)，class='caoZuo1'會(huì)被class="caoZuo1 caoZuo2"取代，或者說是覆蓋，
會(huì)有class='caoZuo2'的效果。caoZuo:是"操作"的意思。
-->
<input type="checkbox" name="item"? v-model="isUse">顯示圖片? ? ? ? ?
? ? ? ? ? <img v-bind:src="path"? class='caoZuo1'? v-bind:class="{'caoZuo2':isUse}"/>
? ? ??
</div>
<script>
new Vue({
el: '#app',
data: {
path: 'img/GOSICK4.jpg',
? ? ? ? ? ? ? ? ? ? ?isUse: false
}
});
</script>
</body>
</html>
例子4：data中有一個(gè)user對(duì)象，如果user.name有值，就顯示購(gòu)物車按鈕，如果沒有值就顯示登錄按鈕（在vscode中完成）
ZuJian1.vue
<template>
??
???<div?>
???????user.name!=null的結(jié)果:
???????{{user.name!=''}}
<div??v-html="buy_car_button"?class='caoZuo1'?
?v-bind:class="{'caoZuo2':?user.name!=null&&user.name!=''?true:false}"></div>?
?
<div??v-html="login_button"???class='caoZuo1'?
?v-bind:class="{'caoZuo2':?user.name!=null&&user.name!=''?false:true}"></div>
???</div>
</template>
<script>
export?default?{
????data()?{
????????return?{
????????????user:?{name:"詩書畫唱"},
???????????buy_car_button:"<input?type='button'?value='購(gòu)物車'>",
???????????login_button:"<input?type='button'?value='登錄按鈕'>"
????????}
????}
}
</script>
/*?個(gè)人理解：
css?樣式天生又是全局性的，所以到最后總是極容易地就發(fā)生樣式?jīng)_突——要么是樣式相互覆蓋。
用<style?scoped></style>可以使得我們的樣式只被應(yīng)用到被作用的組件中的元素上。*/?
<style?type="text/css">
????????????
????????????
????????????.caoZuo1?{
????????????????display:?none;
????????????}
????????????.caoZuo2?{
????????????????display:?block;
????????????}
????????</style>
index.js
import?Vue?from?'vue'
import?Router?from?'vue-router'
import?HelloWorld?from?'@/components/HelloWorld'
//自己加入的必須加載和要使用組件的代碼?START
import?ZuJian1?from?'@/components/ZuJian1'
//自己加入的必須加載和要使用組件的代碼?END
Vue.use(Router)
export?default?new?Router({
??routes:?[
???
????//http://localhost:8080/#/ZuJian1
????{
??????path:?'/ZuJian1',
??????name:?'ZuJian1',//路由跳轉(zhuǎn)時(shí)使用
??????component:?ZuJian1//記得寫加載要使用的這個(gè)組件的代碼
????}
????,
????//自己加的代碼?END
??]
})
//解決重復(fù)點(diǎn)擊路由，界面跳轉(zhuǎn)等時(shí)報(bào)錯(cuò)的代碼?START
const?originalPush?=?Router.prototype.push
Router.prototype.push?=?function?push?(location)?{
??return?originalPush.call(this,?location).catch(err?=>?err)
}
//解決重復(fù)點(diǎn)擊路由，界面跳轉(zhuǎn)等時(shí)報(bào)錯(cuò)的代碼?END
終端中輸入npm run dev，按回車鍵后：
http://localhost:8080/#/ZuJian1
http://localhost:8080/#/ZuJian1
代碼：
{{}}中的表達(dá)式.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/vue.js" ></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<!-- 會(huì)直接顯示Html文本 -->
<p>{{ctx}}</p>
<!-- 通過v-html指令可以直接解析為html標(biāo)簽 -->
<p v-html="ctx"></p>
<p>{{flag ? 'On' : 'Off'}}</p>
<p>{{5 * num}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '這是我的第一個(gè)vue程序',
ctx: '<input type="button" value="點(diǎn)擊" />',
flag: true,
num: 5
}
});
</script>
</body>
</html>
v-bind指令.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.bg {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script type="text/javascript" srcc="js/vue.js" ></script>
</head>
<body>
<div id="app">
<div v-bind:class="{'bg':isUser}"></div>
<a v-bind:href="url">跳轉(zhuǎn)到百度</a>
<img v-bind:src="path" />
<input v-bind:type="t" value="測(cè)試"/>
</div>
<script>
new Vue({
el: '#app',
data: {
isUser:true,
url: 'http://www.baidu.com',
path: 'img/GOSICK4.jpg',
t: 'text'
}
});
</script>
</body>
</html>
v-for指令.html
?v-for是用來遍歷的，?v-for="val in stu"這種方式只能遍歷出屬性值，
v-for="(val,key) in stu"可以遍歷出key和屬性值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/vue.js" ></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="p in pros">
<a href="#">{{p.pn}}</a>價(jià)格：{{p.price}}
</li>
</ol>
<ul>
<!-- 這種方式只能拿到屬性值 -->
<li v-for="val in stu">
{{val}}
</li>
<!-- key和屬性值都要拿到 -->
<li v-for="(val,key) in stu">
{{key}}:{{val}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
pros: [
? ? {pn: '鳳爪',price: 4.7},
? ? {pn: '巧克力',price: 8.5},
? ? {pn: '果凍',price: 10.5}
],
stu: {
name: 'Tom',
age: 18,
sex: '男'
}
}
});
</script>
</body>
</html>
v-if指令.html
?v-if，?v-else在
<div v-if="visible">歡迎登錄</div>
<div v-else>不可見</div>等類似的代碼中，有進(jìn)行條件判斷的作用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/vue.js" ></script>
</head>
<body>
<div id="app">
<div v-if="visible">歡迎登錄</div>
<div v-else>不可見</div>
<div v-if="score >=90 && score <= 100">優(yōu)秀</div>
<div v-else-if="score < 90 && score >= 80">良好</div>
<div v-else-if="score < 80 && score >= 70">一般</div>
<div v-else-if="score < 70 && score >= 60">及格</div>
<div v-else>不及格</div>
</div>
<script>
const vue = new Vue({
el: '#app',
data: {
visible: false,
score: 100
}
});
</script>
</body>
</html>
v-model指令.html
v-model可以進(jìn)行雙向綁定（我個(gè)人認(rèn)為v-model很好用，以后可能會(huì)常常用。一般我認(rèn)為好用的，以后會(huì)常常用，并且可能也記憶得更牢固一些），也就是被雙向綁定的2個(gè)標(biāo)簽中的內(nèi)容會(huì)一起跟著改變，是可以互相影響對(duì)方的，任意一方的內(nèi)容改變，如果另一方不動(dòng)，另一方就會(huì)隨之發(fā)生改變。
v-model.number就是雙向綁定中，使用v-model.number的input中如果先輸非數(shù)字，那么可以繼續(xù)輸入數(shù)字和非數(shù)字，仍然有雙向綁定的效果。但是如果一開始輸入數(shù)字，有雙向綁定的效果，后輸入非數(shù)字，輸入非數(shù)字時(shí)沒有雙向綁定的效果，之后無論輸入非數(shù)字還是數(shù)字都仍然沒有雙向綁定的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.bg {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script type="text/javascript" srcc="js/vue.js" ></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<!-- 修改msg屬性，會(huì)導(dǎo)致輸入文本框中的值跟著變化?
? 修改輸入文本框中的值，會(huì)導(dǎo)致msg屬性也跟著發(fā)生變化? -->
<input type="text" v-model.number="msg"/>
<label>同意</label><input type="checkbox" v-model="isAgree" />
<div v-bind:class="{'bg':isAgree}"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'admin',
isAgree: true
}
})
</script>
</body>
</html>
第一個(gè)VUE程序.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/vue.js" ></script>
</head>
<body>
<div id="ctx"><h1>{{msg}},{{name}}</h1></div>
<script>
new Vue({
el: '#ctx',
data: {//頁面中需要使用的一些數(shù)據(jù)
msg: 'Hello world',
name: '張三'
}
})
</script>
</body>
</html>
個(gè)人寫的代碼解析.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>詩書畫唱這個(gè)up主好有才！(runoob.com)</title>
<!--<script src="https://unpkg.com/vue/dist/vue.js"></script>-->
<script srcc="js/vue.js"></script>
</head>
<style>
.active {
? ? width: 100px;
? ? height: 100px;
? ? background: green;
}
.text-danger {
? ? background: red;
}
</style>
<body>
<div id="app">
<!--{{}}:外面的花括號(hào)是說：我這里面寫的是js語句
內(nèi)部的花括號(hào)是說：我里面的不是要顯示的文字，而是變量，我要把變量的值解析放在這-->
? <p>{{ message }}</p>
??
? <p v-html="sshc"></p>
??
? <!--v-html="sshc"中的sshc是js部分的new Vue中的內(nèi)容為HTML代碼的變量的名字。
? <p v-html="sshc"></p>的意思是把sshc的HTML內(nèi)容，內(nèi)嵌和渲染到<p></p>里面。-->
??
??
??
? <p>{{ flag?'給三連':'點(diǎn)贊 '}}</p>
?
? ? ?<p>{{typeof(num)}}</p>
? ? ? ?<p>{{num}}</p>
? ? ? ?
? ? <p>{{num+1}}</p>
??
<!--不要用num++,因?yàn)檫@個(gè)是修改變量的值了，會(huì)導(dǎo)致組件循環(huán)渲染等等，
? ?進(jìn)而報(bào)You may have an infinite update loop in a component render function，
? ?在組件呈現(xiàn)函數(shù)中可能有一個(gè)無限更新循環(huán)。
? ?的錯(cuò)誤?？赡苁且?yàn)?data類似于state狀態(tài)機(jī)，如果變量改變，就會(huì)多次渲染。
? 每次渲染時(shí)會(huì)渲染整個(gè)HTML的代碼等等，后面渲染到 <p>{{num+1}}</p>這個(gè)部分，因?yàn)?/span>
變量改變了，所以會(huì)重頭渲染整個(gè)HTML的代碼等等，又會(huì)渲染到 <p>{{num+1}}</p>這個(gè)部分，不同
的循環(huán)，后面為什么會(huì)到num=100左右就停止呢？因?yàn)榈?00左右的時(shí)候就是內(nèi)存已經(jīng)消耗光，溢出了，
所以瀏覽器會(huì)報(bào)錯(cuò) 。
? ?
??
?以下就是修改變量的值了，不要像下面那樣寫。
? <p>{{num=num+1}}</p>
<p>{{num++}}</p>
<p>{{typeof(num++)}}</p>-->
? ?
? ? <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">
? ?
? ? <p>{{bangDing2}}</p>
? ? ?
? ? <input? v-model="bangDing2"? ?value={{bangDing2}}/>
? </div>
</div>
<script>
new Vue({
? el: '#app',
? data: {
? ? message: '詩書畫唱這個(gè)up主好有才！要給他的作品三連！',
? ? sshc:'<button>詩書畫唱</button>',
? ? flag:true,
? ? num:1,
? ??
? ? ?isActive: true,
? ? hasError: true,
? ? bangDing2:"雙向綁定"
? }
})
</script>
</body>
</html>
科普（知識(shí)普及）
Vue/React中出現(xiàn)兩個(gè)花括號(hào)的原因
{{}}:外面的花括號(hào)是說“我這里面寫的是js語句”，
內(nèi)部的花括號(hào)是說“我里面的不是要顯示的文字，而是變量，我要把變量的值解析放在這”
Vue: scoped 樣式與 CSS Module的區(qū)別，，
