129 lines
3.5 KiB
HTML
129 lines
3.5 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>
|
||
|
||
<h1 ref="fff">测试 {{ demos }}</h1>
|
||
|
||
<h2> {{ message }} </h2>
|
||
<a :href="aParams.href"> {{ aParams.title }} </a>
|
||
|
||
<ul>
|
||
<li v-for="v,i in newsList" :key="i" v-text="v.content">
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<div v-show="isVip"> 广告 </div>
|
||
|
||
<div v-if="vip == 0">普通</div>
|
||
<div v-else-if="vip == 1">会员</div>
|
||
<div v-else>超级会员</div>
|
||
|
||
<input v-model="userName" type="text" placeholder="输入用户名">
|
||
<input v-model="userPwd" type="password" placeholder="输入密码">
|
||
<div @click="Login">
|
||
<div class="test" @click.stop.right="test">登录</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</body>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
|
||
|
||
<script>
|
||
// data 是用来存放变量
|
||
// el
|
||
|
||
// 指令（vue自定义标签属性，全局）
|
||
// v-bind: 简写 :
|
||
// v-for
|
||
// 注意：循环需要加key，来标注 唯一性
|
||
// v-show 结果为true显示，为false因此
|
||
// v-if
|
||
// 区别：v-show不符合条件不会删除元素，只是对元素进行 display none
|
||
// v-if 把不符合条件的元素直接删除
|
||
// v-html v-text
|
||
// v-model 只能用户输入框，input textarea section
|
||
// v-on 简写 @
|
||
// created ajax 请求
|
||
// mounted 用来获取或者操作网页元素的
|
||
// computed 会进行计算缓存
|
||
var vm = new Vue({
|
||
el: '.app',
|
||
beforeCreate() {
|
||
console.log("beforeCreate: ", this.message);
|
||
},
|
||
created() {
|
||
console.log("created: ", this.message);
|
||
console.log("created: ", this.$refs.fff);
|
||
},
|
||
mounted() {
|
||
console.log("mounted: ", this.message);
|
||
console.log("created: ", this.$refs.fff);
|
||
},
|
||
beforeUpdate() {
|
||
console.log("beforeUpdate");
|
||
},
|
||
updated() {
|
||
console.log("updated");
|
||
},
|
||
destroyed() {
|
||
alert("destroyed")
|
||
},
|
||
data: {
|
||
message: '我的第一个vue程序',
|
||
vip: 0, // 0普通 1会员 2超级会员
|
||
isVip: false,
|
||
userPwd: '',
|
||
userName: '',
|
||
aParams: {
|
||
title: '点击我',
|
||
href: 'https://www.baidu.com/'
|
||
},
|
||
newsList: [
|
||
{ id: 1, title: '新闻1', content: '<h2>你好1</h2>' },
|
||
{ id: 2, title: '新闻3', content: '<h2>你好2</h2>' },
|
||
{ id: 3, title: '新闻4', content: '<h2>你好3</h2>' }
|
||
]
|
||
},
|
||
watch: {
|
||
// aParams() {},
|
||
aParams: {
|
||
handler(newVal, oldVal) {
|
||
console.log(newVal, oldVal);
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
Login() {
|
||
console.log("登录");
|
||
// console.log("用户登录:", this.userPwd, this.userName);
|
||
},
|
||
test() {
|
||
console.log("test");
|
||
}
|
||
},
|
||
computed: {
|
||
demos() {
|
||
return 1 + 2
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
|
||
</html> |