高中信息技术网站设计规划,wordpress二级目录安装,网站建设手机端页面模板,网页设计的工具有哪些表单 表单输入绑定 只需要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是返回的值反馈回父
props也可以实现子传父 App.vue script
import ComponentsEvent from ./components/ComponentsEvent.vue
import ComponentsA from ./components/ComponentsA.vue
export default {components:{ComponentsEvent,ComponentsA}
}
/scripttemplateComponentsEvent /ComponentsA /
/templatestyle
/style ComponentsA.vue templateh3ComponentsA/h3p 父元素 {{ message }} /pComponentsB title标题 :onEventdataFn/
/template
script
import ComponentsB from ./ComponentsB.vueexport default {components:{ComponentsB},data(){return{message:父元素}},methods:{dataFn(data){console.log(data);this.message data}}
}
/script ComponentsB.vue js
templateh3 ComponentsB /h3 p {{ title }} /pp {{ onEvent( msg ) }} /p
/template
script
export default {data(){return{}},props:{title:String,onEvent:Function}
}
/script
透传Attribute
子组件必须有且是唯一根元素 ComponentsA classattr-container 子组件禁止继承
script
export default {inheritAttrs:false
}
/script
