Vue---Vue基础

一.Vue概述

二.Vue的基本使用

2.1Vue.js之hello world 基本实例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <span>{{message}}</span>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'hello Vue'
        }
    });
</script>

</html>

2.2Vue.js之hello world 细节分析

 1.实例参数分析

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

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

2.插值表达式({{}})的用法 

* 将数据填充到HTML标签中

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

3.Vue代码运行原理分析

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

三.Vue模板语法

3.1.模板语法概述 

1.如何理解前端渲染

2.前端渲染方式

  • 原生js拼接字符串

  • 使用前端模板引擎

  • 使用Vue特有的模板语法

 3.2.指令

1.什么是指令

  • 什么是自定义属性

  • 指令的本质就是自定义属性

  • 指令的格式:以v-开始(比如:v-cloak)

2.v-cloak指令用法

  • 插值表达式({{}})存在的问题:“闪动”

  • 如何解决该问题:使用v-cloak指令

  • 原理:先隐藏,替换好值之后再显示最终的值

官网:https://cn.vuejs.org/v2/api/

3.数据绑定指令

*  v-text 填充纯文本

        ①相比插值表达式更加简洁 

*  v-html 填充Html片段

        ①存在安全问题

        ②本网站内部数据可以使用,来自第三方的数据不可以用

*  v-pre 填充原始信息

        ①显示原始信息,跳过编译过程(分析编译过程)

!注意:v-text没有闪动问题 

4.数据响应式

*  如何理解响应式

       ①   html5中的响应式 (屏幕尺寸的变化导致样式的变化) 

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

*  什么是数据绑定

       ①   数据绑定 : 将数据填充到标签中

*  v-once 只编译一次

       ①   显示内容之后不再具有响应式功能 

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

3.3.双向数据绑定 

1.什么是双向数据绑定

* v-model指令

2.双向数据绑定分析

<body>
    <div id="app">
        <input type="text" v-model="message"> {{message}}
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'hello Vue'
        }
    });
</script>

 

  • 双向数据绑定((页面渲染的数据改变会影响vue代码里面的数据,反过来,vue代码的数据改变也会影响页面数据的改变))

  • 双向数据绑定主要用于输入框

 3.MVVM设计思想

①M(model)

②V(view)

③VM(View-Model)

M(data里面的数据)(提供数据)

V(页面展示效果)

 

* Model(模板数据)通过ViewModel的数据绑定(data binding)把数据绑定到View(视图)

*  View(视图)通过ViewModel的事件监听(DOM listeners)修改Model(模板数据)

3.4事件绑定 

1.Vue如何处理事件

* v-on指令用法

<input type="button" v-on:click="num++">

* v-on简写形式

  <input type="button" @click="num++">

2.事件函数的调用方式

* 直接绑定函数名称

<button v-on:click="say"></button>

* 调用函数

   <button v-on:click="say()"></button>

3.事件函数参数传递

* 普通参数和事件对象

     <button v-on:click="say('hi',$event)"></button>

1.事件绑定-参数传递

①如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数

②如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递,并且事件对象的名称必须是$event

2.事件绑定-自定义按键修饰符 

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

 

3.5.属性绑定

1.Vue如何动态处理属性

* v-bind指令用法

<a v-bind:href="url">跳转</a>

* 缩写形式

<a :href="url">跳转</a>

2.v-model的底层实现原理分析

 <input type="text" v-bind:value="msg" v-on:input="$event.target.value">

3.6.样式绑定

1.class样式处理 

* 对象语法

<span v-bind:class="{类名:布尔值}">hello</span>

例子:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>
        .active {
            color: red;
        }
        
        .bing {
            font-size: 100px;
        }
    </style>
</head>

<body>
    <div id="app">
        <span v-bind:class="{active:isActive,bing:isBing}">hello</span>
</body>
<script src="./js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'hello Vue',
            isActive: true,
            isBing: true
        }
    });
</script>

</html>

*  数组语法

<span v-bind:class="['类名']">hello</span>

例子:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>
        .active {
            color: red;
        }
        
        .bing {
            font-size: 100px;
        }
    </style>
</head>

<body>
    <div id="app">
        <span v-bind:class="['active','bing']">hello</span>
</body>
<script src="./js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'hello Vue'
        }
    });
</script>

</html>

注意:样式绑定相关语法细节

①对象绑定和数组绑定可以结合使用

②class绑定的值可以简化操作

③默认的class会保留,当给class样式绑定时,相当于给元素新添加一个classl类名

2.style样式处理

* 对象语法

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <span v-bind:style="{color:activeColor,fontSize:size}">hello</span>
</body>
<script src="./js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'hello Vue',
            activeColor: 'red',
            size: '100px'
        }
    });
</script>

</html>

注意:样式中属性名需要驼峰命名

数组语法

 

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <span v-bind:style="[activeColor,size]">hello</span>
</body>
<script src="./js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'hello Vue',
            activeColor: {
                color: 'red'
            },
            size: {
                fontSize: '100px'
            }
        }
    });
</script>

</html>

3.7.分支循环结构

1.分支结构

①v-if

②v-else

③v-else-if

④v-show 

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

①v-if控制元素是否渲染到页面

②v-show控制元素是否显示(已经渲染到了页面)

注意:当我们需要频繁切换显示组件时,为了考虑页面性能,应该采用v-show,反正则使用v-if 

3.循环结构(数组)

*  v-for遍历数组

<li v-for="item in arr">{{item}}</li>
  <li v-for="(item,index) in arr">{{item}}{{index}}</li>

*key的作用:帮助Vue区分不同的元素,从而提供性能

<li v-for="(item,index) in arr" :key="index">{{item}}{{index}}</li>

 3.循环结构(对象)

 * v-for遍历对象

<li v-for="(value,key,index) in obj" :key="index">{{value}}{{key}}{{index}}</li>

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

<li v-for="(value,key,index) in obj" :key="index" v-if="value=1">{{value}}{{key}}{{index}}</li>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cirrod

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值