vue学习2
组件
注册全局组件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>register the global component</title> 6 7 </head> 8 <body> 9 <div id="app"> 10 <p><input type="text" v-model="message"></p> 11 <hr> 12 <p>{{message}}</p> 13 <hr> 14 <input type="checkbox" v-model="checked"> 15 <p><label for="">{{checked}}</label></p> 16 <hr> 17 <sakula></sakula> 18 <sakula></sakula> 19 </div> 20 <hr> 21 <div id="app02"> 22 <sakula></sakula> 23 <sakula></sakula> 24 </div> 25 <script src="vue.js"></script> 26 <script> 27 Vue.component('sakula',{ 28 template:`<button v-on:click="add01">{{mes}}</button>`, 29 data:function () { 30 return { 31 mes:0, 32 } 33 }, 34 methods:{ 35 add01:function () { 36 this.mes+=1; 37 } 38 } 39 }) 40 let app = new Vue({ 41 el:'#app', 42 data:{ 43 message:'', 44 checked:false, 45 46 }, 47 48 }) 49 let app0= new Vue({ 50 el:'#app02', 51 }) 52 </script> 53 </body> 54 </html>
注册局部组件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 </head> 8 <body> 9 <div id="app"> 10 <sakula></sakula> 11 <sakula></sakula> 12 </div> 13 <script src="vue.js"></script> 14 <script> 15 let s1={ 16 template:`<button v-on:click="selfadd">{{mes}}</button>`, 17 data:function () { 18 return{ 19 mes:1, 20 } 21 }, 22 methods:{ 23 selfadd:function () { 24 this.mes+=1; 25 } 26 }, 27 } 28 let app = new Vue({ 29 el:'#app', 30 data:{ 31 message:'', 32 }, 33 components:{ 34 sakula:s1, 35 }, 36 }) 37 </script> 38 </body> 39 </html>
父子组件传值
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 </head> 8 <body> 9 <div id="app"> 10 <sss v-for="item,index in jishilist " v-bind:name="item"></sss> 11 </div> 12 <script src="vue.js"></script> 13 <script> 14 let HHH={ 15 template:`<button v-on:click="add01">{{name}}{{count}}</button>`, 16 props:{ 17 name:String, 18 }, 19 data:function () { 20 return{ 21 count:1, 22 } 23 }, 24 methods:{ 25 add01:function () { 26 this.count+=1; 27 } 28 } 29 }; 30 let app = new Vue({ 31 el:'#app', 32 data:{ 33 jishilist:['1号技师','2号技师','3号技师','4号技师'] 34 }, 35 components:{ 36 sss:HHH, 37 } 38 }) 39 </script> 40 </body> 41 </html>
子父组件传值
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>子父组件的传值</title> 6 7 </head> 8 <body> 9 <div id="app"> 10 <h4>接客总数:{{total}}</h4> 11 <hr> 12 <sakula v-for="item,index in message" v-bind:name="item" v-on:jieke="ttt"></sakula> 13 </div> 14 <script src="vue.js"></script> 15 <script> 16 let HHH={ 17 template:`<button v-on:click="add01">{{name}}{{msg}}</button>`, 18 data:function () { 19 return{ 20 msg:1, 21 } 22 }, 23 methods:{ 24 add01:function () { 25 this.msg+=1; 26 this.$emit('jieke'); 27 } 28 }, 29 props:{ 30 name:String, 31 } 32 } 33 let app = new Vue({ 34 el:'#app', 35 data:{ 36 message:['1号技师','2号技师','3号技师'], 37 total:0, 38 }, 39 components:{ 40 sakula:HHH, 41 }, 42 methods:{ 43 ttt:function () { 44 this.total+=1; 45 } 46 } 47 }) 48 </script> 49 </body> 50 </html>
插槽和具名插槽
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>子父组件的传值</title> 6 7 </head> 8 <body> 9 <div id="app"> 10 <h4>接客总数:{{total}}</h4> 11 <hr> 12 <sakula v-for="item,index in message" v-bind:name="item" v-on:jieke="ttt"> 13 <template slot="s1"> 14 <span>s1s1s1</span> 15 <h4>s1s1s1s1s1</h4> 16 </template> 17 <template slot="s2"> 18 <h5>sssssss2222222</h5> 19 <lable >sssss2s2s2s2</lable> 20 </template> 21 </sakula> 22 </div> 23 <script src="vue.js"></script> 24 <script> 25 let HHH={ 26 template:`<div> 27 <button v-on:click="add01">{{name}}{{msg}}</button> 28 <slot name="s1"></slot> 29 <slot name="s2"></slot> 30 </div>`, 31 data:function () { 32 return{ 33 msg:1, 34 } 35 }, 36 methods:{ 37 add01:function () { 38 this.msg+=1; 39 this.$emit('jieke'); 40 } 41 }, 42 props:{ 43 name:String, 44 } 45 } 46 let app = new Vue({ 47 el:'#app', 48 data:{ 49 message:['1号技师','2号技师','3号技师'], 50 total:0, 51 }, 52 components:{ 53 sakula:HHH, 54 }, 55 methods:{ 56 ttt:function () { 57 this.total+=1; 58 } 59 } 60 }) 61 </script> 62 </body> 63 </html>
今日学习总结
1 1. Vue基础语法 2 1. Vue使用 3 1. 生成Vue实例和DOM中元素绑定 4 2. app.$el --> 取出该vue实例绑定的DOM标签 5 3. app.$data --> 取出该vue实例绑定的data属性 6 2. 模板语法 7 1. {{name}} --> 在标签中间引用data属性中的变量 8 2. v-html='msg' --> 在页面上显示我定义的标签元素 9 10 3. v-if='ok' --> 控制标签在不在DOM中 11 4. v-show='!ok' --> 控制标签的display属性的值（是否显示） 12 13 5. v-bind:href='url' --> 将标签的属性和vue实例的data属性绑定起来 14 6. v-on:click='dianwo'--> 给标签绑定一个点击事件，方法需要在vue实例的methods中定义 15 16 7. v-model='article' --> 用在input标签和textarea标签中，将用户输入和vue实例中的数据属性建立双向绑定 17 18 3. 计算属性和侦听器 19 1. 计算属性 20 （字符串翻转的例子） 21 1. 计算属性需要定义在vue实例的 computed 中 22 2. 多用于对变量做一些自定义的操作 23 3. 我们在页面上像使用普通data属性一样使用计算属性 24 2. 侦听器 25 多用于一些复杂的运算或者异步操作 26 侦听器需要放在 vue实例的 watch 中 27 4. class和style属性 28 1. 基于对象的绑定 29 2. 基于数组的绑定 30 5. 条件渲染 31 v-if 32 如果想控制多个标签的显示与否，可以使用 template 标签把它们包起来 33 v-if/v-else 34 v-if/v-else if /v-else 35 36 6. 列表渲染 37 v-for循环 38 7. 事件处理 39 详见2.模板语法 40 8. 表单绑定 41 详见2.模板语法 42 43 2. 小清单 44 1. 对象的深拷贝 45 2. 根据索引删除数组中的元素 46 splice(索引,删除个数,插入的元素) 47 48 2. 今日内容 49 1. 组件 50 0. 注意事项： 51 组件中的data属性必须设置成一个函数！！！ 52 1. 注册全局组件 53 Vue.component(组件名,{ 54 template: ``, 55 data: function(){ 56 return {} 57 }, 58 methods: {...} 59 }) 60 2. 注册局部组件（当前vue实例才能使用的组件） 61 new Vue({ 62 el: '#app', 63 components: { 64 alert: { 65 template: ``, 66 data: function(){ 67 return {} 68 }, 69 methods: {...} 70 } 71 } 72 }) 73 3. 组件间通信 74 1. 父组件 -传值-> 子组件 75 v-bind:变量='值' 76 注意事项： 77 子组件接收值需要在props里面声明 78 79 2. 子组件 -传值-> 父组件 80 触发自定义事件的方式，为了确保父组件的值不会被子组件直接修改 81 子组件触发事件： 82 this.$emit('事件名') 83 父组件监听事件： 84 v-on:事件名='处理的方法' 85 86 3. 组件间传值 87 明天补充 88 89 4. 插槽和带名字的插槽 90 引用子组件的时候，我可以传递一些额外的标签元素 91 92 93 2. 前端开发工具包 94 1. node.js 95 本质上还是JS，跑在V8引擎上的，让JS能够和操作系统进行交互 96 和Python\php类似的脚本语言 97 98 2. npm 99 类似于Python中的pip 100 101 帮助我们解决包和包之间版本的依赖关系 102 103 3. webpack 104 将后端开发的js代码打包成一个单独的js文件 105 106 1. 安装 107 npm install webpack -g 108 npm install webpack-cli -g 109 2. 打包JS 110 webpack b.js 111 112 113 4. vue-cli
