Day31：vue入门1.vue简介概念一套用于构建用户界面的渐进式框架框架提供了一整套完整的开发解决方案好处

1.vue简介

概念

一套用于构建用户界面的渐进式框架

框架

提供了一整套完整的开发解决方案

好处：提高开发效率

坏处：必须按照规则开发

渐进式

逐步增强的应用功能

开发者可以在不影响应用性能的情况下，逐步添加新的功能和特性

核心功能

基础功能：页面渲染，表单提交处理，管理DOM节点
组件化开发：增强代码复用能力，使复杂系统的代码维护更加简单
前端路由：改变url，但是页面不进行整体刷新，使用户体验更加流畅
前端工程化：使用软件工程的方法来解决前端开发流程中的模块化、组件化、规范化、自动化的问题

核心

数据驱动（响应式数据）

视图内容随着数据的改变而改变

组件化

将实现页面某一部分的结构、样式和逻辑，封装成一个整体，增加代码的复用性和可维护性

学习线路

vue.js

vue核心语法，用来构建web应用的视图

vueComponent

组件化，增加代码的复用性和可维护性

vue-cli

vue的脚手架，用来构建大型的前端项目

基于webpack来构建

vueRouter

vue官方路由器，实现单元应用的页面跳转

VueX

vue官方状态管理工具，实现复杂应用的数据管理

2.vue入门

起步

步骤

引入
实例化vue对象

1. 使用el属性，设置vue接管的区域(将要操作的视图用div包裹起来)
2. 使用data属性，定义变量，这些变量的值将来会被显示到页面上(声明一个count变量，替换h1里的值)
3. 在被接管的区域中，使用插值表达式{{}}，动态获取vue中定义的变量的值
4. 使用method属性，定义方法，这些方法将来会被调用

<div id="app">
    <h1>{{count}}</h1> 
    <button @click="fn">点我+1</button> <!-- @click是vue的v-on：click的简写形式 -->
</div>
<script>
new Vue({
    el: '#app', // 设置vue接管的区域
    data: { /* 定义变量，替换页面中的数据展示 */
        count: 0
    },
    methods: {
        fn() {
            this.count++ // 一定要加上this，代表获取data中的变量
        }
    }
})

区别

原生js操作（命令式）

首先要获取dom对象，再对dom对象进行值的修改等操作

vue操作（声明式）

首先把要操作的数据和要调用的方法，在vue对象的属性中进行声明

然后跟视图进行绑定，vue就会自动更新dom

优点：vue只需要关注视图数据，忽略dom操作，提高开发效率

七大常见属性

el属性

用于指示vue编译器从什么地方开始解析vue语法（设置vue的接管区域）

data数据属性

用于存放变量（将视图中的数据抽象出来放在这里）

methods方法属性

用于存放方法（页面中的业务逻辑方法、自定义方法都放在这里

computed计算属性

用于存放定义计算属性的方法，必须要将数据return出去

watch监听属性

用于监听data属性中数据的变化，有两个参数，一个返回新值，一个返回旧值

components组件属性

用于定义该组件的子组件

props传值属性

用于接收父控件传递的数据

七大常见指令

v-if

用于根据条件渲染或者不渲染某个元素

v-else

作用同上，必须跟在v-if指令后，否则无作用

v-show

用于根据条件显示或者是隐藏某个元素

v-on

用于绑定事件，简写为@

v-bind

用于动态绑定html的属性简写为：

v-model

用于表单元素的双向数据绑定

v-for

用于遍历数组或者对象，渲染多个元素

八个生命周期方法

创建

beforeCreate()

create()

beforeMount()

mounted()

更新

beforeUpdate()

updated()

销毁

beforeDestory()

destoryed()

3.模板语法

概念

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

分类

插值语法

功能：用于指定标签体的内容

写法：{{xxx}} xxx就是js表达式，且可以直接读取到data中的所有属性

<div id="app">
    <h1>{{count%2 == 0 ? '偶数' : '奇数'}}</h1> <!-- 可以书写表达式 -->
    <button @click="fn">点我+1</button> 
</div>

插值表达式也可以是三元表达式

指令语法

功能：用于绑定数据到标签上（动态替换标签属性值、标签体内容、动态绑定事件）

举例：v-on:click 就是给标签绑定了点击事件，简写为@click

插值表达式

作用

用于指定标签体的内容

格式

<标签>{{xxx}}}</标签>

注意点

xxx可以写data中定义的属性，可以对data中定义的属性进行表达式运算

xxx不可以写声明变量（var、const，let）、分支（if-else）、循环（for）、访问data之外定义的变量

v-on

作用

给标签绑定事件

语法

<标签 v-on: 事件名='要执行的少量代码'>

<标签 v-on: 事件名='method中的方法'>

<标签 v-on: 事件名='method中的方法（实参）'>

注意

v-on可以简写成@ ，@事件名='method中的方法'

如果方法fn（）没有自定义参数，不需要使用$event传递事件对象

默认会传递事件对象，只需要在fn中使用e接收即可，当然也可以通过$event来传递事件对象

如果方法fn（）有自定义参数，必须使用$event来传递事件对象，才能在方法中拿到事件对象使用

如果想在事件函数中使用事件对象，必须要在绑定的方法中使用$event来传递事件对象

v-bind

作用

动态绑定标签上属性的值

语法

<标签 v-bind:属性名='vue变量'>

简写方式，不能省略冒号 <标签 :属性名='vue变量'>

v-bind 动态绑定元素属性的步骤

1.先在data属性中声明变量 url(a标签跳转到链接时变化的,将变化的变成一个变量)

2.将href 中的属性值替换成url这个变量

3.使用模板语法 v-bind:，告诉href，url 是一个vue中的变量，他就可以动态读取url中的值

注意

标签的属性值不能使用插值表达式，插值表达式只能使用在标签体里。

<img :src="flag ? './img/off.gif' : './img/on.gif'" alt="" id="app" @click="fn()">
<script>
    new Vue({
        el: '#app', 
        data: {
            flag:false
        },
        methods: {
            fn() {
                // 切换flag
                this.flag = !this.flag
            }
        }
    })
</script>

v-model

作用

实现数据的双向绑定，一般用在表单元素上

语法

<表单标签 v-model:'vue变量'>

<div id="app">
    <input type="text" v-model:value="name">
    <div>{{name}}</div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            name:'z33'
        }
    })

双向数据绑定

视图中input的值的变化，能让vue中定义的变量发生变化

同时vue中变量发生变化，视图中的input值也会变

注意点

因为v-model只能用于表单元素，属性名value、checked等可以省略，直接写成v-model即可

v-model不能和表单的value、checked、selected等共同使用，会忽略这些属性的初始值

<div id="app">
    书名：<input type="text" id="bookname"   v-model="bookname"><br />
    作者：<input type="text" id="bookauthor" v-model="bookauthor"><br />
    价格：<input type="text" id="bookprice"  v-model="bookprice"><br />
    折扣：<input type="text" id="booksale"   v-model="booksale"><br />
    <input type="button" id="totalBtn" value="计算折扣价"  @click="fn()">
</div>
<script>
    new Vue({
        el: '#app', 
        data: {
            bookname  :'',
            bookauthor:'',
            bookprice :'',
            booksale  :''
        },
        methods: {
            fn() {
                alert(`这本书名为<<${this.bookname}>>,${this.bookauthor}编著的书，
                折扣为:${this.booksale}折，
                折扣后价格为:${this.bookprice * this.booksale}`)
            }
        }
    })

v-if/v-show

作用

控制标签的可见和不可见

语法

<标签 v-if='vue变量'>

<标签 v-show='vue变量'>

如果vue变量的值为true则可见，为false则不可见

<div id="app">
    <button @click="fn()">按钮</button>
    <h1 v-if="show">xzd</h1>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            show:true
        },
        methods: {
            fn() {
                /* if (this.show == false) {
                    this.show = true
                } else {
                    this.show = false
                } */
                /* this.show = !this.show */
                this.show = this.show ? false : true
            }
        }
    })

区别

v-if

控制dom元素是否渲染/添加到页面，直接从dom树移除

v-show

控制dom元素的display属性是否为none

使用场景

v-if有更高的切换开销，v-show有更高的初始渲染开销

如果需要频繁切换，使用v-show；如果在运行时条件很少改变，则使用v-if

v-for

作用

用于循环渲染

语法

<标签 v-for='(值、索引、属性名) in 容器' :key='唯一值'>

注意

容器可以是数组或对象

<div id="app">
    <ul>
      <li v-for="item in list">{{item}}</li>
      <li v-for="item,index in list">{{item}}---{{index}}</li>
    </ul>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            list:['eat','sleep','hit']
        }
    })

遍历数组的参数和索引——"item,index in list"中第二个参数代表索引

<div id="app">
    <ul>
        <li v-for="value in obj">{{value}}</li>
        <li v-for="value,key in obj">{{value}}---{{key}}</li>
        <li v-for="value,key,index in obj">{{value}}---{{key}}---{{index}}</li>
    </ul>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            obj:{
                name:'zc',
                age:23,
                gender:'male'
            }
        }
    })

遍历对象是按照属性值，属性名,索引的顺序