132 lines
3.2 KiB
HTML
132 lines
3.2 KiB
HTML
<!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>
|
||
[v-cloak] {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="app" v-cloak>
|
||
<h2 ref="testh2" @click="alertH2()" v-once>{{message}}</h2>
|
||
<h3 >{{text}}</h3>
|
||
<div v-html="html"></div>
|
||
|
||
<div v-if="isLike">喜欢</div>
|
||
<div v-else>不喜欢</div>
|
||
|
||
|
||
<p v-show="isShow">显示</p>
|
||
|
||
<ul>
|
||
<li v-for="item,index in tabs" :key="index">{{ item.title }}</li>
|
||
</ul>
|
||
|
||
<ul>
|
||
<li :key="key" v-for="value, key in item">{{ key }} | {{ value }}</li>
|
||
</ul>
|
||
|
||
<a :href=" href ">百度</a>
|
||
|
||
<input type="text" placeholder="输入用户名" v-model="user_name">
|
||
|
||
{{ user_name }}
|
||
|
||
|
||
<hr>
|
||
|
||
<h1>{{ testsss("张三") }}</h1>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
</body>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
|
||
<script>
|
||
|
||
// data 定义变量的地方
|
||
// methods 定义方法的地方
|
||
// 指令：vue提供的一些标签属性，可是实现各种功能
|
||
// v-on 绑定点击事件
|
||
// 简写 @事件类型
|
||
// v-text
|
||
// v-html 将html字符串，渲染成真的dom
|
||
// v-if 根据条件选择显示什么东西
|
||
// v-show 根据条件选择显示什么东西
|
||
// v-for 循环显示
|
||
// v-bind 将变量绑定到标签的属性上
|
||
// 简写 :
|
||
// v-model 获取输入框的值
|
||
// TODO activated
|
||
|
||
// computed 会进行结果的缓存
|
||
|
||
let vm = new Vue({
|
||
el: ".app",
|
||
data: {
|
||
user_name: '',
|
||
message: "我的vue学习",
|
||
text: "我是v-text",
|
||
html: ` <ul> <li>你好</li> </ul>`,
|
||
isLike: true,
|
||
isShow: true,
|
||
href: 'https://www.baidu.com/',
|
||
tabs: [
|
||
{ id: 1, title: '社会' },
|
||
{ id: 2, title: '军事' },
|
||
{ id: 3, title: '体育' },
|
||
],
|
||
item: { id: 1, title: '社会' }
|
||
},
|
||
|
||
beforeCreate() {
|
||
console.log(this.message);
|
||
},
|
||
created() {
|
||
// ajax请求
|
||
console.log(this.message);
|
||
console.log(this.$refs.testh2);
|
||
},
|
||
mounted() {
|
||
console.log("mounted: ",this.$refs.testh2);
|
||
},
|
||
updated() {
|
||
console.log("updated: ");
|
||
},
|
||
methods: {
|
||
alertH2() {
|
||
alert(this.message)
|
||
this.alertH2_2()
|
||
},
|
||
alertH2_2() {
|
||
alert("点我了2")
|
||
}
|
||
},
|
||
computed: {
|
||
testsss() {
|
||
return (name) => {
|
||
console.log(name);
|
||
return name + this.message
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
user_name: {
|
||
handler: (value, oldvalue) => {
|
||
console.log("watch: ",value, oldvalue);
|
||
},
|
||
immediate: true
|
||
}
|
||
|
||
}
|
||
})
|
||
|
||
console.log(vm);
|
||
</script>
|
||
</html> |