Master_hl

Vue 的基础知识 - 判断, 循环, 事件, 通信

1. 了解 Vue 七大常用属性

2. 文本插值

2.1 v-bind 绑定元素

3. 判断

4. 循环

5. 事件

6. 双向绑定

7. 自定义组件

8. Axios 异步通信

8.1 什么是Axios

8.2 为什么要使用 Axios

8.3 Axios 的简单应用

8.4 Vue 的生命周期

1. 了解 Vue 七大常用属性

1. el 属性 : 用来指示vue编译器从什么地方开始解析 vue的语法, 可以说是一个占位符.

2. data 属性 : 用来组织从view中抽象出来的属性, 可以说将视图的数据抽象出来存放在data中.

3. template属性 : 用来设置模板, 会替换页面元素.

4.methods属性 : 放置页面中的业务逻辑, js方法一般都放置在methods中, 用来写方法.

5. render属性 : 创建真正的Virtual Dom.

6. computed属性 : 根据已经存在的属性计算出新的属性，对于同样的数据，会缓存。当其依赖属性的值发生变化是，这个属性的值会自动更新，与之相关的DOM部份也会同步自动更新.

7. watch侦听属性 : watch:function(new,old){} 监听data中数据的变化.

2. 文本插值

语法： {{msg}}

文本插值是最基本的数据绑定形式. 双大括号标签会被替换为相应组件中的 msg 属性的值. 同时每次 msg 属性更改时它也会同步更新.


    {{msg}}

2.1 v-bind 绑定元素

除了 {{}} 可以绑定元素外, 还可以使用 v-bind 来绑定元素.



    鼠标悬停过来几秒钟

v-bind 还可以缩写成 :

3. 判断

打开开发者工具,修改 vm 对象中 type 属性的值, 感受条件判断的用法.


    A
    B
    C

4. 循环

打开开发者工具, 给数组添加数据, 感受循环的用法. 此处的 v-for 指令和我们学过的 foreach 循环很像.


    
        {{item.msg}}

v-for 还能获取元素的下标 :


    
        {{item.msg}}--{{index}}

5. 事件

使用 v-on 指令绑定事件.

原先我们是通过 οnclick="function" 这样绑定一个事件, 但是在 Vue 中, 方法是必须定义在 Vue 的 Methods 对象中, onclic 是绑定不到的, 所以需要使用到 v-on 来绑定.

v-on 可以缩写为 @, 对于上述例子可以缩写为如下形式 :

6. 双向绑定

什么是双向绑定 ?

上一篇博客已经详细讲解了 MVVM 思想, 即当数据发生变化的时候, 视图也就发生了变化, 当视图发生变化的时候, 数据也会跟着同步变化, 这个就是 Vue.js 的精髓之处.

在表单中使用双向数据绑定>>>

我们可以用 v-model 指令在表单 , , {{msg}}

【单选框】


    性别 :
     男
     女

    
        选中了: {{checked}}

【下拉框】


    
    value: {{selected}}

【注意】如果 v-model 表达式的初始值未能匹配任何选项,