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

Master_hl

已于 2023-06-09 16:17:54 修改

阅读量862

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2023-06-09 10:35:49 首次发布

本文链接：https://blog.csdn.net/xaiobit_hl/article/details/131091639

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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 属性更改时它也会同步更新.

<div id="app">
    {{msg}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">
</script>

<script>
    var vm = new Vue({
        el: "#app",
        data:{
            msg: "hello Vue"
        }
    });
</script>

2.1 v-bind 绑定元素

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

<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<div id="app">
    <span v-bind:title="msg">鼠标悬停过来几秒钟</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">
</script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "can not see me"
        }
    });
</script>

v-bind 还可以缩写成 :

<span :title="msg"></span>

3. 判断

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

<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else>C</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">
</script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            type: 'A'
        }
    });
</script>

4. 循环

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

<div id="app">
    <li v-for="item in items">
        {{item.msg}}
    </li>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">
</script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            items: [
                {msg: 'hello java'},
                {msg: 'hello Linux'},
                {msg: 'hello vue'}
            ]
        }
    });
</script>

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

<div id="app">
    <li v-for="(item,index) in items">
        {{item.msg}}--{{index}}
    </li>
</div>

5. 事件

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

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

<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<div id="app">
    <button v-on:click="sayHi">点我试试</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">
</script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "hello, vue"
        },
        methods: { // 方法必须定义在 Vue 的 Method 对象中
            sayHi: function() {
                alert(this.message);
            }
        }
    });
</script>

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

<button @click="sayHi">点我试试</button>

6. 双向绑定

什么是双向绑定 ?

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

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

我们可以用 v-model 指令在表单 <input>, <radio>, <select> 等元素上创建双向数据绑定. 他会根据控制件类型自动选取正确的方法来更新元素. 他负责监听用户的输入事件以更新数据, 并对一些极端场景进行一些特殊处理.

注意 :

v-model 会忽略所有表单元素的 value, checked, selected 特征的初始值而总是将 Vue 的实例的数据作为数据来源. 我们应该通过 JavaScript 在组件的 data 选项中声明初始值!

【文本框】

<div id="app">
    <!--  绑定 msg，View 控制 Model 改变 -->
    输入的文本：<input type="text" v-model="msg"> {{msg}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">
</script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "123"
        }
    });
</script>

【单选框】

<div id="app">
    性别 :
    <input type="radio" name="sex" value="男" v-model="checked"> 男
    <input type="radio" name="sex" value="女" v-model="checked"> 女

    <p>
        选中了: {{checked}}
    </p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">
</script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            checked: ''
        }
    });
</script>

【下拉框】

<div id="app">
    <select v-model="selected">
        <option value="" disabled>--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>value: {{selected}}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">
</script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            selected: ''
        }
    });
</script>

【注意】如果 v-model 表达式的初始值未能匹配任何选项, <select> 元素将被渲染为 "未选中" 状态. 在 IOS 中, 这会使用户无法选择第一个选项. 因为这样的情况下, IOS 不会触发 change 事件. 因此, 更推荐像上面这样提供一个值为空的禁用选项.

7. 自定义组件

Vue 自定义组件的简单应用 :

<div id="app">
    <my-component v-for="item in items" v-bind:cpt="item"></my-component>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">
</script>
<script>
    // 定义一个 Vue 组件 component
    Vue.component("my-component",{
        props: ["cpt"], // 传递参数
        template: '<li>{{cpt}}</li>' // 组件模板
    });
    var vm = new Vue({
        el: "#app",
        data: {
            items: ["Java","Linux","Vue"]
        }
    });
</script>

Vue.component() : 注册组件
my-component : 自定义组件的名字
template : 组件的模板

【注意】使用 props 属性传递参数

上述代码中, 通过循环遍历 data 中 items 的数据时, 无法直接被自定义组件中的模板拿到, 于是要使用 v-bind:指令来绑定每一个元素, 而且需要通过 props 属性来传递参数, 否则 template 模板拿不到每一个 item 元素.

8. Axios 异步通信

8.1 什么是Axios

Axios 是一个开源可以用在浏览器端和 NodeJS 的异步通信框架, 它的主要作用就是实现 AJAX 异步通信, 其功能特点如下 : (官网)

从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API [JS 中链式编程]
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御 XSRF

8.2 为什么要使用 Axios

因为 Vue.js 是一个视图框架, 并且严格遵守 SoC (关注度分离原则), 所以 Vue.js 并不包含 AJAX 的通信功能, 为了解决通信问题, 作者单独开发了一个名为 vue-resource 的插件, 不过在进入 2.0 版本后停止了对该插件的维护并推荐了 Axios 框架. 少用 jQuery, 因为它操作 DOM 太频繁 !

8.3 Axios 的简单应用

由于开发的接口大部分都是采用 JSON 格式, 可以先在项目里模拟一段 JSON 数据, 创建一个名为 data.json 的文件并填入以下内容 :

{
  "name": "花果山水帘洞",
  "url": "https://www.baidu.com/",
  "address": {
    "street": "新安街道",
    "city": "广东深圳",
    "country": "中国"
  },
  "links": [
    {
      "name": "B站",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": "4399",
      "url": "https://www.4399.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

引入 Axios ：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
    <div>{{result.name}}</div>
    <div>{{result.address.street}}</div>
    <a v-bind:href="result.url">点我</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        // data 方法
        data() {
            return{
                // 请求返回的参数, 必须和 Json 字符串一样
                result: {
                    name: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    },
                    url: null
                }
            }
        },
        mounted() {
            // 钩子函数, 链式编程, (JavaScript ES6 新特新)
            axios.get('../data.json').then(response=>(this.result=response.data));
        }
    });
</script>

说明：

1. 使用了 v-bind 将 a.herf 的属性值与 Vue 实例中的数据进行绑定.

2. 使用 axios 框架的 get (post) 方法请求 Ajax 并自动将数据封装进了.

3. data 中的数据结构必须要和 Ajax 响应回来的数据格式匹配.

4. 使用箭头函数, 需要将 IDEA 中 JavaScript 改为 ES6 新特性.

当浏览器访问页面的时候, 实际上是存在一个闪烁问题, 它会先加载模板, 再渲染数据, 只是这个过程网速太快, 唰的一下就渲染出数据了, 所以看不太出来, 这需要结合 Vue 的生命周期来理解.

解决 Vue 闪烁问题 :

<style>
    [v-clock]{
        display: none
    }
</style>

<div id="app" v-clock>
    <div>{{result.name}}</div>
    <div>{{result.address.street}}</div>
    <a v-bind:href="result.url">点我</a>
</div>

理解上述 Axios 中 mounted 钩子函数就要联系到 Vue 的生命周期了 >>

8.4 Vue 的生命周期

Vue 实例有一个完整的生命周期, 也就是从开始创建, 初始化数据, 编译模板, 挂载 DOM, 渲染 -> 更新 -> 渲染, 卸载等一系列过程, 我们称之为 Vue 的生命周期. 通俗说就是 Vue 实例从创建到销毁的过程, 就是生命周期.

在 Vue 的整个生命周期中, 它提供一系列的事件, 可以让我们在事件触发时注册 JS 方法, 可以让我们用自己注册的 JS 方法控制整个大局. 在这些事件响应方法中的 this 直接指向的是 Vue 的实例.

上述 Vue 的生命周期看起来相当复杂难理解, 如果想要理解透彻, 可以看这位哥们的文章.

理解上述 Axios 的应用主要是理解以下模块 :

mounted 钩子所做的事情其实就类似于 jQuery 的前端发送 Ajax 请求给后端, 然后再通过 data() 中的 return 实时监听并更新 DOM. return 中的参数只需要保持和 Json 字符串一样即可 (data.json 中的数据可全部写在 return 中, 也可以写一部分, 但格式要保持 json 格式)

而 jQuery.ajax 来向后端请求数据的话, 请求到的数据还需要频繁操作 DOM 树进行添加, 这样对比起来, 操作简单了很多.

本文通过B站狂神的视频所学, 感兴趣的可以找狂神说的视频进行学习, 他的视频很有学习的价值, 感谢狂神~