1.js有哪几种数据类型,5种 undefined- null-空对象的指针 number-整数型浮点型 boolean-布尔型,true\false string-字符串 object-对象 function-函数
本节学习了Vue常用的指令V-model、v-text、v-on、v-bind、v-for,以及数据的双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue全家桶-指令系统</title>
</head>
<body>
<div id="app">
<label>我的名字:{{name}}</label>
<input type="text" v-text="name" ><br>
<br><label>我的年龄:{{age}}</label>
<input type="text" v-text="age" ><br>
<label>我的公司:</label>
<input v-model="company" /><br/>
<input class="blueBut" type="button" value="点击提交" v-on:click="buttonToggle" v-bind:class="{butBlueBg:blueButActive}" />
<br>
<div ref="boxName" class="box" v-on:click="toggleBg" v-bind:class="{boxActive:setBgBlue}">
red
</div>
<label>v-for的使用:v-for渲染数组</label>
<ul>
<li v-for="(item,index) in recipe">
<h5>{{item.id}}</h5><h5>{{item.name}}</h5><h5>{{item.price}}</h5>
</li>
</ul>
<label>v-for的使用:v-for渲染对象</label>
<ul>
<li v-for="(value,key) in person">
<p>{{key}}--->{{value}}</p>
</li>
</ul>
</div>
<script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:function () {
return{
name:"李小鹏",
age:"16",
company:"亚信科技中国有限公司",
setBgBlue:false,
blueButActive:false,
recipe:[
{id:1,name:"烤鸭",price:500},
{id:2,name:"牛肉",price:200},
{id:3,name:"蔬菜",price:60}
],
person:{
name:"刘伟",
age:"28",
phoneNum:"18618222314"
}
}
},
methods:{
handleFunc:function (e) {
// alert("1111");
console.log(this);
console.log(vm.$refs.boxName);
vm.$refs.boxName.setBgBlue = !this.setBgBlue;
},
toggleBg:function (e) {
// console.log(vm);
this.setBgBlue = !this.setBgBlue;
console.log(this);
},
buttonToggle:function () {
this.blueButActive = !this.blueButActive;
// vm.$refs.boxName.setBgBlue = !this.setBgBlue;
// console.log(vm.$refs.boxName);
this.setBgBlue = !this.setBgBlue;
}
}
});
</script>
</body>
</html>
<style>
.blueBut{
width: 100px;
height: 30px;
background:#42b983;
text-align: center;
color: beige;
}
.blueButActive{
background: steelblue;
}
.box{
background: red;
width: 100px;
height: 200px;
text-align: center;
}
.boxActive{
background: #42b983;
}
.butBlueBg{
background: #2c3e50;
}
</style>