前端框架Vue-Vue核心-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端框架Vue-Vue核心。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

第1章 Vue核心

1.1 Vue简介

1.1.2 Vue的特点

1.1.3 与其它 JS 框架的关联

1.1.4 学习Vue之前要掌握的JavaScript基础知识

1.1.5 Vue官网

1.1.6 Vue周边库

1.3 模块语法

1.3.1 模板的理解

1.3.2 插值语法

1.3.3 指令语法

1.4 数据绑定

1.4.1. 单向数据绑定

1.4.2. 双向数据绑定

1.4.3 el与data的两种写法

1.el

2.data

1.5 Vue中的MVVM模型

1.5 事件处理

1.5.1 事件修饰符

1.5.2 键盘事件

1.6 计算属性与监视

1.6.1 计算属性-computed

1.6.2 监视属性-watch

1.6.2.1 深度监视

1.6.3 computed和watch之间的区别

1.7 绑定样式

1.8 条件渲染

1.9 列表渲染

2.0 收集表单数据

第1章 Vue核心

1.1 Vue简介

Vue是什么？

        一套用于动态构建用户界面的渐进式JavaScript框架

        作者: 尤雨溪

        Vue可以自底向上的应用

简单应用：只需一个轻量小巧的核心库

复杂应用：可以引入各式各样的Vue插件

1.1.2 Vue的特点

采用组件化模式，提高代码复用率、且让代码更好维护

声明式编码，让编码人员无需直接操作DOM，提高开发效率

遵循 MVVM 模式

编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发

它本身只关注 UI, 也可以引入其它第三方库开发项目

1.1.3 与其它 JS 框架的关联

借鉴 Angular 的模板和数据绑定技术

借鉴 React 的组件化和虚拟 DOM 技术

1.1.4 学习Vue之前要掌握的JavaScript基础知识

ES6语法规范、ES6模块化、包管理器、原型、原型链、数组常用方法、axious、promise

1.1.5 Vue官网

英文官网: Vue.js - The Progressive JavaScript Framework | Vue.js
中文官网: Vue.js - 渐进式 JavaScript 框架 | Vue.js

1.1.6 Vue周边库

vue-cli: vue 脚手架
vue-resource
axios
vue-router: 路由
vuex: 状态管理
element-ui: 基于 vue 的 UI 组件库(PC 端)

……

1.3 模块语法

1.插值语法

2.指令语法

1.3.1 模板的理解

html 中包含了一些 JS 语法代码，语法分为两种，分别为：

插值语法（双大括号表达式）
指令（以 v-开头）

1.3.2 插值语法

1. 功能: 用于解析标签体内容
2. 语法: {{xxx}} ，xxxx 会作为 js 表达式解析

1.3.3 指令语法

功能: 解析标签属性、解析标签体内容、绑定事件
举例：v-bind:href = 'xxxx' ，xxxx 会作为 js 表达式被解析
说明：Vue 中有有很多的指令，此处只是用 v-bind 举个例子

Vue实例和容器是：一对一的关系

1.4 数据绑定

1.4.1. 单向数据绑定

语法：v-bind:href ="xxx" 或简写为 :href
特点：数据只能从 data 流向页面

1.4.2. 双向数据绑定

语法：v-mode:value="xxx" 或简写为 v-model="xxx"
特点：数据不仅能从 data 流向页面，还能从页面流向 data

1.4.3 el与data的两种写法

1.el

    <script type="text/javascript">
        Vue.config.productionTip = false 
        const v = new Vue({
            // el:'#box',  //第1种el的写法
            data:{
                name:'帅哥'
            }
        })

        console.log(v)
        setTimeout(() => {
            v.$mount('#box') //第2种el的写法
        },1000);
    </script>

2.data

2.1 对象式

<script type="text/javascript">
        Vue.config.productionTip = false 
        new Vue({
            el:'#box',
            data:{
                name:'帅哥'
            }
        })
    </script>

2.2 函数式

使用组件的时候,必须使用函数式

<script type="text/javascript">
        Vue.config.productionTip = false 
        new Vue({
            el:'#box',
            data(){
               return{
                name:'66611'
               }
            }
        })
    </script>

1.5 Vue中的MVVM模型

M：模型(Model) ：对应 data 中的数据

V：视图(View) ：模板

VM：视图模型(ViewModel) ： Vue 实例对象

前端框架Vue-Vue核心,Vue,vue.js,前端,javascript

1.5 事件处理

事件绑定指令：v-on

v-on：xxx 或 @xxx 绑定事件，xxx是事件名称

1.5.1 事件修饰符

prevent：阻止默认事件（常用）；

stop：阻止事件冒泡（常用）；

once：事件只触发一次（常用）；

capture：使用事件的捕获模式；

self：只有event.target是当前操作的元素时才触发事件；

passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

1.5.2 键盘事件

1.Vue中常用的按键别名：

        回车 => enter

        删除 => delete (捕获“删除”和“退格”键)

        退出 => esc

        空格 => space

        换行 => tab (特殊，必须配合keydown去使用)

        上 => up

        下 => down

        左 => left

        右 => right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta

(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

(2).配合keydown使用：正常触发事件。

4.也可以使用keyCode去指定具体的按键（不推荐）

5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

1.6 计算属性与监视

1.6.1 计算属性-computed

1. 要显示的数据不存在，要通过计算得来

2. 在 computed 对象中定义计算属性

3. 在页面中使用{{方法名}}来显示计算的结果

1.6.2 监视属性-watch

1. 通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性

2. 当属性变化时, 回调函数自动调用, 在函数内部进行计算

        监视属性watch：

        1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作

        2.监视的属性必须存在，才能进行监视！！

        3.监视的两种写法：

        (1).new Vue时传入watch配置

        (2).通过vm.$watch监视

1.6.2.1 深度监视

(1).Vue中的watch默认不监测对象内部值的改变（一层）

(2).配置deep:true可以监测对象内部值改变（多层）

备注：

(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！

(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

1.6.3 computed和watch之间的区别

1.computed能完成的功能，watch都可以完成

2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

1.7 绑定样式

1. class样式写法:

        class="xxx" xxx可以是字符串、对象、数组。

        字符串写法适用于：类名不确定，要动态获取。

        对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

        数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

2. style样式:

        style="{fontSize: xxx}"其中xxx是动态值。

:style="[a,b]"其中a、b是样式对象。

1.8 条件渲染

1.v-if写法：

        (1).v-if="表达式"

        (2).v-else-if="表达式"

        (3).v-else="表达式"

        适用于：切换频率较低的场景。

        特点：不展示的DOM元素直接被移除。

        注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

2.v-show写法：

        v-show="表达式"

        适用于：切换频率较高的场景。

        特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到

1.9 列表渲染

v-for指令:

1.用于展示列表数据

2.语法：v-for="(item, index) in xxx" :key="yyy"

3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

2.0 收集表单数据

收集表单数据：

        若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。

        若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。

        若：<input type="checkbox"/>

1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

2.配置input的value属性:

        (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）

        (2)v-model的初始值是数组，那么收集的的就是value组成的数组备注

v-model的三个修饰符：

        lazy：失去焦点再收集数据

        number：输入字符串转为有效的数字

        trim：输入首尾空格过滤