Vue 的基本使用步骤

1.需要提供标签用于填充数据

2.引入vue.js文件

3.可以使用vue的语法做功能了

4.把vue提供的数据填充到标签里面

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue学习</title>
    </head>
    <body>
        <div id='app'>
        <p>{ { msg } }</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
        el:'#app',//元素的挂载位置(值可以是css选择器或者DOM元素)
        data:{//模型数据(值是一个对象)
        msg:'hello world'
     }
     })
    </script>
    </body>
    </html>

Vue.js之hello world细节分析

1.实例参数分析

el:元素的挂载位置(值可以是css选择器或者DOM元素)

data:模型数据(值是一个对象)

2.差值表达式用法

将数据填充到html标签中

差值表达式支持基本的计算操作

3.vue代码运行原理分析

概述编译过程的概念(Vue语法->原生语法)

差值表达式支持基本的计算操作

Vue 模板语法

差值表达式

指令

事件绑定

属性绑定

样式绑定

分支循环结构

Vue 指令

1.什么是指令？

  • 指令的本质就是自定义属性
  • 指令的格式：以v-开始(比如v-cloak)

v-cloak 指令用法

1.提供样式

  • 1.[v-cloak]{ display:none; }
  • 2.在插值表达式所在的标签中添加v-cloak指令；\n <div v-cloak >{ { msg } }<div>
  • 背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果

数据绑定指令 用法

  • 1.v-text 填充纯文本

    • 1⃣️相比插值表达式更加简洁

  • 2.v-html 填充HTML片段

    • 1⃣️存在安全问题

    2⃣️本网站内部数据可以使用，来自第三方的数据不可用

  • 3.v-pre 填充HTML片段

    • 1⃣️显示原始信息，跳过编译过程(分析编译过程)

数据响应式

  • 1.如何理解响应式

    • 1⃣️h5 中的响应式(屏幕尺寸的变化导致样式的变化)

    2⃣️数据的响应式(数据的变化导致页面内容的变化)

  • 2.什么是数据绑定

    • 1⃣️将数据填充到标签中

  • 3.v-once 只编译一次

    • 1⃣️显示内容之后不再具有响应式功能

    应用场景：如果显示的信息后续不需要修改的，可以使用v-once，这样可以提高性能

v-model双向数据绑定

  • 用来双向数据绑定，就是model和view中的值进行同步变化;

    • 只能运用在表单元素中--(input, select, textearea);

    <input type="text" v-model='name'>

事件绑定

1.Vue 如何处理事件？

  • v-on 指令用法

    • <button v-on:click:'click' ></button>

  • v-on 简写形式

    • <button @click:'click' ></button>

2.Vue 事件绑定-参数传递？

  • 如果事件直接绑定函数名称，那么默认回传递事件对象作为事件函数的第一个参数/li>
  • 如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是固定的 $event
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue学习</title>
    </head>
    <body>
    <div id='app'>
    <p>{ { num } }</p>
    <div id='app'>
    <button @click='click' ></button>
    <button @click='click(123,345,$event)' ></button>
    </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
        el:'#app',//元素的挂载位置(值可以是css选择器或者DOM元素)
        data:{//模型数据(值是一个对象)
        methods:{
            click(p,p1,event){
              console.log(p,p1)
              console.log(event,target.innerHTML)
              this.mum++
            }
          }
         }
        })
    </script>
    </body>
    </html>

事件修饰符

  • .stop阻止冒泡

    • <button @click.stop='click' ></button>

  • .prevent 阻止默认行为

    • <button @click.prevent='click' ></button>

按键修饰符

  • .enter回车键

    • <button @keyup.enter='click' ></button>

  • .delete 删除键

    • <button @keyup.delete='clear' ></button>

自定义按键修饰符

  • 全局config.keyCodes对象

    • Vue.config.keyCodes.f1=112

  • 规则 自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值

小Demo-简易计算器

    
            <!DOCTYPE html>
            <html lang="en">
            
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <meta http-equiv="X-UA-Compatible" content="ie=edge">
                <title>简易计算器</title>
            </head>
            <body>
                <div id='app'>
                    <h3>简易计算器</h3>
                    <div>
                        <span>数值A</span>
                        <input type="text" v-model='num1' @keyup.delete='clear'>
                    </div>
                    <div>
                        <span>数值B</span>
                        <input type="text" @keyup.enter="handel" v-model='num2' @keyup.delete='clear'>
                    </div>
                
                    <button @click="handel">计算</button>
                    <div>
                        <span>计算结果：</span>
                        <span v-text='result'></span>
                    </div>
                </div>
                <script src="./vue.js"></script>
                <script>
                    var vm = new Vue({
                        el: '#app',
                        data: {
                            num1: '',
                            num2: '',
                            result:''
                        },
                        methods:{
                            handel(){
                                this.result=parseInt(this.num1)+parseInt(this.num2)
                            },
                            clear(){
                                this.num1='',
                                this.num2=''
                            }       
                        }
                    })
                </script>
            </body>
            
            </html>

属性绑定

    Vue动态处理属性

  • v-bind指令用法

    • <a :bind:href='url' >跳转</a>

样式绑定

    1.class样式处理

  • 对象语法

    • <div :bind:class='{active:isActive}' ></div>

  • 数组语法

    • <div :bind:class='[activeClass,errorClass]' ></div>

    样式绑定相关语法细节

    1⃣️对象绑定和数组绑定可以结合使用

    <div :bind:class='[ activeClasses, errorClass, {test:isTest} ]' ></div>

    2⃣️class绑定的值可以简化操作

    <div :bind:class=' arrClasses ' ></div>

    <div :bind:class=' objClasses ' ></div>

    3⃣️默认的class如何处理？默认的class会保留

    <div class=' base ' :bind:class=' objClasses ' ></div>

    2.style样式处理

  • 对象语法

    • <div :bind:style='{ color:activeColor, fontSize:fontSize }' ></div>

    <div :bind:style='{ objStyles }' ></div>

  • 数组语法

    • <div :bind:style='[ baseStyles, overridingStyles ]' ></div>

分支循环结构用法

    1.分支结构

  • v-if 控制元素是否渲染到页面
  • v-else
  • v-else-if
  • v-show 原理：控制元素样式是否显示，相当于设置display:none

    • 2.v-if 与 v-show 的区别

  • 从性能方面考虑：如果一个元素渲染出来，变化很少的话，推荐用v-if；如果经过修改样式能够达到业务需求，推荐v-show

    • 3.循环结构

  • v-for遍历数组

    • <li v-for='item in list' >{ {item} }</li>

    <li v-for='(item,index) in list' >{ {item} }+'----' { {index} }</li>

  • key的作用：帮助Vue区分不同的元素，从而提高性能

    • <li :key='item.id' v-for='(item,index) in list' >{ {item} }+'----' { {index} }</li>

  • v-for遍历对象

    • <div v-for='（value,key,index）in object' ></div>

  • v-if 和 v-for结合使用

    • <div v-if ='value=12' v-for='（value,key,index）in object' ></div>

基础案例 Tab选项卡

    1.实现静态UI效果

  • 用传统的方式实现标签结构和样式

    • 2.基于数据重构UI效果

  • 将静态的结构和样式重构为基于Vue模版语法的形式
  • 处理事件绑定和js控制逻辑

    • 3.声明式编程

  • 模板的结构和最终显示的效果基本一致
    
            <!DOCTYPE html>
            <html lang="en">
            
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <meta http-equiv="X-UA-Compatible" content="ie=edge">
                <title>基础案例 Tab选项卡</title>
            </head>
            <style>
                .tab ul {
                    overflow: hidden;
                    padding: 0;
                    margin: 0;
                }
            
                .tab ul li {
                    box-sizing: border-box;
                    padding: 0;
                    float: left;
                    width: 100px;
                    height: 45px;
                    line-height: 45px;
                    list-style: none;
                    text-align: center;
                    border-top: 1px solid blue;
                    border-right: 1px solid blue;
                    cursor: pointer;
                }
            
                .tab ul li:nth-child(1) {
                    border-left: 1px solid blue;
                }
            
                .tab ul li.active {
                    background-color: orange;
                }
            
                .tab div {
                    width: 500px;
                    height: 300px;
                    display: none;
                    text-align: center;
                    font-size: 30px;
                    line-height: 300px;
                    border: 1px solid blue;
                    border-top: 0px;
                }
            
                .tab div.current {
                    display: block;
                }
            
                .tab div img {
                    width: 100%;
                    height: 100%;
                }
            </style>
            
            <body>
                <div id='app'>
                    <div class="tab">
                        <ul class="uu">
                            <li :class="currentIndex==index?'active':''" :key="item.id" 
                            v-for='(item,index) in tabList' @click='change(index)'></li>
                        </ul>
                        <div :class="currentIndex==index?'current':''" :key="item.id" 
                        v-for='(item,index) in tabList'>
                            <img :src="item.path" alt="">
                        </div>
                    </div>
            
                </div>
                <script src="./vue.js"></script>
                <script>
                    var vm = new Vue({
                        el: '#app',
                        data: {
                            currentIndex:0,//选项卡当前的索引
                            tabList: [{
                                id: 1,
                                title: '青春',
                                path: './images/01.jpeg'
                            },
                            {
                                id: 2,
                                title: '阳光',
                                path: './images/02.jpeg'
                            },
                            {
                                id: 3,
                                title: '忧郁',
                                path: './images/03.jpeg'
                            }]
                        },
                        methods: {
                             change(index){
                                //  实现选项卡切换的操作：本质就是操作类名
                                //  如何操作类名？就是通过currentIndex
                                this.currentIndex =index;
                             }   
                        }
                    })
                </script>
            </body>
            
            </html>
发布时间：2019-10-01
目录