企业网站禁忌金昌北京网站建设

当前位置： 首页 > news >正文

企业网站禁忌,金昌北京网站建设,网站建设策划书在哪济南兴田德润实惠吗,淘宝直通车推广怎么做目录 一、组件基础 二、组件的嵌套关系

1. 基础架构
2. 嵌套
   三、组件注册方式
3. 局部注册#xff1a;
4. 全局注册#xff1a; 四、组件传递数据
5. 基础架构
6. 传递多值
7. 动态传递数据 五、组件传递多种数据类型
8. Number
9. Array
10. Object 六、组…目录 一、组件基础 二、组件的嵌套关系
11. 基础架构
12. 嵌套  三、组件注册方式
13. 局部注册
14. 全局注册 四、组件传递数据
15. 基础架构
16. 传递多值 3.  动态传递数据 五、组件传递多种数据类型
17. Number
18. Array
19. Object 六、组件传递Props的校验 1. 默认值
20. 必选项 一、组件基础 组件最大的优势就是可复用性。 当使用构建步骤时我们一般将vue组件定义在一个单独的.vue文件当中这就被叫做单文件组织SFC 组件组成结构 —- 在components文件当中新建文件MyApp.vue templatediv classcontainer{{ message }}/div /template scriptexport default{data(){return{message:组件基础组成}}} /script !– 让当前样式只在当前组件中生效 如果不加scoped那么.container将会是全局样式在任何组件当中使用– style scoped.container{font-size: 30px;color: red;} /style 组件引用结构—–在App.vue当中设置如下属性: script//第一步引入组件import MyApp from ./components/MyApp.vue;export default{//第二步注册组件components:{MyApp}} /script template!–第三步:显示组件–MyApp/ /template 二、组件的嵌套关系 组件允许我们将UI划分为独立的、可重用的部分并且可以对每个部分进行单独的思考。在实际应用中组件常常被组织成层层嵌套的树状结构 这和我们嵌套HTML元素的方式类似Vue实现了自己的组件模型使我们可以在每个组件内封装自定义内容与逻辑。 新建pages文件夹并创建以下文件‘
21. 基础架构 Header.vue templateh3Header/h3 /template style scopedh3{width: 100%;height: 120px;border: 4px solid #333;text-align: center;line-height: 100px;box-sizing: border-box;} /style 在App.vue当中注册 scriptimport Header from ./components/Header.vue;export default{data(){},components:{Header}} /script templateHeader/ /template Main.vue: templatediv classmainh4Main/h4/div/templatestyle scoped.main{float: left;width: 60%;height: 400px;border: 4px solid #333;text-align: center;line-height: 100px;box-sizing: border-box;}.main h4{text-align: center;background-color: beige;} /style Aside.vue: templatediv classasideh4Aside/h4/div/templatestyle scoped .aside{float: right;width: 30%;height: 400px;border: 4px solid #333;text-align: center;line-height: 100px;box-sizing: border-box;} /style
22. 嵌套  新建Article.vue: templateh5Article/h5 /template styleh5{width:80%;margin:0 auto;text-align: center;line-height: 50px;box-sizing: border-box;margin-top: 20px;background:#999;} /style 在main.vue里引用article.vue templatediv classmainh4Main/h4Article/Article//div/template scriptimport Article from ./Article.vue;export default{components:{Article}} /script style scoped.main{float: left;width: 60%;height: 400px;border: 4px solid #333;text-align: center;line-height: 100px;box-sizing: border-box;}.main h4{text-align: center;background-color: beige;} /style 新建item.vue: templateh5Item/h5 /template style scopedh5{width:80%;margin: 0 auto;text-align: center;line-height: 100px;box-sizing: border-box;margin-top: 10px;background:#999;}
    /style 在aside.vue里引用item.vue: templatediv classasideh4Aside/h4Item/Item//div/template scriptimport Item from ./Item.vue;export default{components:{Item}} /script style scoped .aside{float: right;width: 30%;height: 400px;border: 4px solid #333;text-align: center;line-height: 100px;box-sizing: border-box;} /style 最终效果 三、组件注册方式 一个Vue组件在使用前需要先被“注册”这样Vue才能在渲染模板时找到其对应的实现。组件注册有两种方式全局注册和局部注册
23. 局部注册 前边讲的方案就是局部注册
24. 全局注册 我们这里使用Header.vue来进行全局注册 ①:那么首先在App.vue当中取消局部注册。 ②:在main.js当中设置全局注册方式 ③最终在哪里需要就在哪里引入 全局注册虽然很方便但有以下几个问题 1.全局注册但并没有被使用的组件无法在生产打包时被自动移除也叫“tree-shaking”)。如果你全局注册了一个组件即使它并没有被实际使用它仍然会出现在打包后的JS文件中         2.全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时不太容易定位子组件的实现。和使用过多的全局变量一样这可能会影响应用长期的可维护性 局部注册需要使用components选项。 四、组件传递数据 组件与组件之间不是完全独立的而是有交集的那就是组件与组件之间是可以传递数据的传递数据的解决方案就是props
25. 基础架构 首先我们新建一个Parent.vue templateh3Parent/h3 /template scriptexport default{data(){return{}} } /script 其次我们再新建Child.vue templateh3Child/h3 /template scriptexport default{data(){return{}}} /script 我们让Parent.vue给Child.vue传值不过在此之前我们先让Parent成为Child的父组件。 2. 传递多值 也可以传递多个值   3.  动态传递数据 注意事项         props 传递数据只能从父级传递到子级不能反其道而行 五、组件传递多种数据类型 通过props传递数据不仅可以传递字符串类型的数据还可以是其他类型例如数字、对象、数组等。但实际上任何类型的值都可以作为props的值被传递。
26. Number parent.vue templateh3Parent/h3Child :titlemessage :ageage/Child /template scriptimport Child from ./Child.vueexport default{data(){return{message:我是动态的数据,age:20}},components:{Child}} /script Child.vue templateh3Child/h3p{{ title }}/pp{{ age }}/p /template scriptexport default{data(){return{}},props:[title,age]} /script
27. Array parent.vue: templateh3Parent/h3Child :titlemessage :ageage :namesnames/Child /template scriptimport Child from ./Child.vueexport default{data(){return{message:我是动态的数据,age:20,names:[张三,李四,王五]}},components:{Child}} /script child.vue: templateh3Child/h3p{{ title }}/pp{{ age }}/pulli v-for(item,index) of names :keyindex{{ item }}/li/ul /template scriptexport default{data(){return{}},props:[title,age,names]} /script
28. Object parent.vue: templateh3Parent/h3Child :titlemessage :ageage :namesnames :userInfouserInfo/Child /template scriptimport Child from ./Child.vueexport default{data(){return{message:我是动态的数据,age:20,names:[张三,李四,王五],userInfo:{name:admin,age:20}}},components:{Child}} /script child.vue: templateh3Child/h3p{{ title }}/pp{{ age }}/pulli v-for(item,index) of names :keyindex{{ item }}/li/ulp{{ userInfo.name }}/pp{{ userInfo.age }}/p /template scriptexport default{data(){return{}},props:[title,age,names,userInfo]} /script 六、组件传递Props的校验 Vue组件可以更细致地声明对传入的props的校验要求。 以下例子为接收  String  类型传输  number  控制台警告 script import ComponentB from ./ComponentB.vue; export default{data(){return{title:20}},components:{ComponentB} } /script style /style templateh3ComponentA/h3ComponentB :titletitle//template templateh3ComponentB/h3p{{ title }}/p /template script export default{data(){return{}},props:{title:{type:String}} } /script可以接收多种类型 props:{title:{type:[String,Number,Array,Object]} } 1. 默认值 模拟情况传递数据的时候并没有真实传递。 数字和字符串可以直接default但是如果是数组和对象必须通过工厂函数返回默认值。 templateh3ComponentA/h3ComponentB :titletitle :ageage :namesnames/ /templatescriptimport ComponentB from ./ComponentB.vue;export default{data(){return{title:测试,//age:20,//names:[Tom,Bob]}},components:{ComponentB} } /script ________________________________________________________________________________ templateh3ComponentB/h3p{{ title }}/pp{{ age }}/pulli v-for(name,index) of names :keyindex{{ name }}/li/ul /templatescript export default{data(){return{}},props:{title:{type:[String,Number,Array,Object]},age:{type:Number,default:0},//数字和字符串可以直接default但是如果是数组和对象必须通过工厂函数返回默认值names:{type:Array,default(){return [xxx]}}} } /script
29. 必选项 没有传值就会提示警告。 templateh3ComponentA/h3ComponentB :titletitle :ageage :namesnames/ /templatescriptimport ComponentB from ./ComponentB.vue;export default{data(){return{// title:测试,age:20,names:[Tom,Bob]}},components:{ComponentB} } /script templateh3ComponentB/h3p{{ title }}/pp{{ age }}/pulli v-for(name,index) of names :keyindex{{ name }}/li/ul /templatescript export default{data(){return{}},props:{title:{type:[String,Number,Array,Object],required:true},age:{type:Number,default:0},//数字和字符串可以直接default但是如果是数组和对象必须通过工厂函数返回默认值names:{type:Array,default(){return [xxx]}}} } /script 注意         props 是只读的不允许修改父元素传递过来的数据。 templateh3ComponentB/h3p{{ title }}/pp{{ age }}/pulli v-for(name,index) of names :keyindex{{ name }}/li/ulbutton clickupdateupdate/button /templatescript export default{data(){return{}},props:{title:{type:[String,Number,Array,Object],required:true},age:{type:Number,default:0},//数字和字符串可以直接default但是如果是数组和对象必须通过工厂函数返回默认值names:{type:Array,default(){return [xxx]}}},methods:{update(){console.log(this.title);this.title新数据}} } /script