文章目录

概念

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

组件化

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成

一切就从根组件开始：每个 Vue 应用都是通过用 Vue 函数（类）创建一个新的 Vue 实例开始的

Options API

Vue 是通过 Options （选项） 的方式对外提供接口，通过已经指定好的不同的 Option 来完成指定的功能

组件视图模板

一般的 UI 组件是需要有 html、css 去展示对应的界面（视图）的。所以，我们需要给这种组件设置模板

模板

模板 -> 解析 -> DOM

因为我们通常需要根据用户的操作或者不同的数据得到不一样的界面
所以模板并不会直接出现在用户面前（DOM结构中），而是需要通过一个解析的过程，把模板解析成最终的 html 结构
然后再渲染到实际的 DOM 结构中

template

组件的模板其实就是一段类似 html 的字符串，该内容会被 Vue 进行解析，得到解析后的 HTML ，然后渲染到指定的位置

<body>
    <div id="app"></div>
</body>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        template: `
            <div>hello world！！</div>
        `
    });
</script>

.$mount() 方法-挂载组件

在 Vue 中，组件需要调用其 $mount 方法去指定渲染后的结果（结构）所在的 DOM 结构的位置，我们称其为 挂载。

<script>
    let app = new Vue({
        template: `
            <div>hello world！！</div>
        `
    });
    app.$mount("#app");
</script>

数据定义

Vue 提供了一些选项用来存储当前组件需要使用到的数据，data 就是其中一个常用的选项。

    let app = new Vue({
        template: `
            <div>hello world！！</div>
        `,

        data: {
            title: "这是一个标题"
        }
    });
    app.$mount("#app");
    console.log(app)

data 选项

Vue 提供了一些选项用来存储当前组件需要使用到的数据，data 就是其中一个常用的选项。

  • data 的值必须是一个对象或者返回对象的函数
    • new Vue 组件中的 data 可以是对象，也可以是返回一个对象的函数
    • 可复用组件的 data 必须是一个返回对象的函数
    • Vue 提供了多种形式去访问 data 数据
      • 组件对象.$data.数据
      • 组件对象._data.数据
      • 组件对象.数据

在这里插入图片描述

模板语法

为了方便我们在模板中使用组件中的数据，Vue 为我们提供了一种称为：插值表达式的 模板语法

插值语法

Vue 使用的是 {{表达式}} 这种双大括号文本插值语法
在这里插入图片描述

响应式

响应式 - 是 Vue 有别于普通模板引擎的一个重要特性。
当数据发生改变的时候，Vue 会自动更新有关视图，让我们把更多的精力投入到数据、业务处理等任务中

vue指令

  • 指令 (Directives) 是带有 v- 前缀的特殊 attribute。
  • 指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。
  • 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
  • 指令值中不能使用 {{}}

在 vue 中，指令是一个带有 v- 前缀的属性，与普通属性不一样的地方在于，指令的值是引号括起来的 表达式，不同的指令有不同的作用，vue 内置了一些常用的指令，后期我们还可以自定义属于自己的指令。

内置指令的一些分类：

  • 内容输出
  • 循环
  • 逻辑
  • 属性绑定
  • 事件
  • 其它

条件渲染

v-show

根据表达式的值（布尔值），切换元素的显示与隐藏（display 属性）。

    let app = new Vue({
        template: `
                <div>
                    <h1 v-show="isShow">{{title}}</h1>
					...
                </div>
            `,
        data: {
            title: 'hello Vue.js',
            isShow: false,
            users: [
                { id: 1, name: 'mt' },
                { id: 2, name: 'haizi' },
                { id: 3, name: 'ruirui' }
            ],
        }
    });

dom结点并不会消失，适用于状态切换比较频繁的情况
在这里插入图片描述

v-if

根据表达式的值（布尔值），创建或销毁元素。
适用于状态切换不频繁的情况

<h1 v-if="isShow">{{title}}</h1>

v-else / v-else-if

必须是相邻兄弟结点

     <h1 v-if="false">{{title}}A</h1>
     <h1 v-else-if="false">{{title}}B</h1>
     <h1 v-else="true">{{title}}C</h1>

在这里插入图片描述

列表渲染

v-for

根据数据循环渲染 v-for 指令所在的元素及其子元素

可以循环的数据：Array | Object | number | string | Iterable (2.6 新增)

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>

    let app = new Vue({
        template: `
                <div>
                    <ul>
                        <li v-for="(item, index) in items">
                            {{item}} - {{index}}
                        </li>
                    </ul>
                    <ul>
                        <li v-for="item in num">
                            {{item}}
                        </li>
                    </ul>
                    <ul>
                        <li v-for="n of 10">{{n}}</li>
                    </ul>
                    <ul>
                        <li v-for="(val, key) in object1">
                            {{val}} - {{key}}
                        </li>
                    </ul>
                    <ul>
                        <li v-for="(val, name, index) in object2">
                            {{val}} - {{name}} - {{index}}
                        </li>
                    </ul>
                    <div v-for="(val, name, index) in object2"></div>
                    <ul>
                        <li v-for="(user, index) of users">
                            {{index}} - {{user.id}} - {{user.name}}
                        </li>
                    </ul>
                    <ul>
                        <li v-for="(user, index) of users">
                            {{index}} - {{user.id}} - {{user.name}}
                        </li>
                    </ul>
                </div>
            `,
        data: {
			...
            items: [1, 2, 3],
            object1: {
                a: 1,
                b: 2,
                c: 3
            },
            num: 6,
            object2: {
                a: 1,
                b: 2,
                c: 3
            },
            users: [
                { id: 1, name: 'mt' },
                { id: 2, name: 'haizi' },
                { id: 3, name: 'ruirui' }
            ],
			...
        }
    });

在这里插入图片描述

属性绑定

v-bind

绑定数据（表达式）到指定的属性上，<div v-bind:参数="值/表达式"></div>，这里的参数就是指定的属性名称
可以将v-bind:缩写为：:

普通属性绑定

<div v-bind:id="myId"></div>
<div :id="myId">v-bind id选择器</div>

style 样式绑定

<div :style="'width: 100px; height: 100px; background: red'"></div>

对象写法

<div :style="style1"></div>

...
<script>
new Vue({
	el: '#app',
	data: {
		style1: {
      width: '100px',
      height: '100px',
      background: 'green'
    }
	}
});
</script>

数组写法

<div :style="[style1, style2]"></div>

...
<script>
new Vue({
	el: '#app',
	data: {
		style1: {
      width: '100px',
      height: '100px',
      background: 'green'
    }
	},
  style2: {
    border: '1px solid black'
  }
});
</script>

class类选择器绑定

原生普通写法

<div class="box1 box2"></div>

v-bind 写法

<div :class="'box1 box2'"></div>

数组写法

<div :class="['box1', 'box2']"></div>

对象写法

<div :class="{'box1': isActive, 'box1': isChecked}"></div>

测试

    let app = new Vue({
        template: `
                <div>
                    <div v-bind:id="myId"></div>
                    <div :id="myId">v-bind id选择器</div>
                    <div :style="s1">v-bind 样式</div>
                    <div :class="['box1', 'box2']">v-bind 类选择器</div>
                    <div :class="{box1: isActive, box2: isChecked}">v-bind 类选择器2</div>
                </div>
            `,
        data: {
			...
            myId: 'lc',
            s1: {
                color: 'red'
            },
            isActive: true,
            isChecked: false
        }
    });

在这里插入图片描述

单向数据流与双向数据属性绑定

通过上面的知识点和案例，我们可以看到，当数据更新的时候，页面视图就会更新，但是页面视图中绑定的元素更新的时候，对应的数据是不会更新的

<input type="text" :value="title" />

我们称为：单向数据流 数据 -> 视图

在 vue 中，还有一种双向数据流绑定的方式

v-model 指令

<input type="text" v-model="title" />

数据 title 更新，视图中 input 的 value 就会更新。同时，当 input 中的 value 更新的时候，数据 title 也会更新。

⚠️：不是所有元素组件都支持 v-model 的，默认情况下，input、select 等可交互的表单元素支持。

    let app = new Vue({
        template: `
                <div>
                    <h1>{{title}}</h1>
                    <h1 :id="'lc' + title">lc<h1>
                    <input v-model="title" /> {{title}}
                </div>
            `,
        data: {
            title: 'hello Vue.js',
            myId: 'lc',
            s1: {
                color: 'red'
            },
        }
    });

v-model.lazy 触发change时更改数据

可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步
比如<input v-model.lazy="title" /> {{title}}回车时更改数据

.number 自动将用户的输入值转为数值类型

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符
在这里插入图片描述

表单

v-model 在内部为不同的输入元素使用不同的属性和事件来处理数据

  • text 和 textarea
  • checkbox 和 radio
  • select

text 和 textarea

        template: `
                <div>
                    <input type="text" v-model="myId">
                    <textarea v-model="myId" cols="30" rows="10"></textarea>
                    
                </div>
            `,

checkbox 和 radio

    let app = new Vue({
        template: `
                <div id="app">
                    <input type="radio" v-model="v" value="男" /> 男
                    <input type="radio" v-model="v" value="女" /> 女

                    <input type="checkbox" v-model="v2" value="足球" /> 足球
                    <input type="checkbox" v-model="v2" value="音乐" /> 音乐
                </div>
            `,
        data: {
            title: 'hello Vue.js',
            v: "男",
            v2: ["游戏", "动画"],
        }
    });

单选框
在这里插入图片描述
在这里插入图片描述+

复选框
在这里插入图片描述

select

    let app = new Vue({
        template: `
                <div id="app">
                    <select v-model="v1">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                    <select v-model="v2" multiple>
                        <option value="足球">足球</option>
                        <option value="音乐">音乐</option>
                    </select>
                </div>
            `,
        data: {
            title: 'hello Vue.js',
            v1: "男",
            v2: ["游戏", "动画"],
        }
    });

select字段将 value 作为 prop 并将 change 作为事件
单选绑定到值，多选绑定到数组

在这里插入图片描述

事件

在 vue 中，事件通过指令 v-on 指令进行绑定，v-on 缩写为 @

v-on指令

<组件 v-on:事件名称="表达式" />
<组件 @事件名称="表达式" />

 template: `
         <div>
             <h1>{{v1}}</h1>
             <button v-on:click="v1++">表达式加</button>
             <button v-on:click="add">方法加</button>
             <button @click="sub">减</button>
             <button @click="fn(1, 2)">调用传参</button>
             <button @click="fn2($event)">调用传事件对象</button>
             <button @click="fn2()">调用不传值，事件e打印undefined</button>
         </div>
 `,

methods 选项

  • 存放组件中的可复用函数，methods中函数会默认绑定其上下文对象this到当前组件实例，不要使用箭头函数

  • 如果其中的函数被绑定到了一个事件中，那么该函数到第一个参数就是 事件对象，如果带括号调用，则事件对象需要手动传入，且传入的事件对象名称必须是：$event

   methods: {
       add(e) {
           console.log(e);
           this.v1++;
       },
       sub(e) {
           console.log(e);
           this.v1--;
       },
       fn(a, b) {
           console.log(a, b)
       },
       fn2(e) {
           console.log(e);
       },
   },

计算属性

实际应用开发中，我们会用到各种各样的数据，有的数据是原始数据，而有的数据是根据某种条件通过原始数据计算得到的派生数据

computed 选项

computed 选项是一个对象，每一个 key 对应一个属性

且该属性是通过 getter/setter 的方式来进行定义的。

    computed: {
        checkedAll: {
            get() {
                // 依赖当前get对返回值来更新数据对，所以，这里不支持异步去更新数据
                return this.cartItems.every(item => item.checked);
            },
            set(checked) {
                this.cartItems = this.cartItems.map(item => ({
                    ...item,
                    checked
                }));
            }
        },
    },

watch 数据观察

Vue 提供了一个 watch 的选项来对指定的响应式数据进行观察，用于处理一些任务。

使用场景

  • 一对多的数据更新
  • 异步任务
  • 与数据更新无关的其它任务
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

cover

Kaldi之父，IEEE Fellow，小米首席语音科学家Daniel Povey将出席2024全球机器学习技术大会并发表演讲！

avatar CSDN学习社区
cover

探索神经网络在商品销售和图像识别中的应用

avatar CSDN学习社区
cover

基于stm32F103的座面声控台灯

avatar CSDN学习社区