医院网站建设作用,中国4台根服务器地点,为什么网站开发需要写php,广告设计软件coreldraw表单 表单输入绑定 只需要v-model声明一下这个变量就可以。 还可以选择不同的类型#xff0c;例如 typecheckbox“ v-model 也提供了 lazy、number、.trim 功能#xff0c;只需要在v-model后面加入.lazy 例如#xff1a;v-model.lazy”message“ template…表单 表单输入绑定 只需要v-model声明一下这个变量就可以。 还可以选择不同的类型例如 typecheckbox“ v-model 也提供了 lazy、number、.trim 功能只需要在v-model后面加入.lazy 例如v-model.lazy”message“ templateh1表单/h1forminput typetext v-modelmessagep {{ message }}/p/forminput typecheckbox idcheckbox v-modelchecked/label forcheckbox {{ checked }} /label /templatescript export default {data(){return{message:,checked:false}} } /scriptref用法 获取DOM节点 div refcontainer classcontainer {{ content }} /div button clickgetElementHandle 获取元素 /button input typetexr refusername button clickgetUserName获取数据/buttonmethods:{getElementHandle(){// innerHTML是原生的JS的DOM功能。this.$refs获取了DOM的信息。this.$refs.container.innerHTML 哈哈;} }getUserName(){console.log(this.$refs.username.value); }引入步骤 1.引入组件 script中 import MyComponent from ./components/MyComponent.vue2.注入组件 export default {components:{MyComponent} } 3.显示组件 template下 MyComponent /可选项是script和style template !-- 写模板 -- /template script //写逻辑 /script style /*写样式 */ /styleApp.vue script import MyComponents from ./components/MyComponents.vue export default {components:{MyComponents} } /script templateMyComponents / /template style /styleMyComponents.vue script export default{data(){return{message:组件基础组成}} } /scripttemplatediv classcontainer {{ message }} /div /templatestyle.container{font-size: 30px;color: red; }/stylescoped style scoped /* 一旦加了scoped就只在当前组件中生效 */ /style组件的嵌套 App.vue #下面包含Main.vue 和 Header.vue script import Header from ./pages/Header.vue import Main from ./pages/Main.vue import MyComponents from ./components/MyComponents.vue import Aside from ./pages/Aside.vue export default {components:{// MyComponents,Header,Main,Aside} } /scripttemplate!-- MyComponents / --Header /Main /Aside / /templatestyle/style main.vue #下面还嵌套了 Article.vue templatediv classmainh3Main/h3Article /Article //div /template script import Article from ./Article.vue export default{components:{Article} } /script style scoped .main{float: left;width: 70%;height: 600px;border: 5px solid #999;box-sizing: border-box;/* border-top: 0px; */ } /style Article templateh3Article/h3 /template style scoped h3{width: 80%;margin: 0 auto;text-align: center;line-height: 100px;box-sizing: border-box;margin-top: 50px;background: #999; } /styleAside templatediv classasideh3 Aside /h3Item /Item /Item //div /templatescript import Item from ./Item.vue export default {components:{Item} } /scriptstyle scoped .aside{float: right;width: 30%;height: 600px;border: 5px solid #999;box-sizing: border-box;border-left: 0;border-top: 1; } /styleItem.vue templateh3Item/h3 /template style scoped h3{width: 80%;margin: 0 auto;text-align: center;line-height: 100px;box-sizing: border-box;margin-top: 10px;background: #999; } /styleHeader.vue templateh3Header/h3 /template style scoped h3{width: 100%;height: 100px;border: 5px solid #999;text-align: center;line-height: 100px;box-sizing: border-box; } /style 组件注册 全局注册 - 局部注册 main.js中去注册组件 这样就不用每个组件都去import 和 export default {components: } 全局注册注册过即使没有用到也会打包到JS中而且不利于后期维护 createApp(App).mount(#app) // const app createApp(App) // 在这中间写组件的注册 // app.mount(#app)局部注册上面讲的三步就是局部注册。 组件的数据传递 _props 组件与组件之间不是完全独立的而是有交集的那就是组件与组件之间可以传递数据的。 传递数据的解决方案就是。props 父组件数据可以传递给子组件数量没有限制。 如果向传递动态的数据需要变成b-bind的形式进行传递 三级导入 App.vue script import Parent from ./components/Parent.vue export default {components:{Parent} } /scripttemplateParent / /templatestyle/styleParent.vue templateh3Parent/h3Child titleParent数据 / /template script import Child from ./Child.vue export default{data(){return{}},components:{Child} } /scriptChild.vue templateh3Child/h3p {{ title }} /p /template script export default{data(){return{}},props:[title] } /scriptprops[“title”] #这个title要以字符串的形式存在 注意只能从父集传到子集但不能反向。 如果向传递数值类型用v-bind形式 :ageage data(){ //data中声明 age:0//子组件使用props进行接收后就可以使用 props:[title,age]数组类型传递 使用v-bind传递 使用 props:[names] 接收子组件直接使用 li v-for(item,index) of names :keyindex {{ item }} /li 使用传递类型校验 props:{title:{type: String} }验证接收的数据是否是规定的类型如果错误则不予接收。 type 可以验证多个类型 加函数default() 是工厂模式 props:{title:{type: [String,Number,Array,Object],required: true //加这个选项则这个为必选项},age:{type: Number,default:0},UserInfo:{type:object,default(){return {}}}names:{type:Array,default(){return [空] //不给传就返回一个 空 如果是数组或者默认值要这么写}} }注意子组件的函数不允许修改父组件传过来的数据。 props是只读的。 组件事件 可以使用 $emit 方法触发自定义事件。 触发自定义事件的目的是组件之间的传递数据。 子传父使用自定义事件。 App.vue script import ComponentsEvent from ./components/ComponentsEvent.vue export default {components:{ComponentsEvent} } /scripttemplateComponentsEvent / /templatestyle /style ComponentsEvent.vue templateh3A事件/h3Child some-eventgetHandle /p A接收的数据{{ message }} /p /template script import Child from ./Child.vue export default {data(){return{message:}},components:{Child},methods:{getHandle(data){this.message data;}} } /script Child.vue templateh3Child/h3button clicksendHandle传递数据/button /template script export default{methods:{sendHandle(){this.$emit(someEvent,B的数据)}} } /script小技巧 通过子给父传递参数子使用watch监听器监听数据然后通过 this.$emit(searchEvent,newValue) //第一个参数是父的函数的映射key。newvalue是返回的值反馈回父