Vue基础

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

使用方法跟全局一样

但是一定是要在#app1里面使用

24.jpg

9.父组件传值给子组件， 通过Props
1.首先在父组件使用子组件，通过子组件的名字写成标签即可，其实就是自定义标签，名字随便取，然后在这个标签上动态绑定一个属性，这个属性的名字要和子组件props接收的值得名字是一样的，然后把父组件要传递的数据传过去
2.然后创建子组件

3.然后在子组件内部使用props接收父组件传递的值，注意：这里定义的值得名字，必须和父组件传过来的值得名字是一样的

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