Vue框架学习（一）

Vue是什么？

Vue是一个使用JavaScript开发的用于构建用户界面的渐进式框架

什么是渐进式框架？

可以由简单至困难的将其添加于项目

Vue的特点

双向数据绑定
MVVM模式
数据驱动视图更新
开发者只注重操作数据，不进行DOM操作

MVVM开发模式

M ----> model（数据模型）
V ----> view（视图）
VM ----> （处于数据与视图之间的中间件，可以根据数据的变化更新视图，或视图变化更新数据）

创建第一个Vue项目

打开cmd命令窗口，输入以下指令：（需先安装node及npm）

方式一：
1. npm init vue@latest 初始化vue项目
2. npm i 安装依赖
3. npm run dev 运行项目
方式二：
1. npm install -g @vue/cli 全局安装Vue脚手架
2. vue create my-project 创建Vue项目
方式三：
1. vue ui 打开vue图形化界面进行项目构建

Vue项目文件目录

（此处以方式一所创建项目为例）

node_modules ----> 项目依赖包
public ----> 公共文件（图标等…）
src ----> 代码目录（主要修改该目录下文件）
- assets ----> 静态文件，存放css样式，图片等…
- components ----> 组件目录
- App.vue ----> 根组件
- main.js ----> 入口文件，根组件被导入到此文件，然后挂载到index.html中指定元素
index.html ----> 单页面应用的唯一HTML文件
package.json ----> 存放项目的基本信息，项目名称，版本，项目依赖包等…

插值表达式

vue中使用{{ 变量 }} 将变量插入元素内容中

Vue内置指令

v-for：循环渲染（列表渲染）
- 依靠数组或可遍历对象来渲染元素，根据数组的长度，渲染指定个数的元素

<template>
<ul>
    <!-- 根据数组元素的改变，动态的渲染指定个li元素 key用于指定一个不重复的键，可以提高渲染效率-->
    <li v-for="item,index in List" v-bind:key="index">{{ item }}</li>
</ul>
</template>

<script>
export default {
    // 组件中使用的变量需要写在data函数的返回值对象中，（固定格式）
    data(){
        return{
            List:["apple", "pear", "banana"]
        }
    }
}
</script>

<style>

</style>

为什么使用Key属性？
- key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes；如果不使用key，vue会使用一种最大限度减少动态元素并且尽可能尝试就地修改/复用相同类型元素的算法；
- 而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素
- 在进行插入或者重置顺序时，使用key属性可以让diff算法更高效，提高渲染效率.
v-bind （属性绑定）
- 在组件中，如果一个标签的属性使用了一个变量而不是字符串，则需要使用v-bind进行属性与变量的绑定，此指令可简写为:属性="变量"

<template>
<!-- key属性使用的是变量index，而不是字符串index，因此需要使用v-bind，可简写为（:key="index"） -->
<li v-for="item,index in List" v-bind:key="index">{{ item }}</li>
</template>

v-model（双向数据绑定）
- 常用于表单的input框，作用是将input的value值与data中的变量进行双向数据绑定，一方发生改变，另一方会随之改变，这也是vue的特点----数据可以视图视图传向数据，反之也可

<template>
  <div>
    <!-- 此处input绑定了data，因此在input中输入数据，data也会实时更新，反之亦然 -->
    <input type="text" v-model="data" v-on:change="printData">
  </div>
</template>

<script>
export default {
    data(){
        return{
            data:"",
        }
    },
    methods:{
        printData(){
            console.log(this.data);
        }
    }
}
</script>

<style>

</style>

v-on（事件绑定）
- 用于为标签添加事件（可简写为@事件类型 = "事件回调"）

在上一个例子中，我们为input添加了一个onchange事件，用于打印data的值

<template>
  <div>
    <!-- 为input添加change事件，简写为@ -->
    <input type="text" v-model="data" @change="printData">
  </div>
</template>

<script>
export default {
    data(){
        return{
            data:"",
        }
    },
    methods:{
        // 事件回调函数写在methods对象内
        printData(){
            // this指向该组件实例
            console.log(this.data);
        }
    }
}
</script>

<style>

</style>

v-if（条件渲染）
- 用于在某些条件达成时，才对DOM进行渲染的场景下，本质是对DOM的添加和移除,搭配v-else及v-else-if使用，表示其他条件分支

<template>
    <!-- 当state为1，显示欢迎您,否则显示请登录 -->
    <h1 v-if="state==1">欢迎您！</h1>
    <h1 v-else>请登录</h1>
</template>

<script>
export default {
    data(){
        return{
            state:0,
        }
    }
}
</script>

<style>

</style>

v-show（条件显示）
- 类似于v-if的作用，其不同之处在于，v-show的本质是通过控制元素的display属性来控制元素的隐藏与显示
- 因此与v-if对比，v-show的性能开销较小
- 在频繁进行切换的场景，建议使用v-show
v-html 与 v-text
- 此二者作用类似于DOM节点的innerHTML属性与innerText属性
动态绑定class
- :class="{类名1：条件1，类名2：条件2}"，当条件为真时，为元素添加对应的类名，从而实现通过数据的改变控制样式的切换

Vue框架学习（一）

Vue是什么？

什么是渐进式框架？

Vue的特点

MVVM开发模式

创建第一个Vue项目

Vue项目文件目录

插值表达式

Vue内置指令

v-for：循环渲染（列表渲染）

v-bind （属性绑定）

v-model（双向数据绑定）

v-on（事件绑定）

v-if（条件渲染）

v-show（条件显示）

v-html 与 v-text

动态绑定class

悦读