Vue 2的学习

Vue 2的学习

Vue的概述

渐进式JavaScript框架

前端三大框架（React，Vue，Angular）

vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

简单，高效，生态丰富（插件多）

Vue的安装与使用

安装

1.直接引用

CDN

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

下载地址

   https://v2.cn.vuejs.org/v2/guide/installation.html

2.安装脚手架

npm install -g @vue/cli

使用

new Vue 函数创建一个新的应用实例

     new Vue({

        el:"#box",//指定vue的模板css选择器

        data:{msg:"你好"}// 指定data数据

    })

模板指定

box">

{{msg}}



完整代码




    Document


box">

{{msg}}



    //vue的cdn


Vue模板语法-文本渲染

模板语法介绍

指令是带有 v- 前缀的特殊 attribute。指令的属性值预期是单个 JavaScript 表达式

文本渲染-{{}}

{{ }} 语法

{{msg}}

new Vue({

        el:"#box",//指定vue的模板css选择器

        data:{msg:"你好"}// 指定data数据

    })

{{ }} 中的表达式

对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ 1+1 }}//2

{{2+3>8?'大于':'小于'}}//小于

{{ msg.split('').reverse().join('') }}//好你

// 01渲染Vue的数据
// 02数学运算
// 03执行js的普通方法split分割, reverse反转数组
// join连接数组
// 04三元运算(不能使用if, for等多行命令)

v-text指令

指令是带有 v- 前缀的特殊属性。

{{msg}}
//你好

new Vue({

        el:"#box",//指定vue的模板css选择器

        data:{msg:"你好"}// 指定data数据

    })

v-html指令

输出真正的html

{{msg}}
//中国，你好

new Vue({

        el:"#box",//指定vue的模板css选择器

        data:{msg:"你好"}// 指定data数据

    })

Vue模板语法-属性渲染

指令参数

指令是带有 v- 前缀的特殊 attribute。指令属性值预期是单个 JavaScript 表达式

一些指令能够接收一个“参数"，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

属性渲染

v-bind指令给html标签动态的绑定属性

v-bind:title="str">这是一个title

属性渲染简写

v-bind可以简写为：

:title="str">这是一个title

条件渲染

v-if    v-else-if    v-else


v-if="score>90">就把潘金莲送给你了


v-else-if="score>80">武大郎


v-else-if="score>70">武松


v-else>逐出师门

       v-model="score"/>

new Vue({
            el: "#box",//指定vue的模板css选择器
            data: {
                score:91,//指定data数据
            },
        })

// v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定

v-show

            v-if="flag">v-if

           v-show="flag">v-show

        new Vue({
                       el:'#box',
                       data:{
                           flag:false,
                          }
                  })



列表渲染

v-for


       v-for="item in 10">{{item}}


       v-for="item in obj">{{item}}


v-for="(item,index) in obj">{{index}}:{{item}}
//item当前向 index索引


v-for="item in str" :key="item">{{item}}

new Vue({
           el: '#box',
           data: {
               str: '学好前端',
               obj: {
                   tel: 18239607956,
                   qq: 2523925028,
                   wx: 123456789,
                   name: 'baize'
               }
           }
       })



事件

监听事件

我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。

<h1>{{counter}}h1>

<button @click="counter++">{{counter}}button>

<button v-on:click="counter--">{{counter}}button>

new Vue({

          data() {

                    return { counter: 1   }

                  }

})

许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

        new Vue({
               el: '#box',
               data(){
                   return{
                       num:1
                   }
               },
               methods:{
                   // sayNum:function(){
                       sayNum(n){// 简写:
                       this.num+=n;// (n)形式参数（形参）
                       alert(this.num);
                   }
               }
           })

            //this指向new Vue创建的实例
           // vue data 采用函数返回形式
           //vue 实例直接数据隔离相互不影响

事件的特殊参数（$event ）

box">


           sayNum($event,1)">事件特殊参数






事件修饰符

概括

.stop 阻止事件冒泡

.prevent 阻止默认事件

.capture 捕获

.self 自身元素触发

.once 执行一次

.passive 滚动立即触发，不等待滚动完成（移动端性能提升）

实例：

box">

表白



@click="doHd">



               @click.prevent.stop="doit">百度







复选框checkbox 单选框radio 选择框 select



//checkbox

单个checkbox

           checkbox" v-model="select">{{select}}

多个checkbox


{{fav}}

           checkbox" value="唱歌" name="fav" v-model="fav" />唱歌

           checkbox" value="跳舞" name="fav" v-model="fav" />跳舞

           checkbox" value="看书" name="fav" v-model="fav" />看书

           checkbox" value="游泳" name="fav" v-model="fav" />游泳

//radio

radio-{{sex}}
性别:
           radio" name="sex" v-model="sex" value="1">男
           radio" name="sex" v-model="sex" value="2">女
           radio" name="sex" v-model="sex" value="3">保密

//select

select -{{sel}}


小张的文凭








表单修饰符

.lazy

你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步

           v-model.lazy="str">

{{str}}



new Vue({
               el: '#box',
               data() {
                   return {
                       num: 1,
                       str: '国庆快乐'
                   }
               }

           })

.number

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

            v-model.number="num">

{{10+num}}

        new Vue({
               el: '#box',
               data() {
                   return {
                       num: 1,
                       str: '国庆快乐'
                   }
               }

           })

.trim
过滤首尾空白

           v-model.trim="msg" />

        new Vue({
               el: '#box',
               data() {
                   return {
                       num: 1,
                        msg: '   国庆快乐   '
                   }
               }

           })

计算 computed

对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性

（从现有数据计算出新的数据）

实例


id="box">
           v-model.number="n1">
           v-model.number="n2">

{{n3}}


{{str}}

           v-model="str">

{{rstr}}



new Vue({
               el: '#box',
               computed: {
                   //从现有的n1与n2计算出n3
                   "n3": function() {
                       return this.n1 + this.n2;
                   },
                   //从现有的str计算出rstr
                   rstr() {
                       return this.str.split("").reverse().join('');
                   }
               },
               data() {
                   return {
                       n1: 1,
                       n2: 2,
                       str: "明天开始放假"
                   }
               }
           })

watch监听

       虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

1.

id="box">

watch监听







2.引用数据类型需要添加处理器handler与deep




watch监听

           obj.pre">

           obj.next">
           =
           {{obj.result}}





Class 与Style

class的绑定

操作元素的 class 列表和内联样式因为它们都是 attribute
Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。







:class="classList">这是行测试文本




           type="color" v-model="color" />
           type="range" min="1" max="200" v-model="height" />


           :style="{'fontSize':'48px','backgroundColor':color,'lineHeight':height+'px'}">样式的绑定





组件和动画

组件components（重点）

this的指向：vue实例本身的属性和方法,那么this指向就是vue实例本身,比如methods对象,computed对象,watch对象里的方法

全局组件

它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中

Vue.component 来创建组件：

Vue.component("btn",{

template:``,

data(){return {n:1}}

})

使用：

app">

<btn>btn>

局部组件（常用，重点）

(全局注册是不够理想的。它会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。)

1.定义组件

var step = {

template:`

                        {{n}}


`,

data(){return {n:1}}

}

2.注册组件

new Vue({

el:"#app",

components:{step}

})

3.使用组件

app ">

                <step>

                  <step>



props传递参数（父组件向子组件传参数（父传子））

通常你希望每个 prop 都有指定的值类型，比如

(String 、 Number 、 Boolean 、 Array 、 Object 、 Date 、 Function 、 Symbol )

1.传递

:num="10">

:num="5">

2.接收

props:{

    "num":{type:Number,default:1}

},

3.使用

data(){return {

                n:this.num

        }}

对象与数组的默认值必须是函数的返回值

自定义事件（v-model）

自定义的组件(2.2.0+ 新增)

v-model 双向绑定原理

本质是一中语法糖写法。它负责监听用户的输入事件以更新数据

input 中type="text”中的原理

绑定一个value属性和一个input事件

v-model = :value + @input

.sync修饰符

.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。

一般情况下父子组件之间传参通过props（父组件传子组件）$emit(子组件传父组件)

这里可以使用.sync（本质语法糖）简化代码

插槽

       和 HTML 元素一样，我们经常需要向一个组件传递内容，我们使用作为我们想要插入内容的占位符

父组件：

<step>

     这是嵌套内容

</step>

子组件：

var step={

template:`


组件的标题

                        <slot>slot>


`}

运行结果：

组件的标题

这是嵌套内容

具名插槽

父组件：

          <template v-slot:pre>

                  ￥



          <template v-slot:next>

                 元



子组件：

const step = {

template:`

        pre">

        100

        next">
`,

}

运行结果：￥100元

作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的。

当一个组件被用来渲染一个项目数组时，这是一个常见的情况，我们希望能够自定义每个项目的渲染方式。

父组件：

             v-slot:default="scope">

                <i class="fas fa-check">{{scope.index}}i>

                {{ scope.item }}



子组件：

const step = {

    template: `<ul>
:item="item" :index="index">

data() { return {

list: ["vue", 'react', 'angular']}

}}

运行结果：

0 vue
1 react
2 angular

动画

Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。

组件进入和离开 DOM 的钩子使用内置的组件

transition>

new Vue({

el: '#app',

data() { return { flag: true } }

})

动画-过渡

在进入/离开的过渡中，会有 6 个 class 切换。

v-enter-active 进入开始 v-enter-to 进入结束 v-enter-active进入整个状态
v-leave-active 离开开始 v-leave-to 离开结束 v-leave-active离开整个状态

动画-关键帧

@keyframes fadeIn{

from{opacity: 0;}

to{ opacity: 1;}

}

@keyframes fadeOut {

0%{ opacity: 1;}

100%{ opacity: 0;}

}

.fade-enter-active{ animation: fadeIn ease 1s;}

.fade-leave-active{ animation: fadeOut ease 1s;}

动画-引入

直接引入插件

animate动画库：https://www.jq22.com/yanshi819

./css/animate.css">

name="fade" enter-active-class="animated slideInDown" leave-active-class="slideOutDown animated">

Vue的概述

Vue的安装与使用

安装

使用

{{msg}}

{{msg}}

Vue模板语法-文本渲染

模板语法介绍

文本渲染-{{}}

{{msg}}

{{ }} 中的表达式

v-text指令

{{msg}}

v-html指令

{{msg}}

Vue模板语法-属性渲染

属性渲染

v-bind:title="str">这是一个title

属性渲染简写

:title="str">这是一个title

条件渲染

v-if v-else-if v-else

v-show

列表渲染

v-for

事件

监听事件

事件的特殊参数（$event ）

事件修饰符

表白

复选框checkbox 单选框radio 选择框 select

单个checkbox

多个checkbox

radio-{{sex}}

select -{{sel}}

表单修饰符

计算 computed

watch监听

watch监听

watch监听

Class 与Style

class的绑定

组件和动画

组件components（重点）

全局组件

局部组件（常用，重点）

props传递参数（父组件向子组件传参数（父传子））

自定义事件（v-model）

.sync修饰符

插槽

组件的标题

组件的标题

具名插槽

作用域插槽

动画

动画-过渡

动画-关键帧

动画-引入