What are the details you should pay attention to when using components in web development?
Editor to share with you web development components should pay attention to which details, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to understand it!
Vue.component ("row", {template: "1"}); Vue.component ("list", {template: "1"}); var vm = new Vue ({el: "# root"})
Defining data in a subcomponent must be a function, not an object (in order not to share data among subcomponents, each subcomponent has an independent data store through function return):
Vue.component ("row", {/ * / /), however, it is not possible to define data through objects in a subcomponent rather than in the root component new Vue () Instead, it must be the function data: {content: "this is a row"}, * / this is correct: data: function () {return {content: "this is content"}}, template: "{{content}"}) Vue.component ("list", {template: "1"}); var vm = new Vue ({el: "# root"})
Vue does not recommend operating dom, but vue data binding alone does not necessarily satisfy the situation in dealing with some complex animation effects. Operate dom through ref in vue:
Hello world var vm = new Vue ({el: "# root", methods: {handleClick: function () {/ / get the specified dom node console.log (this.$ refs.hello[ XSS _ clean])})
What if you get the dom of the component?
{{total}} Vue.component ("counter", {template: "{{number}}", data: function () {return {number: 0}}) Methods: {handleClick: function () {this.number++ this.$emit ("change")}}) var vm = new Vue ({el: "# root", data: {total: 0}) Methods: {handleChange: function () {/ * console.log (this.$refs.one.number) console.log (this.$refs.two.number) * / this.total = this.$refs.one.number + this.$refs.two.number}})
The above is all the contents of the article "what are the details to pay attention to when using components in web development?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
