Vue实例成员、组件

it2022-05-05 117

实例成员之computed

<body><div id="app"> <p> 姓：<input type="text" v-model="first_name"> 名：<input type="text" v-model="last_name"> </p> <p> 姓名：<b>{{ full_name }}</b> </p></div></body><script src="js/vue.js"></script><script> new Vue({ el: '#app', data: { first_name: '', last_name: '', // full_name: 'None', }, computed: { // 1.在computed中定义的变量的值等于绑定的函数的返回值 // 2.绑定的函数中出现的所有vue变量都会被监听 full_name: function () { // let a = this.first_name; // this.last_name console.log('被调用了'); return this.first_name + this.last_name; } } })</script>

实例成员之watch

<body><div id="app"> <p> 姓名：<input type="text" v-model="full_name"> </p> <p> 姓：<b>{{ first_name }}</b> 名：<b>{{ last_name }}</b> </p></div></body><script src="js/vue.js"></script><script> new Vue({ el: '#app', data: { full_name: '', first_name: '', last_name: '' }, watch: { // 1.后方绑定的函数就是监听前方的变量，变量值改变，函数被调用 full_name: function () { let res = this.full_name.split(''); this.first_name = res[0]; this.last_name = res[1]; } } })</script>

分隔符

<body><div id="app"> {{ msg }} {{{ msg } ${ msg }</div></body><script src="js/vue.js"></script><script> new Vue({ el: '#app', data: { msg: '12345' }, delimiters: ['${', '}'] })</script>

组件

# 组件：有html模板，有css样式，有js逻辑的集合体# 根组件的模板就使用挂载点，子组件必须自己定义template(局部子组件、全局子组件)

局部组件

<body><div id="app">  <abc></abc> <abc></abc></div></body><script src="js/vue.js"></script><script> // 定义局部组件 let localTag = { // 1.data要达到组件的复用，必须为每个组件提供一个名称空间(作用域) // 2.data的值就是一个存放数据的字典 // 需要满足1和2，data值为一个可以产生名称空间的函数的返回值，返回值是字典 data: function () { return { count: 0, } }, template: ` <div class="box" style="border: solid; width: 100px"> <h1>标题</h1> <p class="p1">文本内容</p> <p @click="action" class="p2" style="background: yellowgreen">被点击了{{ count }}下</p> </div> `, methods: { action: function () { this.count++ }, } }; new Vue({ el: '#app', data: { }, // 局部组件必须注册 components: { 'abc': localTag } })</script>

全局组件

<body><div id="app">  <old-boy></old-boy></div></body><script src="js/vue.js"></script><script> // Vue.component(组件名, {组件主体}); Vue.component('oldBoy', { data: function () { return { count: 0 } }, template: ` <div class="box" style="border: solid; width: 100px"> <h1>全局</h1> <p class="p1">文本内容</p> <p @click="action" class="p2" style="background: yellowgreen">被点击了{{ count }}下</p> </div> `, methods: { action: function () { this.count++ }, } }); // 全局组件无需注册 new Vue({ el: '#app', data: { } })</script>

组件间的交互：父传子

<div id="app">    <local-tag :owen="msg"></local-tag></div></body><script src="js/vue.js"></script><script> let localTag = { // 子组件拿自定义属性 props: ['owen'], template: ` <div> <h1>信息</h1> <p>{{ owen }}</p> </div> ` }; new Vue({ el: '#app', data: { msg: '父级的信息' }, components: { // 'localTag': localTag, // localTag: localTag, localTag // 在页面中 <local-tag> } })</script>

组件间的交互：子传父

<div id="app"> <h1>{{ title }}</h1> <global-tag @recv="get_title"></global-tag></div></body><script src="js/vue.js"></script><script> Vue.component('global-tag', { template: ` <div> <input type="text" v-model="msg">  </div> `, data: function () { return { msg: '' } }, methods: { // action: function () { // let msg = this.msg; // // recv是自定义的事件 // this.$emit('recv', msg) // } }, watch: { msg: function () { // 只要msg只有变化，就将值同步给父组件 this.$emit('recv', this.msg) } } }); new Vue({ el: '#app', data: { title: '父组件定义的标题' }, methods: { get_title: function (msg) { this.title = msg } } })</script>

转载于:https://www.cnblogs.com/zhangdajin/p/11155305.html

相关资源：各显卡算力对照表！

专利

最新回复(0)