new lesson
parent
645d8388de
commit
a246b23210
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script type="text/javascript" src="../js/vue.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
<h2>今天天气很{{info}}</h2>
|
||||
<!-- 绑定事件的时候: @xxx="yyy" yyy可以写一些简单的语句 -->
|
||||
<!-- <button @click="isHot = !isHot">切换天气</button> -->
|
||||
<button @click="changeWeather">切换天气</button>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script type="text/javascript">
|
||||
Vue.config.productionTip = false
|
||||
|
||||
const vm = new Vue({
|
||||
el:'#root',
|
||||
data:{
|
||||
isHot:true,
|
||||
},
|
||||
computed:{
|
||||
info(){
|
||||
return this.isHot ? '炎热' : '凉爽'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeWeather(){
|
||||
this.isHot = !this.isHot
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script type="text/javascript" src="../js/vue.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!--
|
||||
监视属性watch：
|
||||
1.当被监视的属性变化时，回调函数自动调用，进行相关操作
|
||||
2.监视属性必须存在，才能进行监视（监视属性不存在时不会报错，但也无法获取数据）
|
||||
3.监视的2种写法：
|
||||
（1）.new Vue时传入watch配置
|
||||
（2）.通过vm.￥watch监视
|
||||
-->
|
||||
<div id="root">
|
||||
<h2>今天天气很{{info}}</h2>
|
||||
<button @click="changeWeather">切换天气</button>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script type="text/javascript">
|
||||
Vue.config.productionTip = false
|
||||
|
||||
const vm = new Vue({
|
||||
el:'#root',
|
||||
data:{
|
||||
isHot:true,
|
||||
},
|
||||
computed:{
|
||||
info(){
|
||||
return this.isHot ? '炎热' : '凉爽'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeWeather(){
|
||||
this.isHot = !this.isHot
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
isHot:{
|
||||
immediate:true, // 初始化时让handler调用一下
|
||||
// 当isHot发生改变时, handler被调用
|
||||
handler(newValue,oldValue){
|
||||
console.log('isHot被修改了', newValue,oldValue)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// vm.$watch('isHot',{
|
||||
// immediate:true, // 初始化时让handler调用一下
|
||||
// // 当isHot发生改变时, handler被调用
|
||||
// handler(newValue,oldValue){
|
||||
// console.log('isHot被修改了', newValue,oldValue)
|
||||
// }
|
||||
// })
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script type="text/javascript" src="../js/vue.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!--
|
||||
深度监视：
|
||||
1.Vue中的watch默认不检测对象内部值的改变(一层)
|
||||
2.配置deep:true可以检测对象内部值改变(多层)
|
||||
备注:
|
||||
1.Vue本身可以检测对象内部值的改变,但Vue提供的watch默认不可以
|
||||
2.使用watch时根据数据的具体结构,决定是否采用深度监视
|
||||
-->
|
||||
<div id="root">
|
||||
<h2>今天天气很{{info}}</h2>
|
||||
<button @click="changeWeather">切换天气</button>
|
||||
<br>
|
||||
<h3>a的值是:{{numbers.a}}</h3>
|
||||
<button @click="numbers.a++">点我让a+1</button>
|
||||
<h3>b的值是:{{numbers.b}}</h3>
|
||||
<button @click="numbers.b++">点我让b+1</button>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script type="text/javascript">
|
||||
Vue.config.productionTip = false
|
||||
|
||||
const vm = new Vue({
|
||||
el:'#root',
|
||||
data:{
|
||||
isHot:true,
|
||||
numbers:{
|
||||
a:1,
|
||||
b:1
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
info(){
|
||||
return this.isHot ? '炎热' : '凉爽'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeWeather(){
|
||||
this.isHot = !this.isHot
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
isHot:{
|
||||
immediate:true, // 初始化时让handler调用一下
|
||||
// 当isHot发生改变时, handler被调用
|
||||
handler(newValue,oldValue){
|
||||
console.log('isHot被修改了', newValue,oldValue)
|
||||
}
|
||||
},
|
||||
// 监视多层数据中的某个数据变化
|
||||
// 'numbers.a':{
|
||||
// handler(newValue,oldValue){
|
||||
// console.log('a被修改了', newValue,oldValue)
|
||||
// },
|
||||
// 监视多层数据中的所有数据变化
|
||||
numbers:{
|
||||
deep:true,
|
||||
handler(newValue,oldValue){
|
||||
console.log('numbers被修改了', newValue,oldValue)
|
||||
},
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script type="text/javascript" src="../js/vue.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!--
|
||||
深度监视：
|
||||
1.Vue中的watch默认不检测对象内部值的改变(一层)
|
||||
2.配置deep:true可以检测对象内部值改变(多层)
|
||||
备注:
|
||||
1.Vue本身可以检测对象内部值的改变,但Vue提供的watch默认不可以
|
||||
2.使用watch时根据数据的具体结构,决定是否采用深度监视
|
||||
-->
|
||||
<div id="root">
|
||||
<h2>今天天气很{{info}}</h2>
|
||||
<button @click="changeWeather">切换天气</button>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script type="text/javascript">
|
||||
Vue.config.productionTip = false
|
||||
|
||||
const vm = new Vue({
|
||||
el:'#root',
|
||||
data:{
|
||||
isHot:true,
|
||||
},
|
||||
computed:{
|
||||
info(){
|
||||
return this.isHot ? '炎热' : '凉爽'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeWeather(){
|
||||
this.isHot = !this.isHot
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
// 正常写法
|
||||
// isHot:{
|
||||
// // immediate:true, // 初始化时让handler调用一下
|
||||
// // 当isHot发生改变时, handler被调用
|
||||
// handler(newValue,oldValue){
|
||||
// console.log('isHot被修改了', newValue,oldValue)
|
||||
// }
|
||||
// },
|
||||
|
||||
// 简写写法
|
||||
isHot(newValue,oldValue){
|
||||
console.log('isHot被修改了', newValue,oldValue)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 正常写法
|
||||
// vm.$watch('isHot',{
|
||||
// immediate:true, // 初始化时让handler调用一下
|
||||
// // 当isHot发生改变时, handler被调用
|
||||
// handler(newValue,oldValue){
|
||||
// console.log('isHot被修改了', newValue,oldValue)
|
||||
// }
|
||||
// })
|
||||
|
||||
// 简写写法
|
||||
// vm.$watch('isHot',function(newValue,oldValue){
|
||||
// console.log('isHot被修改了', newValue,oldValue)
|
||||
// })
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script type="text/javascript" src="../js/vue.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!--
|
||||
P25待整理
|
||||
-->
|
||||
<div id="root">
|
||||
<h2>今天天气很{{info}}</h2>
|
||||
<button @click="changeWeather">切换天气</button>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script type="text/javascript">
|
||||
Vue.config.productionTip = false
|
||||
|
||||
const vm = new Vue({
|
||||
el:'#root',
|
||||
data:{
|
||||
isHot:true,
|
||||
},
|
||||
computed:{
|
||||
info(){
|
||||
return this.isHot ? '炎热' : '凉爽'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeWeather(){
|
||||
this.isHot = !this.isHot
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
// 正常写法
|
||||
// isHot:{
|
||||
// // immediate:true, // 初始化时让handler调用一下
|
||||
// // 当isHot发生改变时, handler被调用
|
||||
// handler(newValue,oldValue){
|
||||
// console.log('isHot被修改了', newValue,oldValue)
|
||||
// }
|
||||
// },
|
||||
|
||||
// 简写写法
|
||||
isHot(newValue,oldValue){
|
||||
console.log('isHot被修改了', newValue,oldValue)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 正常写法
|
||||
// vm.$watch('isHot',{
|
||||
// immediate:true, // 初始化时让handler调用一下
|
||||
// // 当isHot发生改变时, handler被调用
|
||||
// handler(newValue,oldValue){
|
||||
// console.log('isHot被修改了', newValue,oldValue)
|
||||
// }
|
||||
// })
|
||||
|
||||
// 简写写法
|
||||
// vm.$watch('isHot',function(newValue,oldValue){
|
||||
// console.log('isHot被修改了', newValue,oldValue)
|
||||
// })
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
.basic {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.normal {
|
||||
background-color: skyblue;
|
||||
}
|
||||
|
||||
.happy {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.sad {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.zhangjun1 {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.zhangjun2 {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.zhangjun3 {
|
||||
font-size: 40px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript" src="../js/vue.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
<!-- 绑定class样式:字符串写法,适用于样式的类名不确定,需要动态指定 -->
|
||||
<div class="basic" :class="mood" @click="changeMood">{{name}}</div><br><br>
|
||||
|
||||
<!-- 绑定class样式:数组写法,适用于要绑定的样式个数不确定、名字也不确定 -->
|
||||
<div class="basic" :class="classArr">{{name}}</div><br><br>
|
||||
|
||||
<!-- 绑定class样式:对象写法,适用于要绑定的样式个数确定、名字确定, 但要动态决定用不用 -->
|
||||
<div class="basic" :class="classObj">{{name}}</div><br><br>
|
||||
|
||||
<!-- 绑定style(内联)样式:对象写法 -->
|
||||
<div class="basic" :style="styleObj">{{name}}</div><br><br>
|
||||
|
||||
<!-- 绑定style(内联)样式:对象写法 -->
|
||||
<div class="basic" :style="styleArr">{{name}}</div>
|
||||
</div>
|
||||
</body>
|
||||
<script type="text/javascript">
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
el:'#root',
|
||||
data:{
|
||||
name:'请叫我张钧',
|
||||
mood:'normal',
|
||||
classArr:['zhangjun1','zhangjun2','zhangjun3'],
|
||||
classObj:{
|
||||
zhangjun1:false,
|
||||
zhangjun2:true
|
||||
},
|
||||
styleObj:{
|
||||
color:'red',
|
||||
fontSize:'30px' // 在配置对象中,key:value的形式中,key中不能出现"-", 要将"-"后的单词首字母大写,写成大驼峰的形式
|
||||
},
|
||||
styleArr:[
|
||||
{
|
||||
color:'red',
|
||||
fontSize:'30px'
|
||||
},
|
||||
{
|
||||
backgroundColor:'red'
|
||||
}
|
||||
]
|
||||
},
|
||||
methods: {
|
||||
changeMood(){
|
||||
const arr = ['happy','sad','normal'] // 创建一个数据
|
||||
const index = Math.floor(Math.random()*3)
|
||||
this.mood = arr[index]
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue