Vue-2

（一）vue简介

　　　　Vue是一套用于构建用户界面的前端框架

构建用户界面

- 用vue往html页面中填充数据非常方便

框架

- 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能
- 要学习vue，就是在学习vue框架中规定的用法
- vue的指令、组件（是对UI结构的复用）、路由、Vuex

特性

- 数据驱动视图：数据的变化会驱动视图的更新，单向的数据绑定

　　　　　　在使用了Vue的界面，vue会监听数据的变化，从而自动重新渲染页面的结构

- 双向数据绑定

　　　　　　在网页中，form表单负责采集数据，ajax负责提交数据

　　　　　　js数据的变化会被自动渲染到页面上，页面上表单采集的数据发生变化的时候，会被Vue自动获取。并更新到js数据中

MVVM

- MVVM是Vue实现数据驱动视图和双向数据绑定的核心原理，MVVM指的是Model、View和ViewModel
  - Model：表示当前页面渲染时所依赖的数据源
  - View：表示当前页面所渲染的DOM结构
  - ViewModel：表示Vue的实例，它是MVVM的核心，是它把数据源和页面的结构连接在一起

（二）Vue的基本使用

基本使用步骤

导入vue.js的script脚本文件
在页面中声明一个将要被vue所控制的DOM区域
创建vm实例对象

Vue的指令与过滤器：在vue提供的模板渲染中，除了支持绑定简单的数据值之外，还支持JavaScript表达式的运算
- 指令是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本语法
- 内容渲染指令：用来辅助开发者渲染DOM元素的文本内容
  - v-text：会覆盖元素内部的所有内容

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title>
    head>
    <body>
        
        <div class="app">
            <p  v-text="username">p>
            <p v-text="gender">性别p>
        div>
        
        
        <script src="./js/v2.6.10/vue.js">script>
        <script>
            const vm = new Vue({
                el: '.app',
                data: {
                    username: 'baekhyun',
                    gender: 'man'
                }
            })
        script>
    body>
html>

- - {{}}：插值表达式：Mustache，在实际开发中用的最多，知识内容的占位符，不会覆盖原有的内容，不能用在属性节点，只能用在内容节点中
    - 在vue提供的模板渲染语法，除了支持绑定简单的数值之外，还支持javascript表达式的运算

姓名:{{username}}
性别:{{gender}}
{{number+1}}
{{ok?'YES':'NO'}}
const vm = new Vue({
    el: '.app',
    data: {
        username: 'BH',
        gender: 'man',
        number: 1,
        ok: true
    }
})

- - v-html：可以把带有标签的字符串渲染成真正的html内容

<p v-html="info">哈哈哈p>
<script>
            const vm = new Vue({
                el: '.app',
                data: {
                    username: 'baekhyun',
                    gender: 'man',
                    info: '今天是个好日子'
                }
            })
script>

- 属性绑定指令：如果要为元素的属性动态绑定属性值，则需要用到v-bind属性绑定指令
  - 在使用v-bind属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title>
    head>
    <body>
        <div class="app">
            <p>count的值是:{{count}}p>
            
            
            
            <button v-on:click="'add'+index">+1button>
        div>
        <script src="./js/v2.6.10/vue.js">script>
        <script>
            const vm = new Vue({
                el: '.app',
                data: {
                    count: 0,
　　　　　　　　　　　　index: 1　　　　　　　　　　　　
                },
                //定义事件处理函数
                methods:{
                    add(e){
                        console.log(e.target);
                        vm.count+=1;
                    }
                }
            })
        script>
    body>
html>

- 事件绑定指令

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title>
    head>
    <body>
        <div class="app">
            
            <p>count的值是:{{count}}p>
            
            
            
            <button @click="add($event,1)">+1button>
            <button v-on:click="sub">-1button>
        div>
        <script src="./js/v2.6.10/vue.js">script>
        <script>
            const vm = new Vue({
                el: '.app',
                data: {
                    count: 0
                },
                //定义事件处理函数
                methods:{
                    add(e,n){
                        // vm.count+=1;
                        // console.log(this === vm);//true
                        this.count+=n;
                        if(this.count%2 == 0){
                            e.target.style.backgroundColor = 'pink';
                        }else{
                            e.target.style.backgroundColor = '';
                        }
                    },
                    sub(e){
                        // vm.count-=1;
                        this.count-=1;
                    }
                }
            })
        script>
    body>
html>

- 事件修饰符

事件修饰符	说明
.prevent	阻止默认行为
.stop	阻止事件冒泡
.capture	以获取模式触发当前的时间处理函数
.once	绑定的事件只触发一次
.self	只有在event.target是当前元素自身触发事件处理函数

- 按键修饰符

<　　　　div class="app">
             
             <input @keyup.enter = 'submit' @keyup.esc = 'clearInput'/>
             
        div>
        <script src="./js/v2.6.10/vue.js">script>
        <script>
            const vm = new Vue({
                el: '.app',
                data: {
                    count: 0
                },
                //定义事件处理函数
                methods:{
                    submit(e){
                        console.log("成功提交了")
                    },
                    clearInput(e){
                        e.target.value = '';
                    }
                }
            })
        script>

- 双向绑定指令：vue提供了v-model双向数据绑定指令，用来辅助开发者在不操作DOM的情况下，快速获取表单的数据（只有表单元素才能使用双向绑定指令）
  - input输入框
    - type='radio'
    - type='checkbox'
    - type='xxx'
  - textarea
  - select

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title>
    head>
    <body>
        <div class="app">
             <p>用户的名字是：{{username}}p>
             <input type="text" v-model="username" />
             <hr>
             <input type="text" :value="username"/>
             <hr >
             <select v-model="city">
                 <option value="">请选择心仪城市option>
                 <option value ="1">成都option>
                 <option value ="2">北京option>
                 <option value ="3">广州option>
             select>
             <hr>
             <input v-model.number="n1" />+<input v-model.number="n2">=<span>{{n1+n2}}span>
        div>
        <script src="./js/v2.6.10/vue.js">script>
        <script>
            const vm = new Vue({
                el: '.app',
                data: {
                    username: 'zhangsan',
                    city:'',
                    n1: 1,
                    n2: 2
                }
            })
        script>
    body>
html>

- 双向绑定修饰符

修饰符	作用	示例
.number	自动将用户的输入值转为数值类型
.trim	自动过滤用户输入的首尾空白字符
.lazy	在change时而非input时更新

- 条件渲染指令：用来辅助开发者按需控制DOM的显示和隐藏（如果需要频繁的切换元素的显示状态，使用v-show性能更好）
  - v-if：原理是动态创建或移除元素，实现元素的显示和隐藏（初始状态是false，一般不需要显示，使用v-if性能更好）

- - v-show ：原理是动态给元素添加或移除display:none样式，来实现元素的显示和隐藏

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title>
    head>
    <body>
        <div class="app">
            <input v-model.lazy="type" />
             <p v-if="type==='A'">优秀p>
             
             <p v-else-if="type==='B'">良好p>
             <p v-else-if="type==='C'">一般p>
             <p v-else="type==='D'">差p>
        div>
        <script src="./js/v2.6.10/vue.js">script>
        <script>
            const vm = new Vue({
                el: '.app',
                data: {
                    type: 'A'
                }
            })
        script>
    body>
html>

- 列表渲染指令：vue提供了v-for列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构，v-for指令要使用item in items形式的特殊语法
  - item可以添加第二个参数，索引index，使用()包裹

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title>
    head>
    <body>
        <div class="app">
            <ul>
                <li v-for="item in list">姓名为：{{item.name}}li>
            ul>
        div>
        <script src="./js/v2.6.10/vue.js">script>
        <script>
            const vm = new Vue({
                el: '.app',
                data: {
                    type: 'A',
                    list:[
                        {name: 'a'},
                        {name: 'b'},
                        {name: 'c'},
                    ]
                }
            })
        script>
    body>
html>

- 案例
  - CSS

　　　　　　　.head {
                margin-bottom: 10px;
                border: 2px solid darkgray;
                overflow: hidden;
            }
            
            #brand {
                height: 50px;
                padding-left: 10px;
                background-color: #CCC;
                line-height: 50px;
                border-bottom: 2px solid darkgray;
            }
            
            span{
                float: left;
                display: inline-block;
                margin: 10px 0px 10px 10px;
                height: 20px;
                padding: 5px;
                background-color: #A9A9A9;
                font-size: 12px;
                line-height: 20px;
                text-align: center;
            }
            
            input {
                margin: 10px 0px 10px 0px;
                height: 24px;
                font-size: 12px;
            }
            
            .btn {
                height: 30px;
            }
            
            table {
                border-collapse: collapse;
                width: 100%;
            }
            
            td,
            th {
                padding-left: 10px;
                height: 30px;
            }
            
            a {
                text-decoration: none;
                color: royalblue;
            }

- - html

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title>
        <link rel="stylesheet" href="css/案例.css">
    head>
    <body>
        <div class="app">
            <div class="head">
                <div id="brand">
                    添加品牌
                div>
                <span>品牌名称span>
                <input type="text" v-model="brand" placeholder="请输入品牌名称"/>
                <input class="btn" type="button" value="添加品牌" v-on:click="add"/>
            div>
            <table border="1" cellspacing="0" >
                <thead>
                    <tr>
                        <td>#td>
                        <td>品牌名称td>
                        <td>状态td>
                        <td>创建时间td>
                        <td>操作td>
                    tr>
                thead>
                <tbody>
                    <tr v-for="item in list" :key="item.id">
                        <td>{{item.id}}td>
                        <td>{{item.brand}}td>
                        <td><label :for="'open'+item.id">{{item.status?'已启用':'已禁用'}}label> <input :id="'open'+item.id" type="checkbox" v-model="item.status"/>td>
                        <td>{{item.time}}td>
                        <td><a @click="del(item.id)" href="javascript:;">删除a>td>
                    tr>
                tbody>
            table>
        div>
        <script src="js/v2.6.10/vue.js">script>
        <script>
            const date = new Date();
            const vm = new Vue({
                el: '.app',
                data: {
                    brand: '',
                    nextId: 4,
                    list:[{
                        id: 1,
                        brand: '宝马',
                        status: true,
                        time: date,
                    },
                    {
                        id: 2,
                        brand: '奥迪',
                        status: false,
                        time: date,
                    },
                    {
                        id: 3,
                        brand: '奔驰',
                        status: false,
                        time: date,
                    }]
                },
                methods:{
                    add(e){
                        if(this.brand.trim() === ''){
                            return;
                        }
                        const date = new Date();
                        //将要添加的对象，整理出来
                        const obj = {
                            id: this.nextId,
                            brand: this.brand,
                            status: true,
                            time: date,
                        }
                        //向list数组末尾添加对象push
                        this.list.push(obj);
                        //使nextId自增加一，并且清空this.brand
                        this.nextId++;
                        this.brand = '';
                    },
                    del(id){
                        this.list = this.list.filter(item=>item.id !== id)
                    }
                }
            })
        
        script>
    body>
html>

Vue-2

今天是个好日子

相关

从壹开始前后端分离【 .NET Core2.0/3.0 +Vue2.0 】框架之四 || Swagger的使用 3.2

vue2.0异步组件

vue2.0 + webpack2.0 配置

vue3.0双向数据绑定Proxy及与vue2.0 Object.defineProperty区别

Vue2.0源码学习(6) - 组件注册

vue2.0 创建项目

Vue2.0结合webuploader实现文件分片上传

Vuex下载导入(vue2.0)

4.Vue2.0获取DOM元素或组件的ref和this.$nextTick(cb)方法

标签