目录
Vue组件解析
<div id="root">
<kc></kc>
</div>
<script type="text/javascript">
//定义一个Vue组件component
Vue.component("kc",{
template:'<li>这里显示<li>'
})
const vm = new Vue({
el: '#root',
data: {},
methods: {}
});自定义了一个组件，显示内容
数据显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--vue-->
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
</head>
<!--view层 模版-->
<div id="root">
<!--组件：传递给组件中的值：props-->
<kc v-for="item in items" v-bind:zh="item"></kc>
</div>
<script type="text/javascript">
//定义一个Vue组件component
Vue.component("kc",{
props:['zh'],
template:'<li>{
{zh}}<li>'
});
const vm = new Vue({
el: '#root',
data: {
items:["Java","Linux","kcZH"]
}
});
console.log(vm)
</script>
<body>
</body>
</html>
computed和watch对比
用watch监听属性实现
<div id="root">
姓:<input type="text" v-model:value="firstName"></br><br>
名:<input type="text" v-model="lastName"></br><br>
全名:{
{fullName}}
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
firstName:'章' ,
lastName: '三',
fullName:'章-三'
},
watch: {
firstName(valNew){
this.fullName=valNew+'-'+this.lastName
},
lastName(valNew){
this.fullName=this.firstName+'-'+valNew
},
},
});
</script>用computed计算属性
<div id="root">
姓:<input type="text" v-model:value="firstName"></br><br>
名:<input type="text" v-model="lastName"></br><br>
全名:{
{fullName}}
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
firstName:'章' ,
lastName: '三',
},
computed:{
fullName(){
return this.firstName+'-'+this.lastName
}
}
});
console.log(vm)
</script> 
computed和watch之间的区别：
1、computed能完成的功能，watch都可以完成。
2、watch能完成的功能，computed不一定能完成，例如：watch可以尽心异步操作。
两个重要的小原则：
1、所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
2、所有不背Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数)，最好写成箭头函数，这样this的执行才是vm或者组件实例对象。
绑定class样式
<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--vue-->
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<style>
.base{
width: 200px;
height: 100px;
border: 2px solid ;
}
.black{
background-color: black;
border: red solid 4px;
}
.blue{
border: pink 10px solid;
background-color: blue;
}
.yellow{
background-color: yellow;
border: deepskyblue 6px solid;
}
.s1{
font-size: 40px;
}
.s2{
font-weight: bold;
}
.s3{
height: 200px;
}
</style>
</head>
<div id="root">
<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定-->
<div class="base" :class="mood" @click="changeMod"></div><br/>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
mood:'blue',
},
methods: {
changeMod(){
var arr=['blue','yellow','black']
r=Math.floor( Math.random()*3)//生成0-2的随机数，并向下取整
this.mood=arr[r]
console.log(r)
}
}
});
</script>
<body>
</body>
</html>点击切换
<!-- 绑定class样式--数组写法，适用于：要绑定的样式不确定，名字也不确定-->
<div id="root">
<!-- 绑定class样式--数组写法，适用于：要绑定的样式不确定，名字也不确定-->
<div class="base" :class="arrClass" >字体</div><br/>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
mood:'blue',
arrClass:['s1','s2','s3'],
},
});
</script>
绑定class样式--对象写法，适用于：要绑定的样式确定，名字也不确定，但要决定用不用-
<div id="root">
<!-- 绑定class样式--对象写法，适用于：要绑定的样式确定，名字也不确定，但要决定用不用-->
<div class="base" :class="objClass" >字体</div><br/>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
mood:'blue',
arrClass:['s1','s2','s3'],
objClass:{
s1:false,
s2:true
}
},
});
</script>