vue学习2

组件

 注册全局组件

 1 
 2 
 3 
 4     
 5     
 6 
 7 
 8 
 9 

10     

11     

12     
{
      {message}}
13     

14     
15     
for="">{
      {checked}}
16     

17     
18     
19 
20 

21 

22     
23     
24 
25 
26 
53 
54 

全局组件

注册局部组件

 1 
 2 
 3 
 4     
 5     
 6 
 7 
 8 
 9 

10     
11     
12 
13 
14 
38 
39 

局部组件

父子组件传值

 1 
 2 
 3 
 4     
 5     
 6 
 7 
 8 
 9 

10     for="item,index in jishilist " v-bind:name="item">
11 
12 
13 
40 
41 

父子组件传值

子父组件传值

 1 
 2 
 3 
 4     
 5     
 6 
 7 
 8 
 9 

10     
接客总数:{
      {total}}
11     

12     for="item,index in message" v-bind:name="item" v-on:jieke="ttt">
13 
14 
15 
49 
50 

子父组件传值

插槽和具名插槽

 1 
 2 
 3 
 4     
 5     
 6 
 7 
 8 
 9 

10     
接客总数:{
      {total}}
11     

12     for="item,index in message" v-bind:name="item" v-on:jieke="ttt">
13         
17         
21     
22 
23 
24 
62 
63 

插槽和具名插槽

今日学习总结

  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

学习总结

 

转载于:https://www.cnblogs.com/hexintong/p/10117170.html