v-model双向绑定，{{}}报错，HBulider和VScode使用vue指令，v-bind:class【诗书画唱】
目录：
例子1：在Vscode中用v-bind:class来控制是否使用class对应的css样式（ture就是使用，false就是不使用）
firstVue.vue
index.js
例子2：使用{{}}打印出以下表达式的值：
data:{
i:3,
j:4,
stu:{
name:'张三',
age:18
},
msg:'apple'
}
显示i+j的和
显示张三
如果age大于等于18就显示成人，如果小于18就显示未成年
显示msg的长度
显示msg中下标为3的字符
个人解析：首先题目中的data是对象，这个通常是HBuilder中使用的写法（Vscode中的data是函数，是写成data()的），所以我在HBuilder中做这道题
{{}}使用的作业.html
例子3：页面上有一个多选框按钮，点击这个按钮就显示一个图片，取消点击则显示另外一个图片
页面上有一个多选框按钮，点击这个按钮就显示一个图片，取消点击则显示另外一个图片.html
v-model="isUse"表示是否使用双向绑定
v-bind:class="{'caoZuo2':isUse}"表示
当isUse为true时，class='caoZuo1'会被class="caoZuo1 caoZuo2"取代，或者说是覆盖，
会有class='caoZuo2'的效果。caoZuo:是"操作"的意思。
例子4：data中有一个user对象，如果user.name有值，就显示购物车按钮，如果没有值就显示登录按钮（在vscode中完成）
ZuJian1.vue
index.js
代码：
{{}}中的表达式.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>等类似的代码中，有进行条件判断的作用。
v-model指令.html
v-model可以进行双向绑定（我个人认为v-model很好用，以后可能会常常用。一般我认为好用的，以后会常常用，并且可能也记忆得更牢固一些），也就是被双向绑定的2个标签中的内容会一起跟着改变，是可以互相影响对方的，任意一方的内容改变，如果另一方不动，另一方就会随之发生改变。
v-model.number就是双向绑定中，使用v-model.number的input中如果先输非数字，那么可以继续输入数字和非数字，仍然有双向绑定的效果。但是如果一开始输入数字，有双向绑定的效果，后输入非数字，输入非数字时没有双向绑定的效果，之后无论输入非数字还是数字都仍然没有双向绑定的效果。
第一个VUE程序.html
个人写的代码解析.html
不要用num++,因为这个是修改变量的值了，会导致组件循环渲染等等，
进而报You may have an infinite update loop in a component render function，
在组件呈现函数中可能有一个无限更新循环。
的错误。可能是因为 data类似于state状态机，如果变量改变，就会多次渲染。
每次渲染时会渲染整个HTML的代码等等，后面渲染到 <p>{{num+1}}</p>这个部分，因为
变量改变了，所以会重头渲染整个HTML的代码等等，又会渲染到 <p>{{num+1}}</p>这个部分，不同
的循环，后面为什么会到num=100左右就停止呢？因为到100左右的时候就是内存已经消耗光，溢出了，
所以浏览器会报错 。
以下就是修改变量的值了，不要像下面那样写。
<p>{{num=num+1}}</p>
<p>{{num++}}</p>
<p>{{typeof(num++)}}</p>
{{}}:外面的花括号是说：我这里面写的是js语句
内部的花括号是说：我里面的不是要显示的文字，而是变量，我要把变量的值解析放在这
v-html="sshc"中的sshc是js部分的new Vue中的内容为HTML代码的变量的名字。
<p v-html="sshc"></p>的意思是把sshc的HTML内容，内嵌和渲染到<p></p>里面。
科普（知识普及）
Vue/React中出现两个花括号的原因
Vue: scoped 样式与 CSS Module的区别，，
例子1：在Vscode中用v-bind:class来控制是否使用class对应的css样式（ture就是使用，false就是不使用）
firstVue.vue
<template>
<div v-bind:class="{'bg': isUser}">{{msg}}</div>
</template>
<script>
export default {
data() {
return {
msg: '我的第一个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',//路由跳转时使用
component: firstVue//记得写加载要使用的这个组件的代码
}
,
//自己加的代码 END
]
})
//解决重复点击路由，界面跳转等时报错的代码 START
const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
return originalPush.call(this, location).catch(err => err)
}
//解决重复点击路由，界面跳转等时报错的代码 END
例子2：使用{{}}打印出以下表达式的值：
data:{
i:3,
j:4,
stu:{
name:'张三',
age:18
},
msg:'apple'
}
显示i+j的和
显示张三
如果age大于等于18就显示成人，如果小于18就显示未成年
显示msg的长度
显示msg中下标为3的字符
个人解析：首先题目中的data是对象，这个通常是HBuilder中使用的写法（Vscode中的data是函数，是写成data()的），所以我在HBuilder中做这道题
{{}}使用的作业.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的长度：
<p>{{msg.length}}</p>
显示msg中下标为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：页面上有一个多选框按钮，点击这个按钮就显示一个图片，取消点击则显示另外一个图片
页面上有一个多选框按钮，点击这个按钮就显示一个图片，取消点击则显示另外一个图片.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}"表示
当isUse为true时，class='caoZuo1'会被class="caoZuo1 caoZuo2"取代，或者说是覆盖，
会有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中有一个user对象，如果user.name有值，就显示购物车按钮，如果没有值就显示登录按钮（在vscode中完成）
ZuJian1.vue
<template>
<div >
user.name!=null的结果:
{{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='购物车'>",
login_button:"<input type='button' value='登录按钮'>"
}
}
}
</script>
/* 个人理解：
css 样式天生又是全局性的，所以到最后总是极容易地就发生样式冲突——要么是样式相互覆盖。
用<style scoped></style>可以使得我们的样式只被应用到被作用的组件中的元素上。*/
<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',//路由跳转时使用
component: ZuJian1//记得写加载要使用的这个组件的代码
}
,
//自己加的代码 END
]
})
//解决重复点击路由，界面跳转等时报错的代码 START
const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
return originalPush.call(this, location).catch(err => err)
}
//解决重复点击路由，界面跳转等时报错的代码 END
终端中输入npm run dev，按回车键后：
http://localhost:8080/#/ZuJian1
http://localhost:8080/#/ZuJian1
代码：
{{}}中的表达式.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>
<!-- 会直接显示Html文本 -->
<p>{{ctx}}</p>
<!-- 通过v-html指令可以直接解析为html标签 -->
<p v-html="ctx"></p>
<p>{{flag ? 'On' : 'Off'}}</p>
<p>{{5 * num}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '这是我的第一个vue程序',
ctx: '<input type="button" value="点击" />',
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">跳转到百度</a>
<img v-bind:src="path" />
<input v-bind:type="t" value="测试"/>
</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>价格：{{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>等类似的代码中，有进行条件判断的作用。
<!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">优秀</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可以进行双向绑定（我个人认为v-model很好用，以后可能会常常用。一般我认为好用的，以后会常常用，并且可能也记忆得更牢固一些），也就是被双向绑定的2个标签中的内容会一起跟着改变，是可以互相影响对方的，任意一方的内容改变，如果另一方不动，另一方就会随之发生改变。
v-model.number就是双向绑定中，使用v-model.number的input中如果先输非数字，那么可以继续输入数字和非数字，仍然有双向绑定的效果。但是如果一开始输入数字，有双向绑定的效果，后输入非数字，输入非数字时没有双向绑定的效果，之后无论输入非数字还是数字都仍然没有双向绑定的效果。
<!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属性，会导致输入文本框中的值跟着变化
修改输入文本框中的值，会导致msg属性也跟着发生变化 -->
<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>
第一个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: {//页面中需要使用的一些数据
msg: 'Hello world',
name: '张三'
}
})
</script>
</body>
</html>
个人写的代码解析.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>诗书画唱这个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">
<!--{{}}:外面的花括号是说：我这里面写的是js语句
内部的花括号是说：我里面的不是要显示的文字，而是变量，我要把变量的值解析放在这-->
<p>{{ message }}</p>
<p v-html="sshc"></p>
<!--v-html="sshc"中的sshc是js部分的new Vue中的内容为HTML代码的变量的名字。
<p v-html="sshc"></p>的意思是把sshc的HTML内容，内嵌和渲染到<p></p>里面。-->
<p>{{ flag?'给三连':'点赞 '}}</p>
<p>{{typeof(num)}}</p>
<p>{{num}}</p>
<p>{{num+1}}</p>
<!--不要用num++,因为这个是修改变量的值了，会导致组件循环渲染等等，
进而报You may have an infinite update loop in a component render function，
在组件呈现函数中可能有一个无限更新循环。
的错误。可能是因为 data类似于state状态机，如果变量改变，就会多次渲染。
每次渲染时会渲染整个HTML的代码等等，后面渲染到 <p>{{num+1}}</p>这个部分，因为
变量改变了，所以会重头渲染整个HTML的代码等等，又会渲染到 <p>{{num+1}}</p>这个部分，不同
的循环，后面为什么会到num=100左右就停止呢？因为到100左右的时候就是内存已经消耗光，溢出了，
所以浏览器会报错 。
以下就是修改变量的值了，不要像下面那样写。
<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: '诗书画唱这个up主好有才！要给他的作品三连！',
sshc:'<button>诗书画唱</button>',
flag:true,
num:1,
isActive: true,
hasError: true,
bangDing2:"双向绑定"
}
})
</script>
</body>
</html>
科普（知识普及）
Vue/React中出现两个花括号的原因
{{}}:外面的花括号是说“我这里面写的是js语句”，
内部的花括号是说“我里面的不是要显示的文字，而是变量，我要把变量的值解析放在这”
Vue: scoped 样式与 CSS Module的区别，，
