1.jpg
上面就是vue的简单代码。
1.插值表达式：{{ }}
2.jpg
3.jpg
2.双向数据绑定：v-model
首先在输入框里面利用v-model绑定value，然后span里面利用插值表达式把这个value显示在页面
4.jpg
然后在data数据里面定义字段value ，
5.jpg
然后试着在输入框输入数据，你会发现你没输入一个字，那个字就会显示出来
6.jpg
v-model修饰符
20.jpg
3.控制显示和隐藏：v-if , v-show
控制元素的显示或者隐藏， 可以使用v-if 或者 v-show 。 这两个是区别：v-if 是彻底从dom树上删除， v-show是存在dom树上，只是看不到了而已
7.jpg
4.循环指令：v-for
8.jpg
9.jpg
10.jpg
5.动态绑定数据：v-bind
11.jpg
12.jpg
6.事件绑定 ： v-on
注册点击事件，@click ， 然后出发一个函数
13.jpg
在methods里面执行这个函数打印数据里的url
14.jpg
获取事件对象 是给函数传入一个事件对象，$event
16.jpg
15.jpg
也可以通过修饰符，禁止浏览器的默认行为 .prevent
17.jpg
事件修饰符
18.jpg
键盘事件修饰符
19.jpg
7.注册全局组件
21.jpg
然后在html中使用你定义的组件名字作为标签，这样就成功啦
22.jpg
8.注册局部组件
23.jpg
使用方法跟全局一样
24.jpg
9.父组件传值给子组件， 通过Props
1.首先在父组件使用子组件，通过子组件的名字写成标签即可，其实就是自定义标签，名字随便取，然后在这个标签上动态绑定一个属性，这个属性的名字要和子组件props接收的值得名字是一样的，然后把父组件要传递的数据传过去
2.然后创建子组件
25.jpg
26.jpg
10.子组件传值给父组件，使用 $emit() 传递
28.jpg
27.jpg
11.兄弟组件之间的传值，使用事件总线 eventBus来实现
32.jpg
29.jpg
30.jpg
31.jpg
12.过滤器的使用： filter
33.jpg
34.jpg
13.自定义指令的使用：directive
35.jpg
36.jpg
自定义指令的传参和修饰符
37.jpg
14.公共的数据 ： mixins
40.jpg
38.jpg
39.jpg
15.插槽的使用：slot
41.jpg
网友评论