Merge branch 'main' of http://nasofcori.fun:13000/Cori/html_and_vue
commit
5ca5ca2ef7
qrcode_test
|
|
@ -76,7 +76,9 @@
|
||||||
<title>QRCode Qurey</title>
|
<title>QRCode Qurey</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="left-box">1</div>
|
<div class="left-box">
|
||||||
|
<span>hello</span>
|
||||||
|
</div>
|
||||||
<div class="right-box">
|
<div class="right-box">
|
||||||
<div class="qr-block">
|
<div class="qr-block">
|
||||||
<div class="qr-title">
|
<div class="qr-title">
|
||||||
|
|
|
||||||
|
|
@ -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