115 lines
3.3 KiB
HTML
115 lines
3.3 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 基础学习</title>
|
||
<style>
|
||
[v-cloak] {
|
||
display: none;
|
||
}
|
||
</style>
|
||
|
||
</head>
|
||
|
||
<body>
|
||
<div class="app" v-cloak>
|
||
<h1 v-once>{{ test }}</h1>
|
||
<h2>{{ hello }}</h2>
|
||
<a :href="baidu">baidu</a>
|
||
<img :src="img" alt="">
|
||
|
||
<ul>
|
||
<li v-for="item,index in newsList" @click.stop.prevent="demos(index)">
|
||
{{ item.title }}
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<ul>
|
||
<li v-for="value,key in list">{{ key }} {{ value }}</li>
|
||
</ul>
|
||
|
||
<div v-html="htmlTest"></div>
|
||
|
||
<div v-if="vip == 1">vip1</div>
|
||
<div v-else-if="vip == 2">vip2</div>
|
||
<div v-else-if="vip == 3">vip3</div>
|
||
<div v-else>等级非法</div>
|
||
|
||
|
||
<div v-show="islogin">登录才可以查看</div>
|
||
|
||
|
||
<input type="text" v-model.trim="userName">
|
||
|
||
<button @click="login">点我</button>
|
||
|
||
<div>{{ jil }}</div>
|
||
|
||
</div>
|
||
</body>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
|
||
<script>
|
||
// v-bind 将data中的变量绑定到标签的属性上
|
||
// 简写 :
|
||
// v-for 可以遍历数组和对象
|
||
// v-html 显示 html 到网页上
|
||
// v-text 显示纯文本
|
||
// v-if -v-else
|
||
// v-show
|
||
// v-if 和 v-show 区别
|
||
// v-if 多分支的复杂情况进行判断 把不符合条件的html删除
|
||
// v-show 只适合简单情况 把不符合条件的html进行 display:none
|
||
// v-on:事件类型="事件处理函数"
|
||
// 简写：@事件类型="事件处理函数" @click="test"
|
||
// v-model 给输入框用的
|
||
// v-pre 原样输出
|
||
// computed 计算属性 当参与计算的数值未发生变化，第二次调用不进行计算而是返回上一次的结果
|
||
// 实现 get（读） set（写） 监听
|
||
// methods 存放方法
|
||
// watch 侦听器（监视器）
|
||
var vm = new Vue({
|
||
el: '.app',
|
||
data: {
|
||
test: '你好，vue.js',
|
||
hello: '哈哈哈哈哈哈',
|
||
baidu: 'https://www.baidu.com/',
|
||
img: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
|
||
newsList: [
|
||
{ id: 1, title: '新闻1', href: 'https://www.baidu.com/' },
|
||
{ id: 2, title: '新闻2', href: 'https://www.baidu.com/' },
|
||
{ id: 3, title: '新闻3', href: 'https://www.baidu.com/' },
|
||
],
|
||
list: { name: '刘兵', age: 18 },
|
||
htmlTest: '<h2><span>测试</span></h2>',
|
||
vip: 1, // 1 2 3
|
||
islogin: true,
|
||
userName: '',
|
||
},
|
||
methods: {
|
||
login() {
|
||
console.log(this.userName);
|
||
},
|
||
demos(index) {
|
||
console.log("demo 方法: ", index);
|
||
}
|
||
},
|
||
computed: {
|
||
jil() {
|
||
return 1000 * 100000000
|
||
}
|
||
},
|
||
watch: {
|
||
test(newvalue,oldvalue) {
|
||
console.log("oldvalue: ",oldvalue);
|
||
console.log("newvalue: ",newvalue);
|
||
}
|
||
}
|
||
})
|
||
|
||
</script>
|
||
|
||
</html> |