<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8" /><title>简易安装 Vue.js</title>
<!--引用vue.js在线文件，安装--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script></head><body>
<!--定义一个容器 id="app"--> <div id="app"> 博客园：{ { name }} <!--获取变量 name Mustache语法 两个花括号 --> <input v-model="author"> <!--v-model是vue的一个指令--> <p class="author" v-text="author"></p> <a href="#" v-html="authorHtml"></a> <input v-model="authorHtml"> <!--v-model是vue的一个指令--> <div> <li class="nav-item" v-show="isShow" /> <a href="/rss.xml">test v-show</a> </div> <div> <div v-if="list.length > 20 "> MOST </div> <div v-else-if="list.length > 6 "> MORE </div> <div v-else> ALL </div> <ul class="post-list non-style-list"><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"> <!--v-model是vue的一个指令--> <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"> <!--v-model是vue的一个指令--> </br> <input v-model="firstname"> <!--v-model是vue的一个指令--> </br> <input v-model="sencendname"> <!--v-model是vue的一个指令--></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><ul slot="s1">
<li>c</li> <li>a</li> <li>a</li> <my-solt> <p slot="s1"></p> </my-solt> </ul> </my-solt> </div> </div><template id='aaa'>
<div> <p>aaa<p> </div> </template> <template id="mysolt"> <div><h3>我的公共的相同的内容1</h3>
<h3>我的公共的相同的内容2</h3> <h3>我的公共的相同的内容3</h3> <slot name="s1"></slot> </div> </template> <!-- 组件的使用 通过currentTabComponent 来动态展示是哪一个组件 --><script>
//定义组件 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>