100 lines
2.6 KiB
HTML
100 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>vue.js</title>
|
|
<style>
|
|
[v-cloak] {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="app" v-cloak>
|
|
<h2 v-once>{{ test }}</h2>
|
|
<img :src="imgSrc" alt="">
|
|
|
|
<ul>
|
|
<li v-for="v,i in newList" :key="i" @click="LiClick(i)">{{ i }} | {{ v.title }}</li>
|
|
</ul>
|
|
|
|
<input type="text" placeholder="输入用户名" v-model="userName">
|
|
{{ userName }}
|
|
|
|
<div class="" v-show="isVip">vip查看的内容</div>
|
|
|
|
<div v-if="type === 'A'">
|
|
A
|
|
</div>
|
|
<div v-else-if="type === 'B'">
|
|
B
|
|
</div>
|
|
<div v-else-if="type === 'C'">
|
|
C
|
|
</div>
|
|
<div v-else>
|
|
Not A/B/C
|
|
</div>
|
|
|
|
<h2>{{ hello }}</h2>
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
|
|
<script>
|
|
// vue 如何实现双向数据绑定的？？？
|
|
// vue 指令 （标签的属性 全局属性）
|
|
// v-bind: 将变量绑定到标签的属性上
|
|
// 简写 :
|
|
// v-for 循环 必须加 :key="" 数值一般是下标
|
|
// v-html 将字符串显示成网页
|
|
// v-text 所有内容显示成为本
|
|
// v-model 用来获取输入框用户输入的数值 修饰符 .trim
|
|
// v-on 绑定点击事件 v-on:事件类型="事件处理函数"
|
|
// 简写 @事件类型="事件处理函数"
|
|
// v-show
|
|
// v-if v-else v-if-else
|
|
// v-slot 留坑，插槽的时候再说
|
|
|
|
var vm = new Vue({
|
|
el: '.app',
|
|
data: {
|
|
type: 'C',
|
|
userName: '',
|
|
test: '你好',
|
|
imgSrc: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
|
|
newList: [
|
|
{ id: 1, title: '新闻1' },
|
|
{ id: 2, title: '新闻2' },
|
|
{ id: 3, title: '新闻3' },
|
|
],
|
|
html: "<h2>测试html</h2>",
|
|
isVip: false
|
|
},
|
|
// vue中的所有方法
|
|
methods: {
|
|
LiClick(index) {
|
|
console.log("你点击了li标签: ", this.newList[index]);
|
|
}
|
|
},
|
|
watch: {
|
|
test(newValue, oldValue) {
|
|
console.log(newValue, oldValue);
|
|
}
|
|
},
|
|
computed: {
|
|
hello() {
|
|
return "111111"
|
|
}
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
</html> |