Vue.js备忘记录(一)

最新推荐文章于 2022-05-31 16:10:13 发布

finedayforu

最新推荐文章于 2022-05-31 16:10:13 发布

阅读量173

点赞数

本文链接：https://blog.csdn.net/finedayforu/article/details/104425247

版权

介绍 — Vue.js

vscode必装插件:vuetr

一. 概述

1.单页面应用程序 SPA

经典的多页面: 不同页面都是独立的页面(有利于搜索引擎,前后端融合)
现代式的单页面:不同网页其实是一个页面,只是在刷新区别内容 (只需要加载局部视图,用户体验好,不好兼容到低版本IE,所以诞生了一堆的开发框架,前后端分离,没有服务端渲染,服务端不再关心视图)

例如:https://music.163.com/ 不管页面怎么刷新,上面的导航条和下面的音乐播放条都不会刷新

2. 多页面的价值 //以服务端为主导,前后端混合

以服务端为主
有利于搜索引擎SEO

3.单页面的价值 //前后端分离

前后端分离,前后端通过接口交互,服务端不关心页面
不好兼容到低版本IE
没有服务端渲染
单页是肯定要使用框架的,比如 ract vue

4.前后端分离

项目立项

需求分析

服务端工作:

需求分析
设计数据库
接口设计(前端也参与)
数据处理及接口开发

前端工作

需求分析
页面搭建
页面功能制作
通过接口和服务器进行交互

5. vue简介

vue可以轻松构建SPA

通过指令扩展了HTML,通过表达式绑定数据到HTML

最大程度的解放DOM操作

vue特性:

MVVM
双向数据绑定
组件化
渐进式
Vue不支持IE8 及以下版本

二. vue的安装和hello world

1.安装

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

也可以指定版本(推荐生产环境这样用)

        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

还没有npm下载

        $ cnpm install vue --save

2. hello world

        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>{{ 1+2 }}</h1>
        <h1>{{ 'hello world'}}</h1>
        <h2>{{message}}</h2>
        <h2>{{lolo}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({  //实例化一个Vue
            el: '#app',  //赋值el,意思是这个Vue实例接管id=app的组件
            data: {//数据必须声明在data中
                //data中的数据不是一般的数据,而是响应式数据
                message: 'hello',
                lolo:''
            }
        })
        app.message = "haha"
    </script>
</body>

</html>

在此,我们可以先把vue看作一个模板引擎,
data中的数据不是一般的数据,而是响应式数据,
响应式数据是一种数据驱动视图的思想,MVVM
el不要作用在html或body节点上

三. vue基本语法

四. vue基本组件交互

表单输入绑定 — Vue.js

1. 双向数据绑定用v-model绑定

双向数据绑定,在表单中添加属性v-model=xxx即可

        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>{{message}}</h1>
        <input type="text" v-model='message'>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app'
        })
    </script>
</body>

</html>

2. 值绑定 v-bind:value

可以把组件的value绑定任意内容或对象.

当有v-bind:value时,组件的value失效

        <input type="checkbox" name="" v-bind:value="01" v-model=box1>
<option v-bind:value="{ number: 123 }">123</option>

3. 单选框用v-model绑定 ,同时 option里设置好value或者v-bind:value

用v-model绑定select ,同时 option里设置好value,

如果没有设置value则 value=选项文本内容

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

        new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

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

例子:计算器

        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="number" v-model=el1>
        <select name="" id="" v-model='opt' value='2'>
            <option value="0" v-on:>+</option>
            <option value="1">-</option>
            <option value="2">*</option>
            <option value="3">/</option>
        </select>
        <input type="number" v-model=el2>
        <button v-on:click="funcE">=</button>
        <span>{{answer}}</span>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                el1: 15,
                el2: 2,
                opt: '2',
                answer: 0
            },
            methods: {//方法的处理全方在这里~
                funcE() {
                    console.log(this.opt);

                    switch (this.opt) {
                        case '0':
                            this.answer = this.el1 + this.el2
                            break;
                        case '1':
                            this.answer = this.el1 - this.el2
                            break;
                        case '2':
                            this.answer = this.el1 * this.el2
                            break;
                        case '3':
                            if (this.el2 != 0)
                                this.answer = this.el1 / this.el2
                            else
                                alert('除数为0')
                            break;
                        default:
                            break;
                    }
                }
            }
        })
    </script>
</body>

</html>

4. 单选框用v-model绑定 ,同时 option里设置好value或者v-bind:value 数组接收

和上面基本一致,但是<select>里有了属性 multiple, 可能会选出多个,所以应该数组接收

        <div id="example-6">
  <select v-model="selected" multiple>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

数组接收

        new Vue({
  el: '#example-6',
  data: {
    selected: []
  }
})

5.单个check框用v-model

        <input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

例:

        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="checkbox" name="" id="" v-model=box1>
        <p>{{box1}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
               box1:true
            }
        })
    </script>
</body>

</html>

6.单个check框值绑定 //用v-model绑定,同时复选框里设置好true-value和false-value

        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="checkbox" v-model=box1 true-value="yes" false-value="no">
        <p>{{box1}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
               box1:"no"
            }
        })
    </script>
</body>

</html>

7. 多个check框 //用v-model绑定,同时每个复选框里设置好value或者v-bind:value,数组接收

        <div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

可能接收到多个数据,故用数组表示

        new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

8.单选按钮 //用v-model绑定,同时每个单选框里设置好value或者v-bind:value

        <div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>

        new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})

9.修饰符

(1) .lazy

在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加lazy修饰符，从而转变为使用change事件进行同步：

        <!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

(2) .number

如果想自动将用户的输入值转为数值类型，可以给v-model添加number修饰符：

        <input v-model.number="age" type="number">

(3) .trim

如果要自动过滤用户输入的首尾空白字符，可以给v-model添加trim修饰符：

        <input v-model.trim="msg">

五. 事件处理

可以用v-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

1.注册点击事件用v-on:click="clickfunc"

vue对象本身包含mothod属性 ,可以把方法声明在其中

注意:方法不能用箭头函数，剪头函数的this不指向vue 实例

但可以使用另一种ES6写法:

func1:function (){} 可以简写成 func1(){}

        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="number" v-model=count>
        <button v-on:click="clickfunc">点击+1</button>
        <!-- 用v-on绑定了一个事件,事件名字叫click -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data:{ 
                count:0
            },
            methods:{//方法的处理全方在这里~
                clickfunc:function () {
                    this.count++
                    //方法不能用箭头函数，剪头函数的this不指向vue 实例
                }
            }
        })

    </script>
</body>

</html>

2.(简单版)注册点击事件用v-on:click="count++"

如果函数执行简单可以直接内联写

三元表达式也可以写内联

        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="number" v-model=count>
        <button v-on:click="count++">点击+1</button>
        <!-- 用v-on绑定了一个事件,事件名字叫click -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data:{
                count:0
            }
        })
    </script>
</body>
</html>

3.修饰符

在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为v-on提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

.stop
.prevent //阻止默认事件
.capture
.self
.once
.passive

        <!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div> 

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

这个 .passive 修饰符尤其能够提升移动端的性能。
不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个
警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而v-on:click.self.prevent只会阻止对元素自身的点击。

4. 按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为v-on在监听键盘事件时添加按键修饰符：

        <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl
.alt
.shift
.meta
.exact

        <!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>