word68网站,我的网站百度怎么搜索不到,wordpress 游客权限,小程序开发公司简介范本Vue学习1.1 vue.js是什么#xff1f; Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层#xff0c;不仅易于上手#xff0c;还便于与第三方库或既有项目整合。另一方面#xff0c…Vue学习1.1 vue.js是什么 Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层不仅易于上手还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时Vue 也完全能够为复杂的单页应用提供驱动。1.2 hello VueVue{{messages}}var vmnew Vue({el:#app,data:{messages:hello vue}})还可以通过v-bind绑定元素Vue鼠标停在我的上面看看var vmnew Vue({el:#app,data:{messages:hello vue}})1.3判断和循环判断ifTitleYesNoABCDvar vmnew Vue({el:#app,data:{seen: true}})var vm2new Vue({el:#app2,data:{type: A}})循环forTitle{{item.message}}var vmnew Vue({el:#app,data:{items:[{message: 前端},{message: 后端},{message: 运维}]}})1.4 methods事件(单向绑定 v-on)Click Mevar vmnew Vue({el:#app,data:{message: 小胖学java},methods:{ //方法定义在methods中v-on绑定事件SayMessage: function () {alert(this.message)}}})1.5双向绑定(v-model)请输入内容为{{message}}var vmnew Vue({el:#app,data:{message: }})下拉框的双向绑定---请选择---ABC选了:{{message}}var vmnew Vue({el:#app,data:{message: }})1.6Vue组件Vue.component(jinhao,{props:[value],template:{{value.message}}})var vmnew Vue({el:#app,data:{items:[{message: 前端},{message: 后端},{message: 运维}]}})1.7axios通信{{info.name}}{{info.address.city}}小胖的Java博客var vmnew Vue({el:#app,//data属性 vmdata(){return {//请求返回合适的参数必须和json一样info: {name: null,url: null,address: {street: null,city:null}}}},mounted(){axios.get(data.json).then(response(this.inforesponse.data));}})1.7 计算属性Computed{{cruuentTime1()}}{{cruuentTime2}}var vmnew Vue({el:#app,data:{merssage: wo},methods: {cruuentTime1: function () {return Date.now();}},computed:{cruuentTime2: function () {//如果computed中的数据发生了改变就是merssage变了返回值return也会发生改变this.merssage;return Date.now();}}})1.8组件插槽 slotVue.component(todo,{template: });Vue.component(todo-title,{props:[title],template: {{title}}});Vue.component(todo-items,{props:[value],template: {{value.java}}});var vmnew Vue({el:#app,data:{title: 小胖学技术,jishu:[{java: spring},{java: springmvc},{java: mybatis}]}})1.9自定义事件内容分发v-bind:indexindex v-on:removeremoveItems v-bind:keyindexVue.component(todo,{template: });Vue.component(todo-title,{props:[title],template: {{title}}});Vue.component(todo-items,{props:[value,index],template: {{index}}---{{value}} 删除,methods:{remove:function (index) {this.$emit(remove,index);}}});var vmnew Vue({el:#app,data:{title: 小胖学技术,jishu:[spring,springmvc,mybatis]},methods:{removeItems:function (index) {console.log(删除了this.jishu[index]元素);this.jishu.splice(index,1);}}})
