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