zoukankan html css js c++ java

vue

1.数据的双向绑定

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="app">
 9 
10     <label for="username">用户名：</label>
11     <input type="text" id="username" v-model="msg">
12     <p>{{ msg }}</p>
13     <textarea name="" id="" v-model="msg"></textarea>
14 
15     <input type="checkbox" id="checked" v-model="checked">
16     <label for="checked">{{ checked }}</label>
17     <!--多个复选框 使用列表保存-->
18     <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
19     <label for="jack">Jack</label>
20     <input type="checkbox" id="john" value="John" v-model="checkedNames">
21     <label for="john">John</label>
22     <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
23     <label for="mike">Mike</label>
24     <br>
25     <span>Checked names: {{ checkedNames }}</span>
26 
27     <br>
28     <select v-model="selected">
29         <option disabled value="">请选择</option>
30         <option>A</option>
31         <option>B</option>
32         <option>C</option>
33     </select>
34     <span>Selected: {{ selected }}</span>
35     <!--懒监听  只有回车之后才会将数据同步-->
36     <input type="text" v-model.lazy="msg">
37     <!--数字显示-->
38     <input type="number" v-model.number="age">
39     <!--清除前后空格-->
40     <input type="text" v-model.trim="msg">
41 </div>
42 <script src="vue.js">
43 
44 </script>
45 <script>
46     new Vue({
47         el:"#app",
48         data(){
49             return {
50                 msg:"alex",
51                 checked:false,
52                 checkedNames:[],
53                 selected:"",
54                 age:0
55             }
56         }
57     })
58 </script>
59 </body>
60 </html>

双向绑定

2.双向数据绑定实现

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="app">
 9     <input type="text" :value="msg" @input="changeHandler">
10     <p>{{ msg }}</p>
11 </div>
12 <script src="vue.js"></script>
13 <script>
14     new Vue({
15         el:'#app',
16         data(){
17             return {
18                 msg:'alex'
19             }
20 
21         },
22         methods:{
23             changeHandler(e){
24                 console.log(e);
25                this.msg =  e.target.value
26             }
27         }
28     })
29 </script>
30 </body>
31 </html>

View Code

3.局部组件的使用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="app">
 9     {{ msg }}
10 </div>
11 <script src="vue.js"></script>
12 <script>
13     //如果仅仅是实例化vue对象中，既有el又有template，如果template中
14     //定义模板内容，那么template模板优先级大于el
15 
16     // App header  aside  content
17     //1声子  Vue 中组件的名字  首字母大写，跟标签区分  组建中的data必须是一个函数，热切要有return一个对象
18     let App = {
19       data(){
20           return {
21               text:"日天"
22           }
23       },
24       template:`
25         <div>
26             <h2>{{ text }}</h2>
27         </div>
28       `,
29       methods:{
30 
31       }
32     };
33 
34 
35     new Vue({
36         el:"#app",
37         data(){
38             return {
39                 msg:"alex"
40             }
41         },
42         //3用子
43         template:`
44         <div class="app">
45             <App />
46         </div>
47 
48 
49         `,
50         components:{
51             //2挂子
52         //    如果key和value一样 可以只写一个
53             // App:App
54             App
55         }
56 
57     })
58 </script>
59 </body>
60 </html>

View Code

4.局部组件的使用更改（全局组件）

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6 </head>
  7 <body>
  8 <div id="app">
  9     {{ msg }}
 10 </div>
 11 <script src="vue.js"></script>
 12 <script>
 13     //如果仅仅是实例化vue对象中，既有el又有template，如果template中
 14     //定义模板内容，那么template模板优先级大于el
 15 
 16     //第一个参数是组件的名字，第二个参数 options参数  它是全局组件
 17     //<slot></slot> solt是vue中提供的内容组件 ，它会去分发内容
 18     Vue.component("VBtn",{
 19         data(){
 20             return {
 21 
 22             }
 23         },
 24         template:`
 25             <button>
 26             <slot></slot>
 27 </button>
 28 
 29         `
 30     });
 31 
 32 
 33 
 34 
 35     // App header  aside  content
 36     //1声子  Vue 中组件的名字  首字母大写，跟标签区分  组建中的data必须是一个函数，热切要有return一个对象
 37     let Vheader = {
 38         data(){
 39             return {
 40 
 41             }
 42         },
 43         //template定义模板内容
 44         //Component template should contain exactly one root element
 45         template:`
 46         <div>
 47             <h2>日天</h2>
 48             <h2>日天</h2>
 49             <VBtn>登录</VBtn>
 50             <VBtn>注册</VBtn>
 51             <VBtn>按钮</VBtn>
 52             <VBtn>提交</VBtn>
 53         </div>
 54         `
 55     }
 56 
 57 
 58     let App = {
 59       data(){
 60           return {
 61               text:"日天"
 62           }
 63       },
 64       template:`
 65         <div>
 66             <h2>{{ text }}</h2>
 67             <Vheader></Vheader>
 68             <VBtn>删除</VBtn>
 69             <br>
 70         </div>
 71       `,
 72       methods:{
 73 
 74       },
 75         components:{
 76           Vheader
 77         }
 78     };
 79 
 80 
 81     new Vue({
 82         el:"#app",
 83         data(){
 84             return {
 85                 msg:"alex"
 86             }
 87         },
 88         //3用子
 89         template:`
 90         <div class="app">
 91             <App />
 92         </div>
 93 
 94 
 95         `,
 96         components:{
 97             //2挂子
 98         //    如果key和value一样 可以只写一个
 99             // App:App
100             App
101         }
102 
103     })
104 </script>
105 </body>
106 </html>

View Code

5.父往子传值

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6 </head>
  7 <body>
  8 <div id="app">
  9     {{ msg }}
 10 </div>
 11 <script src="vue.js"></script>
 12 <script>
 13     //如果仅仅是实例化vue对象中，既有el又有template，如果template中
 14     //定义模板内容，那么template模板优先级大于el
 15 
 16     //第一个参数是组件的名字，第二个参数 options参数  它是全局组件
 17     //<slot></slot> solt是vue中提供的内容组件 ，它会去分发内容
 18     Vue.component("VBtn",{
 19         data(){
 20             return {
 21 
 22             }
 23         },
 24         template:`
 25             <button>
 26             {{ id }}
 27 </button>
 28 
 29         `,
 30         props:["id"]
 31     });
 32 
 33 
 34 
 35 
 36     // App header  aside  content
 37     //1声子  Vue 中组件的名字  首字母大写，跟标签区分  组建中的data必须是一个函数，热切要有return一个对象
 38     let Vheader = {
 39         data(){
 40             return {
 41 
 42             }
 43         },
 44         //template定义模板内容
 45         //Component template should contain exactly one root element
 46         template:`
 47         <div>
 48             <h2>日天</h2>
 49             <h2>{{ msg }}</h2>
 50             <h2>{{ post.title }}</h2>
 51             <VBtn :id="post.id">提交</VBtn>
 52         </div>
 53         `,
 54         props:["msg","post"]
 55     }
 56 
 57 
 58     let App = {
 59       data(){
 60           return {
 61               text:"我是父组件的数据",
 62               post:{
 63                   id:1,
 64                   title:"My Journey with Vue"
 65               }
 66           }
 67       },
 68       template:`
 69         <div id="a">
 70 
 71             <Vheader :msg="text" :post="post"></Vheader>
 72 
 73 
 74         </div>
 75       `,
 76       methods:{
 77 
 78       },
 79         components:{
 80           Vheader
 81         }
 82     };
 83 
 84 
 85     new Vue({
 86         el:"#app",
 87         data(){
 88             return {
 89                 msg:"alex"
 90             }
 91         },
 92         //3用子
 93         template:`
 94         <div class="app">
 95             <App />
 96         </div>
 97 
 98 
 99         `,
100         components:{
101             //2挂子
102         //    如果key和value一样 可以只写一个
103             // App:App
104             App
105         }
106 
107     })
108 </script>
109 </body>
110 </html>

View Code

6.子往父传值

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6 </head>
  7 <body>
  8 <div id="app">
  9     {{ msg }}
 10 </div>
 11 <script src="vue.js"></script>
 12 <script>
 13     //如果仅仅是实例化vue对象中，既有el又有template，如果template中
 14     //定义模板内容，那么template模板优先级大于el
 15 
 16     //第一个参数是组件的名字，第二个参数 options参数  它是全局组件
 17     //<slot></slot> solt是vue中提供的内容组件 ，它会去分发内容
 18     Vue.component("VBtn",{
 19         data(){
 20             return {
 21 
 22             }
 23         },
 24         template:`
 25             <button @click="clickHandler">
 26             {{ id }}
 27 </button>
 28 
 29         `,
 30         props:["id"],
 31         methods:{
 32             clickHandler(){
 33                 this.id++;
 34                 // this.$emit('父组件声明自定义的事件','传值');
 35                 this.$emit("clickHandler",this.id)
 36             }
 37         }
 38     });
 39 
 40 
 41 
 42 
 43     // App header  aside  content
 44     //1声子  Vue 中组件的名字  首字母大写，跟标签区分  组建中的data必须是一个函数，热切要有return一个对象
 45     let Vheader = {
 46         data(){
 47             return {
 48 
 49             }
 50         },
 51         //template定义模板内容
 52         //Component template should contain exactly one root element
 53         template:`
 54         <div>
 55             <h2>我是header组件</h2>
 56             <h2>日天</h2>
 57             <h2>{{ msg }}</h2>
 58             <h2>{{ post.title }}</h2>
 59             <VBtn :id="post.id" @clickHandler="clickHandler">提交</VBtn>
 60         </div>
 61         `,
 62         props:["msg","post"],
 63         methods:{
 64             clickHandler(val){
 65                 alert(val);
 66                 this.$emit("fatherHandler",val)
 67             }
 68         }
 69     }
 70 
 71 
 72     let App = {
 73       data(){
 74           return {
 75               text:"我是父组件的数据",
 76               post:{
 77                   id:1,
 78                   title:"My Journey with Vue"
 79               }
 80           }
 81       },
 82       template:`
 83         <div id="a">
 84 
 85             <Vheader :msg="text" :post="post" @fatherHandler="father_handler"></Vheader>
 86 
 87 
 88         </div>
 89       `,
 90       methods:{
 91             father_handler(val){
 92                 this.post.id = val
 93             }
 94       },
 95         components:{
 96           Vheader
 97         }
 98     };
 99 
100 
101     new Vue({
102         el:"#app",
103         data(){
104             return {
105                 msg:"alex"
106             }
107         },
108         //3用子
109         template:`
110         <div class="app">
111             <App />
112         </div>
113 
114 
115         `,
116         components:{
117             //2挂子
118         //    如果key和value一样 可以只写一个
119             // App:App
120             App
121         }
122 
123     })
124 </script>
125 </body>
126 </html>

View Code

7.平行组件传值

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport"
  6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>Document</title>
  9 </head>
 10 <body>
 11 <div id="app">
 12     <App/>
 13 </div>
 14 <script src="vue.js"></script>
 15 <script>
 16     let bus = new Vue();
 17     //A===》B   B要声明事件  $on('事件的名字',function(val){})  A要触发事件 $emit('A组件中声明的事件名','值')
 18 
 19     //前提 这两个方法必须绑定在同一个实例化对象（bus）
 20     Vue.component('Test2', {
 21         data() {
 22             return {
 23                 text:''
 24             }
 25         },
 26         template: `
 27             <h2>{{ text }}</h2>
 28         `,
 29         methods: {
 30 
 31         },
 32         created(){
 33             bus.$on('testData', (val)=> {
 34                 alert(val);
 35                 this.text = val;
 36             })
 37         }
 38     })
 39     Vue.component('Test', {
 40         data() {
 41             return {
 42                 msg: '我是子组件的数据'
 43             }
 44         },
 45         props:['txt'],
 46         template: `
 47             <button @click = 'clickHandler'>{{ txt }}</button>
 48         `,
 49         methods: {
 50             clickHandler() {
 51 
 52                 bus.$emit('testData',this.msg)
 53             }
 54         }
 55     })
 56 
 57     let Vheader = {
 58         data() {
 59             return {
 60                 txt:'wusir'
 61             }
 62 
 63         },
 64         template: `
 65             <div class="header">
 66 
 67                 <Test :txt = 'txt'/>
 68                 <Test2 />
 69 
 70             </div>
 71         `
 72     }
 73     let App = {
 74         data() {
 75             return {}
 76 
 77         },
 78         template: `
 79            <div class="app">
 80 
 81                  <Vheader />
 82 
 83             </div>
 84         `,
 85         components: {
 86             Vheader
 87         }
 88     }
 89     new Vue({
 90         el: '#app',
 91         data() {
 92             return {}
 93         },
 94         components: {
 95             App
 96         }
 97     })
 98 
 99 </script>
100 </body>
101 </html>

View Code

查看全文

相关阅读:
【亲身测试成功】windows7 32位操作系统环境下安装 windows7 64位操作系统
 Deprecated: Function ereg_replace() is deprecated in ……【解决方法】
20100526（开始上班咯···）
20100608
String与string的区别
 Jquery CheckBox全选方法
 与技术无关
 jquery之对象访问（是不是API里出错了呢？）
工作四个月之后的小感
 关于数据库中的AK（Alternate Key）

原文地址：https://www.cnblogs.com/zhangqing979797/p/10085368.html