vue.js最全知识点 & 数据动态绑定 & 数据双向绑定 & 类的绑定 & v-if & v-for & 单选与多选框最齐全的vue.js代码

最新推荐文章于 2024-03-22 11:14:05 发布

longlong6682

最新推荐文章于 2024-03-22 11:14:05 发布

阅读量1.4k

点赞数 1

分类专栏： Vue.js 文章标签： vue

本文链接：https://blog.csdn.net/longlong6682/article/details/105463484

版权

1. vuejs简介
2. 选择器：根据id、class等查找
3. 静态绑定数据 data
4. 插值 { {}}单项绑定
5. 数据动态绑定：computed
6. 数据双向绑定：v-model
7. 类的绑定：绑定事件触发时改变 class, id属性
8. 样式的绑定 v-bind:style
9. v-if 条件模板指令
10. v-for循环语句
11. 自定义指令
12. 综合案例：支付宝注册&用户管理
13. 多选框 v-model
14. 单选框
15. 单选下拉框
16. 多选下拉框

一. vuejs简介

1. Vue是基于MVVM模式实现的

M：model表示模型，机器可读性强的数据
V：view表示视图，人眼可读性强的数据
VM：viewModel表示视图模型，将机器可读性强的数据转化成人眼可读性强的数据，将人眼可读性强的数据转化成机器可读性强的数据（前端的本质）

2. 数据由视图流入模型通过事件监听实现，数据由模型流入视图通过数据的绑定实现的，这就是数据的双向绑定（MVVM模式的标识）

3. vuejs与jquery

在过去，前端的任务就是为页面绑定一些交互，处理一些数据，浏览器兼容性问题是最主要的问题，所以jquery的出现就是为了解决这类问题
随着前端的发展，前端的业务越来越多，如何能够保证代码的安全，可靠，兼容，可延展性，可维护是现在的主要问题
jqeury没有将前端业务逻辑抽象分离，所有代码写在一起，很难维护，很难拓展，所以一些框架呼之欲出
将业务分成模型，视图，控制器，提高代码的可维护性等，但是开发很慢，所以MVVM模式的框架就出现了，vue就是其中的代表之一。

二. 选择器：根据id、class等查找

1、常见的几种选择器

Data用来绑定数据，El用来绑定视图
El可以绑定常见的选择器，Id选择器、类选择器、元素名称选择器(div、p等)、自定义元素名称选择器，等等

2、选择器使用举例

当页面中出现多个选择器的时候渲染第一个（比如有两个class=’title’的div）
当页面出现多个vue实例化对象时，渲染第一个（有两个vue对象对同一个属性渲染）
所以在工作中，一个vue实例化队形要对应一个选择器（一一对应）

选择器使用举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
    <!-- 定义容器元素-->
    <!-- id-->
    <div id="app">{
   {
    title }}</div>
    <!-- class-->
    <div class="title">{
   {
    title }}</div>       <!-- 有两个class属性相同的，只有前面一个生效-->
    <div class="title">{
   {
    title }}</div>
    <!-- 元素名称-->
    <h1>{
   {
    title }}</h1>
    <!-- 自定义元素名称-->
    <ickt>{
   {
    title }}</ickt>
    
    <script type="text/javascript" src="vue.js">{
   {
    title }}</script>
    <script type="text/javascript">
        // 定义模型数据
        var data = {
   
            title:'爱创课堂'
        };

        // 一：实例化第一个vue
        var app = new Vue({
   
            // 绑定视图
            // el:'#app',    // 1. id选择器
            el:'.title',   // 2. 类选择器
            // el:'h1',   // 3. 元素名称选择器
            // el:'ickt',   // 4 . 元素名称选择器
            //绑定数据
            data:data
        });

        // 二：实例化第二个vue（这两个vue对象都针对.title,只有第一个生效，把第一个删除第二个才能生效）
        new Vue({
   
            // 绑定视图
            el:'.title',   // 2. 类选择器
            data:{
   
                'title':'前端培训'
            }
        });
    </script>
</body>
</html>

三. 静态绑定数据 data

Vue实例化对象中，在data中绑定数据
Data中的数据与vue实例化对象中绑定的数据行为是一致的

数据绑定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
    <!-- 定义容器元素-->
    <div id="app">{
   {
    title }}</div>

    <script type="text/javascript" src="vue.js">{
   {
    title }}</script>
    <script type="text/javascript">
        // 定义模型数据
        var data = {
   
            title:'爱创课堂',
            obj:{
   
                color:'red'
            },
            arr:[1,2,3,{
   num:100},4,5]
        };

        // 创建vue实例化对象
        var app = new Vue({
   
            el:'#app',
            data:data
        });

        //1、修改值
        data.title = '前端培训';

        //2、修改引用类型
        data.obj.color = 'green';

        //3、将obj设置成新的对象
        data.obj = {
    width:100 };

        // data中的数据与app中绑定的数据是否相等
        // console.log(data.title == app.title);
        // console.log(data.obj == app.obj);
        // console.log(data.arr == app.arr);
    </script>
</body>
</html>

四. 插值 { {}}单项绑定

1、语法

插值语法 { {数据}}，这里的数据要在vue中绑定
插值符号相当于创建了一个js环境，我们可以使用js表达式，例如点语法访问对象的属性等等

2、常用插值方法

1. 属性插值

注意：2.0版本属性插值建议使用v-bind
插值不仅仅可以写在元素的内容中，还可以写在元素的属性中, 常规属性：id， class， style等
插值语法插入的内容可以是属性的全部，也可以是属性的一部分
例：<div v-bind:id=“id” v-bind:class=“className” v-bind:style="‘color:’ + style.color + '; > { {title}} < / div>

2. 使用js表达式

插值语法创建了一个js环境，所以可以使用表达式
例：<h 1 >面积：{ {width * height}}

3. 使用过滤器

<h 2> { {msg | uppercase}} <!- -将第一个单词变的第一个字母变大写 -->
<h 3> { {msg.toUpperCase()}} <!- -将所有字母全部变大写 -->

插值:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <!--1、 插值不仅仅可以写在元素的内容中，还可以写在元素的属性中 -->
    <div v-bind:id="id" v-bind:class="className" v-bind:style="'color:' + style.color + '; background:' + style.background">{
   {
   title}}</div>
    <!--2、 插值语法创建了一个js环境，所以可以使用表达式 -->
    <h1>面积：{
   {
   width * height}}</h1>
    <!--3、将第一个单词变的第一个字母变大写 -->
    <h2>{
   {
   msg | uppercase}}</h2>
    <!--4、将所有字母全部变大写 -->
    <h3>{
   {
   msg.toUpperCase()}}</h3>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    // 定义数据
    var data = {
   
        title: '<a href="javascript:alert(123);">爱穿课堂</a>',
        className: 'ickt',
        msg: 'what a day!',
        id: 'ickt',
        info: '专业的前端培训学校',
        style: {
   
            color: 'green',
            background: 'red'
        },
        width: 100,
        height: 50
    };

    // 创建vue实例化对象
    var app = new Vue({
   
                        data: data,
                        el: '#app'
                      })
</script>
</body>
</html>

在这里插入图片描述

五. 数据动态绑定：computed

1、作用

当在插值语法中使用数据数据的时候，在渲染之前，我们是无法修改这些数据的，只能在渲染的时候，通过插值表达式，或者插值过滤器改动
为了解决在插值之前修改数据的问题，vue提供了动态数据绑定的语法
静态数据绑定通过data: {} 里面每一个属性都是一个绑定的数据，
动态数据绑定通过computed：{} 里面每一个属性也都是一个绑定的数据

2、使用

Key表示数据名称，Value是一个函数（必须是函数）
函数的返回值就是渲染的数据，参数是vue实例化对象，作用域也是vue实例化对象
访问静态绑定的数据可以通过作用域或者参数对象访问
- 使用参数：面向过程的方式
- 使用作用域：面向对象的方式
动态数据绑定跟静态数据绑定一样，都会将属性添加在vue实例化对象上，并且设置了特性。

使用computed动态绑定数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!-- 定义容器元素 -->
    <div id="app">
        <h1>{
   {
   msg.toUpperCase()}}</h1>
        <h1>{
   {
   newMsg}}</h1>
    </div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    // 定义vue实例化对象
    var app = new Vue({
   
        // 绑定视图
        el: '#app',
        //1、绑定数据
        data: {
   
            msg: 'what a day!'
        },

        //2、动态数据绑定
        computed: {
   
            newMsg: function(vue) {
   
                // console.log(arguments, this)
                // 返回值就是渲染的数据
                // return '爱创课堂'
                // 方法一
                // return vue.msg.toUpperCase()
                // 方法二
                return this.msg.toUpperCase()
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

六. 数据双向绑定：v-model

1、作用

数据双向绑定指的是两个过程
- 1）数据由模型流入视图（通过数据绑定与插值语法实现）
- 2）数据由视图流入模型（通过v-model指令实现）
指令：指令就是对dom元素拓展的一个功能，让其具有一定的行为特征（功能）
V-model指令：将数据由视图流入模型，属性值就是绑定的数据

注意：这个绑定的数据一定要在data中定义出来

v-model数据双向绑定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <!-- 通过指令实现数据由视图流入模型 -->
        <input type="text" v-model="title">
        <p>{
   {
   title}}</p>
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        var data = {
   
            title: '爱创课堂'
        };

        // 创建vue实例化对象
        var app = new Vue({
   
            el: '#app',
            data: data
        })
    </script>
</body>
</html>

在这里插入图片描述

七. 类的绑定：绑定事件触发时改变 class, id属性

1、作用

有时候需要对元素动态设置类，我们可以使用类的绑定语法
v-bind指令: 让属性值变成一个动态的（属性值是一个js环境），从而可以使用js的语法以及vue中的数据

2、法1： v-bind:class=”[cls1, cls2]”

数组的每一个成员代表一个类，如果成员带引号，就是一个字符串，如果成员不带引号，就是变量，定义在vue实例化对象中

注意：

1.0版本，一个成员中不允许带空格，也就是说一个成员只能表示一个类
2.0版本，一个成员可以包含空格，表示多个类

3、法2：v-bind:class=”{key: value}”

Key表示类的名称：如果类中出现了-，要加引号
Value表示是否渲染这个类，是一个布尔值
如果是变量，在vue中对应的数据属性值也要是布尔值

注意：

1.0版本，一个key中不能包含空格，表示多个类
2.0版本，一个key中可以包含空格，表示多个类

4、法3：v-bind:class=”字符串”

字符串中出现了变量，要用+进行字符串拼接，
字符串中可以出现空格，表示多个类，1.0版本也支持
最常用方法： < p :class="{aa:true,cc:flag}">南京网博</ p> # aa 是class属性，后面true/false表示是否使用此属性

注意：1.0还支持插值语法，可以表示类的一部分，或者表示类的全部

v-bind绑定属性常用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class和style属性</title>
    <script src="js/vue.js"></script

最低0.47元/天解锁文章

longlong6682

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
vue.js最全知识点 & 数据动态绑定 & 数据双向绑定 & 类的绑定 & v-if & v-for & 单选与多选框最齐全的vue.js代码

目录：1. vuejs简介2. 选择器：根据id、class等查找3. 静态绑定数据 data4. 插值 {{}}单项绑定5. 数据动态绑定：computed6. 数据双向绑定：v-model7. 类的绑定：绑定事件触发时改变 class, id属性8. 样式的绑定 v-bind:style9. v-if 条件模板指令10. v-for循环语句11. 自定义指令12. ...
复制链接

扫一扫