177 lines
4.7 KiB
HTML
177 lines
4.7 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 ref="demos">{{ hello | shengflh }}</h2>
|
||
<a :href="href">vue官网</a>
|
||
|
||
<ul>
|
||
<li v-for="(item,index) in list" :key="index">
|
||
<a :href=" './info.html?id='+item.id ">{{ item.text }}</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<ul>
|
||
<li v-for="(value,key) in test">
|
||
{{ value }} | {{ key }}
|
||
</li>
|
||
</ul>
|
||
|
||
<input type="text" placeholder="输入用户名" v-model.trim="userName">
|
||
<p v-once>你输入的用户名：{{ userName }}</p>
|
||
<p>你输入的用户名2：{{ userName }}</p>
|
||
|
||
<hr>
|
||
|
||
<div v-html="h2Demo"></div>
|
||
|
||
<div v-text="h2Demo"></div>
|
||
|
||
<hr>
|
||
|
||
<div class="test">
|
||
<div v-if="type == '1' ">群主</div>
|
||
<div v-else-if="type == '2' ">管理员</div>
|
||
<div v-else>群成员</div>
|
||
</div>
|
||
|
||
|
||
<div v-show="isShow">v-show的使用</div>
|
||
|
||
<button @click="hahah('1111')">点我</button>
|
||
|
||
<hr>
|
||
|
||
<div class="1">{{ total }}</div>
|
||
<div class="2">{{ total }}</div>
|
||
|
||
<div v-lb="ffff"></div>
|
||
|
||
</div>
|
||
</body>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
|
||
<script>
|
||
|
||
var loadMore = {
|
||
data() {
|
||
return {
|
||
page: 1,
|
||
totalPage: 0,
|
||
ffff: '哈哈哈哈哈哈哈'
|
||
}
|
||
},
|
||
methods: {
|
||
load() {
|
||
console.log("滚动加载...");
|
||
}
|
||
}
|
||
}
|
||
|
||
var vm = new Vue({
|
||
el: '.app',
|
||
mixins: [loadMore],
|
||
// 定义变量的地方
|
||
// 指令 （标签的属性）
|
||
// v-bind 将变量绑定到 标签的属性上
|
||
// 简写： :
|
||
// v-for 用来遍历数组 或 对象的
|
||
// v-model 专门给输入框用 <input> <select> <textarea>
|
||
// v-html 把变量中保存的html渲染到网页上
|
||
// v-text 把变量中保存的html显示到网页上
|
||
// v-if 根据条件的true false 对元素进行显示隐藏
|
||
// 不符合条件的html元素会被删除
|
||
// 1: 条件较多的时候
|
||
// v-else
|
||
// v-if v-else-if ..... v-else
|
||
|
||
// v-show 根据条件的true false 对元素进行显示隐藏
|
||
// 不符合条件的html会被display: none;
|
||
// 2: 数据量较大的时候，需要提高性能的时候
|
||
|
||
// v-on 绑定事件（）
|
||
// 简写： @
|
||
|
||
// 混入 用于代码封装 解决this指向问题
|
||
// 生命周期 created mounted
|
||
// ref
|
||
data: {
|
||
hello: '你好啊，Vue.js！！',
|
||
href: 'https://cn.vuejs.org/',
|
||
userName: "刘兵",
|
||
list: [
|
||
{ id: 1, text: '新闻1' },
|
||
{ id: 2, text: '新闻2' },
|
||
{ id: 3, text: '新闻3' },
|
||
],
|
||
test: {
|
||
id: 1,
|
||
text: '新闻1'
|
||
},
|
||
h2Demo: '<h2>哈哈哈哈哈</h2>',
|
||
type: '1', // 1 2 3
|
||
isShow: false
|
||
},
|
||
// 发送ajax请求
|
||
filters: {
|
||
shengflh(val) {
|
||
return val.substring(0, 3) + "..."
|
||
}
|
||
},
|
||
directives: {
|
||
lb: {
|
||
// 指令的定义
|
||
inserted: function (el, binding) {
|
||
// console.log("=========:",el, binding.value);
|
||
document.title = binding.value
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
console.log(this.page);
|
||
console.log(this.load());
|
||
console.log(this.$refs.demos);
|
||
},
|
||
mounted() {
|
||
console.log(this.$refs.demos);
|
||
},
|
||
updated() {
|
||
console.log("监听到页面改变");
|
||
},
|
||
// 定义方法
|
||
methods: {
|
||
hahah(num) {
|
||
console.log('你点了我，哈哈 ', num);
|
||
this.testss()
|
||
},
|
||
testss() {
|
||
console.log(this.userName);
|
||
}
|
||
},
|
||
computed: {
|
||
total() {
|
||
console.log("total....");
|
||
return 1 + 1
|
||
}
|
||
},
|
||
watch: {
|
||
userName(newVal, oldVal) {
|
||
console.log(newVal, oldVal);
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
|
||
</html> |