暑期实践Vue7.17-CSDN博客

本文链接：https://blog.csdn.net/qq_42285148/article/details/122865808

事件修饰符：keyup.事件
监听器：watch

 <body>
 <id id="app">
 千米：<input type="text" v-model="kilometers">
 米：<input type="text" v-model="meters">
 </id>
 <script src="./vue.js"></script>
 <script>
 var vm=new Vue({
 el:'#app',
 data:{
 // firstName:'Jake',
 // lastName:'Green'
 // thing:1
 kilometers:0,
 meters:0
 },
 watch:{
 kilometers:function(val){
 this.meters=val*1000
 },
 meters:function(val,oldval){
 this.kilometers=val/1000
 }
 }
 </script>
 </body>

效果：

组件基础

<body>
<div id="app">
<button-counter></button-counter>//段横杠命名
</div>
<script src="vue.js"></script>6 <script>
//注册一个组件，el不能使用，其它都能用
Vue.component('ButtonCounter',{//camelCase命名法
data:function(){
return{
count:0
}
},
template:`
<button @click="count++"> You clicked me{{count}} times.</button>
`
})
new Vue({
el:'#app'
})
</script>
</body>

效果：

组件 component
组件使用的3个步骤
1.创建组件

 var myComponent= Vue.extend({
 template:'<div>This is my first compontednt</div>'
 })

2.注册组件

 Vue.component('my-conponent',myComponent)//全局注册
 new Vue({
 el:'#app'
 })1 new Vue({
 el:'#app',
 components:{
 'my-component':myComponent//局部注册
 }
 })

3.使用组件

 <div id="app">
 <my-component></my-component>
 </div>

父组件和子组件

 <div id="app">
 <parent-component></parent-component>
 </div>
 <script src="./vue.js"></script>
 <script>
 var Child = Vue.extend({
 template:'<p>This is a Child</p>'
 })
 var Parent = Vue.extend({
 template:'<div><p>this is a Parent</p> \
 <child-component></child-component></div>',
 components:{
 'child-component':Child
 }
 })
 Vue.component('parent-component',Parent)
 new Vue({
 el:'#app'
 })
 </script>

 <div id="app">
 <my-component></my-component>3 </div>
 <script src="./vue.js"></script>
 <script>
 Vue.component('my-component',{
 template:'<div>组件内容</div>'//必须包含唯一一对标签
 })
 new Vue ({
 el:'#app'
 })
 </script>

父子组件如何传递数据（使用props传递数据）

 <div id="app">
 <my-component message="来自父组件的数据"></my-component>
 <my-component post-title="来自父组件的数据"></my-component>
 </div>5 <script src="./vue.js"></script>
 <script>
 Vue.component('my-component',{
 props:['message'],//一般是数组
 props:['postTitle']//也要用短横杠命名
 template:'<div>{{message}}</div>'
 })
 new Vue({
 el:'#app'
 })
 </script>

使用script标签或者template标签
 <div id="app">
 <my-component></my-component>
 </div>
 //<script type="text/x-template" id="myComponent">
 // <div>This is a component</div>
 //</script>
 <template id="myComponent">
 <div>This is a component</div>
 </template>
 <script src="./vue.js"></script>
 <script>
 Vue.component('my-component',{
 template:'#myComponent'//id
 })
 new Vue ({
 el:'#app'
 })
 </script>
JS对象是引用关系，如果return出去的对象引用了外部的一个对象，那这个对象就是共享的，任何一方修改都会同步

单向绑定
通过prop传递的数据是单向的，父组件的属性变化会向下传递给子组件，但反过来不行。这可以防止子组件意外改变父组件的状态，从而导致应用程序的数据流难以理解。
解除警告的2种方法
 //方法一
 props:['initialCounter'],
 data:function(){
 return{
 counter:this.initialCounter}
 }
 //方法二
 props:['size'],
 computed:{
 normaliedSize:function(){
 return this.size.trim().toLowerCase()
 }
 }

监听子组件事件

 vm.$emit(eventName,[...args])//eventName是自定义的，args是附加的参数

子传父示例1

 <body>
 <div id="app">
 <child @greet="sayHello"></child>
 </div>
 <script src="./vue.js"></script>
 <script>
 Vue.component('child',{
 data:function(){
 return {
 name: 'Tom'
 }
 },
 methods:{
 handleClick(){
 this.$emit('greet',this.name)
 }
 },
 template:'<button @click="handleClick">欢迎</button>'
 })
 new Vue({
 el:'#app',
 methods:{
 sayHello(name){
 alert('Hello,'+name)
 }
 }
 })
 </script>
 </body>

子传父示例2

 <body>
 <div id="app">
 <p>总数：{{total}}</p>
 <my-component @increase="handleGetTotal" @reduce="handleGetTotal"></my-component>
 </div>
 <script src="./vue.js"></script>
 <script>
 Vue.component('my-component',{
 template:`
 <div>
 <button @click="handleIncrease">+1</button>
 <button @click="handleReduce">-1</button>
 </div>
 `,
 data:function(){
 return{
 counter:0
}
},
 methods:{
 handleIncrease:function(){
 this.counter++;
 this.$emit('increase',this.counter)
 },
 handleReduce:function(){
 this.counter--;
 this.$emit('reduce',this.counter)
 }
 }
 })
 new Vue({
 el:'#app',
 data:{
 total:0
 },
 methods:{
 handleGetTotal:function(total){
 this.total=total
 }
 }
 })
 </script>
 </body>

v-model还可以用来创建自定义的表单输入组件，进行数据双向绑定

 <div id="app">
 <p>总数：{{total}}</p>
 <my-component v-model="total"></my-component>
 <button @click="handleReduce">-1</button>
 </div>
 <script src="./vue.js"></script>
 <script>
 Vue.component('my-component',{
 props:['value'],
 template:'<input :value="value" @input="updateValue" />',
 methods:{
 updateValue:function(event){
 this.$emit('input',event.target.value)
 }
 }
 })
 new Vue({
 el:'#app',
 data:{
 total:0
 },
 methods:{
 handleReduce:function(){24 this.total--
 }
 }
 })
 </script>

中央事件总线（bus）

 <div id="app">
 {{message}}
 <component-a></component-a>
 </div>
 <script src="./vue.js">
 </script>
 <script>
 var bus = new Vue()
 Vue.component('component-a',{
 template:'<button @click="handleEvent">事件传递</button>',
 methods:{
 handleEvent:function(){
 bus.$emit('on-message','来自组件component-a的内容')
 }
 }
 })
 new Vue({
 el:'#app',
 data:{
 message:''
 },
 mounted:function(){
 var _this=this;
 bus.$on('on-message',function(msg){
 _this.message=msg
 })
 }
 })
 </script>

bootstrap样式，主要做界面