vue学习demo

<!DOCTYPE html>
<html>

<li v-for='item in list' class="post-list-item" :class="{deleted:item.deleted}">
<a :class="[class1,class2]" v-bind:style="styleobject"
:href="'https://www.cnblogs.com/laozhang-is-phi/p/'+ item.id +'.html'">{{item.name + 11}}</a>
<span class="post-list-date">({{item.date}})</span>
</li>
<li v-for='item in list' class="post-list-item">
<a v-bind:href="'https://www.cnblogs.com/laozhang-is-phi/p/'+ item.id +'.html'">{{item.name}}</a>
<a :href="linkstr">{{item.name}}</a>
<span class="post-list-date">({{item.date}})</span>
</li>
<input v-on:click="alert1(111)" type="button" />
<input @keydown.enter="addArticle" type="text" class="edit" placeholder="按回车添加文章">
<input v-model="message">

<div id="example">测试表达式
{{ message.split('').reverse().join('') }}
</div>
<div>
测试 conputed
<p>{{revesmessage}}</p>
</div>
</ul>
</div>
</li>
<li v-for='item in listSearch' class="post-list-item">
<span class="post-list-date">({{item.name}})</span>
</li>
<div>
<input v-model="fullname">

</br>
<input v-model="firstname">

</br>
<input v-model="sencendname">

</div>
<footer1 :foo="name" :author="author"></footer1>
<footer2 author="高波"></footer2>
<my-component></my-component>
<apple></apple>
<apple1></apple1>
<div>
<button v-for="tab in tabs" v-bind:key="tab" v-bind:class="['tab-button', { active: currentTab === tab }]"
v-on:click="currentTab = tab">{{ tab }}</button>
<component v-bind:is="currentTabComponent" class="tab"></component>
<button-click1 v-on:increment111="incrementTotal"></button-click1>
<p>{{ total }}</p>
<custom-input v-model="something"></custom-input>
</br>
{{something}}
<my-solt>
<ul slot="s1">
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
</my-solt>
<my-solt>
<ul slot="s1">
<li>b</li>
<li>a</li>
<li>a</li>
</ul>
</my-solt>
<my-solt>

<h3>我的公共的相同的内容1</h3>
<h3>我的公共的相同的内容2</h3>
<h3>我的公共的相同的内容3</h3>
<slot name="s1"></slot>
</div>
</template>

//定义组件
Vue.component('my-solt', {
template: '#mysolt',
data() {
return {
message: 'hello world'
}
}
})

Vue.component('footer1',
{
template: ` <p id = 'footer'>footer1{{foo}} {{author}}</p>`
,
props: ["foo", "author"]
,
}

);
Vue.component('footer2',
{
props: ["author"]
,
template: ` <p id = 'footer'>footer2{{author}}</p>`
,

}

);
var component1 = Vue.extend({ template: `<p>extend</p>` });
Vue.component('apple', component1);
var component11 = Vue.extend({ template: '#aaa' });
Vue.component('apple1', component11);
//定义三个组件，可以比如是我们的三个页面，
Vue.component('tab-home', {
template: '<div>Home component</div>' //组件1，也就是页面1
})
Vue.component('tab-posts', {
template: '<div>Posts component</div>' //组件2，页面2
})
Vue.component('tab-archive', {
template: '<div>Archive component</div>' //组件3，页面3
})
Vue.component('button-click1',
{
template: '<button v-on:click="increment1" >{{total1}}</button>'
,
data: function () {
return {
total1: 0
}
}
,
methods: {
increment1: function () {
this.total1 += 1
this.$emit('increment111', this.total1)
}
}
,
mounted() {
this.increment1();
}
}
);
// 注册
Vue.component('custom-input', {
props: ['something'],
template: '<input type="text" v-bind:value="something" v-on:input="updateValue($event.target.value)"/>',
methods: {
updateValue: function (value) {
this.$emit('input', value)
}
}
})
</script>
<script>

//定义全局变量vm
let vm = new Vue({
el: "#app",//el表示element，表示定义在#app这个html标签容器元素内
components:
{
'my-component': {
template: `<p>mycomponents</p>`
}
}
,
data: {
something: '',
total: 0,
name: "老张的哲学1",
author: "老张的哲学",
authorHtml: "<strong>老张的哲学</strong>",
currentTab: 'Home',//当前banner名称
tabs: ['Home', 'Posts', 'Archive'],//定义三个banner
isShow: false,
list: [
//假数据
{ name: " Vue前篇：ES6初体验 & 模块化编程", id: 9585766, date: "2018年9月5日", deleted: true },
{ name: "Vue前篇：JS对象&字面量&this", id: 9580807, date: "2018年9月4日", deleted: false },
{ name: " VUE 计划书 & 我的前后端开发简史", id: 9577805, date: "2018年9月3日", deleted: false },
{ name: " DTOs 对象映射使用，项目部署Windows+Linux完整版", id: 3800, date: "2018年9月1日", deleted: false },
{ name: " 三种跨域方式比较，DTOs(数据传输对象)初探", id: 4200, date: "2018年8月31日", deleted: false },
{ name: "VUE 计划书 & 我的前后端开发简史", id: 3200, date: "2018年9月2日", deleted: false },
{ name: "VUE 实战预告", id: 3200, date: "2018年9月12日", deleted: false }
],
linkstr: "www.baidu.com",
message: "abs",
firstname: "",
sencendname: "1111",
task:
{
name: 1, age: 2, sex
: 3
},
class1: "111"
,
class2: "2222"
,
styleobject:
{
color: "red", size: "30"
}
}
,
methods: {
incrementTotal(counter) {//4、incrementTotal 被触发，获取到参数 counter 值，执行相应的操作
this.total = counter
},
alert1: function (obj) {
alert(obj);
}
,
//添加事件
addArticle: function () {
alert("添加");
}
},
//通过计算属性过滤数据
computed: {
//这个明天讲到
revesmessage: function () {
return this.message.split('').reverse().join('');
}
,
listSearch: function () {
//为什么要存这个this呢，因为filter过滤器会改变this的指向
let that = this;
return this.list.filter(function (item) {
//简单的判断文章name是否包含 input中的值，因为双向绑定，所以也就是 task.name
return item.name.indexOf(that.$data.message) >= 0;
});
}
,
currentTabComponent: function () {
return 'tab-' + this.currentTab.toLowerCase()//组件名称拼串，一定要和上边的三个组件名对应
},
fullname:
{
get: function () {
return "aa,bb";
}
,
set: function (val) {
var str = val.split(',');
this.firstname = str[0];
this.sencendname = str[0] + 1;
}
}
,
namebianhua: function () {
return this.task.name;
}
}
,
beforeCreate: function () {
console.group('beforeCreate 创建前状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //undefined
console.log("%c%s", "color:red", "list: " + this.list);//undefined
},
created: function () {
console.group('created 创建完毕状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "author: " + this.author); //已被初始化
},
beforeMount: function () {
console.group('beforeMount 创建前状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //undefined
console.log("%c%s", "color:red", "list: " + this.list);//undefined
},
mounted: function () {
console.group('mounted 创建完毕状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "author: " + this.author); //已被初始化
},
beforeUpdate: function () {
debugger;
console.group('beforeUpdate 创建完毕状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
updated: function () {
debugger;
console.group('beforeUpdate 创建完毕状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "author: " + this.author); //已被初始化
},
beforeDestroy: function () {
debugger;
console.group('beforeDestroyed 创建完毕状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
destroyed: function () {
debugger;
console.group('destroyed 创建完毕状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "author: " + this.author); //已被初始化
},
watch:
{
message: function (newval, old) {
alert("meaage变化了" + newval + old);
}
,
namebianhua: function (newval, old) {
alert("task变化了");
}
}

});

</script>
<style>
.deleted {
color: red;
text-decoration: line-through;
}
</style>
</body>

</html>

posted @ 2019-04-09 10:42 天行者bobo 阅读(119) 评论(0) 编辑收藏举报

刷新页面返回顶部

天行啊

vue学习demo

公告