前端入门（二）Vue2核心语法、属性与内置指令、样式渲染、数据代理与监测、生命周期

已于 2023-11-28 22:13:20 修改
阅读量316 收藏
点赞数
分类专栏： 前端 文章标签： 前端
于 2023-11-20 21:34:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baiduwaimai/article/details/134502067
版权

文章目录

Vue简介

在这里插入图片描述

Vue的特点

在这里插入图片描述

在这里插入图片描述

3、使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

在这里插入图片描述

Hello, Vue

1、Vue实例与HTML容器是一一对应的，使用el属性让容器与Vue实例关联起来。
2、Vue可以使用插值语法（双层花括号）解析Vue的data属性，插值语法还可以解析其他的js表达式（所谓js表达式，就是可以产生一个值的js语句，一般为元素赋值语句的等号右边部分或者函数的返回值）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>初始Vue</title>
</head>
<body>
    <script type="text/javascript">
        Vue.config.productionTip = false;  // 开发环境， 关闭vue对于生产环境的提示信息
    </script>

    <div id = "r1">
        <h1>
            {{msg}}  // vue的插值语法
        </h1>
    </div>

    <script type="text/javascript">
        const x = new Vue({
            el: "#r1",  // el element 元素 表示当前vue实例要控制的区域 类似css的条件选择器
            data: {
                msg: "hello vue"
            }
        });
    </script>
</body>

</html>

Vue基本语法

模板语法

Vue模板语法有2大类：
1、插值语法：

  • 功能：用于解析标签体（开闭标签之间部分）内容。
  • 写法：{{****}} ****是js表达式，且可以读取vue实例中data的所有属性。

2、指令语法：

  • 功能：用于解析标签（包括标签属性，标签体内容，绑定事件……）
  • 举例：v-bind:href = "***" 或简写为 ::href="***"，***同样要写js表达式，且可以直接读取到data中的属性。
  • 注：vue中除了v-bind还有很多v-???的属性。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>初始Vue</title>
</head>
<body>
    <script type="text/javascript">
        Vue.config.productionTip = false;  // 开发环境， 关闭vue对于生产环境的提示信息
    </script>

    <div id = "root">
        <h1>
        差值语法
            <h3>{{name}}</h3>  // vue的插值语法
        </h1>
        <h1>
			指令语法
			<a v-bind:href="school.url.toUpperCase()">点我去{{school.url}}学习</a>
		</h1>
    </div>

    <script type="text/javascript">
        const x = new Vue({
            el: "#root",  // el element 元素 表示当前vue实例要控制的区域 类似css的条件选择器
            data: {
            	name: 'jack'
                school:{
					name:'ULCA',
					url:'https://www.ulca.com'
				}
            }
        });
    </script>
</body>
</html>

数据绑定（v-bind、v-model）

Vue中有2中数据绑定方式：

  • 1、单向绑定（v-bind）：数据只能从data流向页面
  • 2、双向绑定（v-model）：数据不仅能从data流向页面，也可以从页面流向data。
    • 双向绑定一般应用在表单元素上（如：input、select等，这些元素都有value属性，v-model绑定的正是这个value属性）
    • v-model:value 可以简写为v-model，因为v-model默认收集的就是value值。

el与data的两种写法

el：

  • 使用el属性绑定容器
  • 使用代码.$mount('#root')绑定

下边演示了一个案例，使用一个定时器，在1秒后再建立vue实例与html容器之间的关联。
在这里插入图片描述
data：

  • 使用data属性，对象式
  • 使用函数返回值，函数式。当学习组件时，data必须使用函数式，否则会报错。
  • 一个重要的原则，由Vue管理的函数，不可以写箭头式，一旦写了箭头式，this就不再是Vue实例了。

在这里插入图片描述

事件处理（v-on:click / @click）

  1. 使用v-on:××× 或@×××绑定事件，其中××× 是事件名。
  2. 事件的回调需要配置在method对象中，最终会在vm上。
  3. method中配置的函数都是被Vue管理的函数，this指向的就是组件实例对象，最好不要用箭头函数（lambda）表示。
  4. @click="demo" 和 @click="deme($event)"效果是一致的，但是后者可以给函数传参数。

事件修饰符

Vue中的事件修饰符：

  1. prevent：阻止默认事件（常用）
  2. stop：阻止事件冒泡（即事件不会向外层传播，常用）
  3. once：事件只触发一次（常用）
  4. capture：使用事件的捕获模式（即外层容器的事件也会被捕获）
  5. self：只有event.target是当前操作的元素才触发事件
  6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕。

键盘事件（缺）

计算属性与监视（computed、watch）

计算属性-computed

计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数;简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已;可以想象为缓存！

计算在虚拟dom中进行，计算结果在缓存中，不会随时间变化，当计算属性中的参数有更新时，虚拟dom清空，重新计算，这时计算属性才会发生变化。
注意计算属性是vue component的属性，可以用方法定义，但不可用作方法调用。

计算属性的优势：有缓存，多次调用，只计算一次。仅当计算所依赖的数据变化后才会重新修改。

computed: {
		fullname:{
			get(){
				return this.firstName + '-' + this.lastName;
				}
			}
        }

计算属性：也可以使用函数返回值设置，但是methods，computed 方法名不能重名，重名字后，只会调用methods的方法。

computed: {
            //计算属性：methods，computed 方法名不能重名，重名字后，只会调用methods的方法
            fullname: function () {
				return this.firstName + '-' + this.lastName;
            }
            // 或者函数也可直接这样写：
            fullname() {
				return this.firstName + '-' + this.lastName;
            }
        }

监视属性-watch

监视属性有两种配置方式：

  • Vue实例中使用watch
  • 调用Vue实例的.$watch方法

主要是可以设置handler(new, old)方法，每次监测的值变化时，都会调用该方法。
在这里插入图片描述

和计算属性一样，监测属性也可以进行简写：
在这里插入图片描述

深度监视-deep

监视多级结构中的某个属性时，使用’number.a’指定对象的key。
在这里插入图片描述
深度监视：

  • Vue中的watch默认不监测对象内部值的改变
  • 配置deep:true，则可以监测对象内部值的改变（多层）

在下边的例子中number对象开启了深度监测，无论属性a还是b变化，都会触发handler(）。
在这里插入图片描述

computed和watch的区别

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

两个重要的小原则：

  • 被Vue管理的函数，最好不要写为箭头函数，即写成普通函数，这样this的指向才是Vue实例对象。
  • 所有不被Vue管理的函数（定时器回调函数，Ajax的回调函数等），最好写成箭头函数，这样this的指向才是Vue实例对象。

过滤器 - filters

过滤器可以对要显式进行特定格式化后再显示（适用于一些简单的处理逻辑），它使用管道处理的语法。

使用过滤器的语法：

{{xxx | 过滤器名}}

或者

v-bind:属性 = "xxx : 过滤器名"

过滤器filters实际上也可以使用计算属性computed或者方法methods来实现，但过滤器filters更加强调一种简单的函数处理逻辑，有点类似于C++中的inline函数

局部过滤器

局部过滤器针对某个特定的Vue实例有效。

过滤器也可以接受额外的参数，但是默认第一个参数是管道传来的前一项数据结果。
在这里插入图片描述

全局过滤器

全局过滤器针对所有的Vue实例都有效。
在这里插入图片描述

样式渲染

绑定class样式，:class

可以使用v-bind或者简写为:绑定class样式。
下面列举三种Vue绑定class样式的案例：

  • 字符串写法，适用于样式类名不确定，需要动态绑定
  • 数组写法，适用于要绑定的样式个数不确定，名字也不确定
  • 对象写法，适用于要绑定的样式个数确定、名字也确定，但是需要动态决定是否使用。

字符串写法：
basic、normal、happy都是css类样式
在这里插入图片描述

数组写法：
样式数组classArr可以动态添加新的样式类型。
在这里插入图片描述
对象写法：
对象key就是样式类名，value决定是否使用该样式。
在这里插入图片描述

绑定style样式，:style

  • :style = “{fontSize: +++}”，其中+++是动态值
  • :style = “[a,b]”，其中a、b是样式对象

在这里插入图片描述

条件渲染，v-if 与 v-show

  1. v-if：适用于切换频率较低的场景，不满足if条件的DOM元素直接被移除。
    • v-if = “表达式”
    • v-else-if = “表达式”
    • v-else = “表达式”
  2. v-show：适用于切换频率较高的场景，不满足show条件的元素只是样式被隐藏。使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到。

列表渲染，v-for

v-for指令用于展示列表数据。

  • 语法是v-for = "(item, index) in xxx" : key = "yyy"
  • 可以遍历数组、对象、字符串、指定次数

在这里插入图片描述

v-for中的key的作用与原理（缺）

列表过滤与排序（案例）

过滤功能实现效果案例：
输入人员名字，过滤出相关信息：
在这里插入图片描述
在这里插入图片描述

watch监测实现过滤

  • 输入框使用v-model双向绑定输入的keyword
  • 使用persons数组代表原数据，filterPersons表示过滤后的数据，使用条件渲染v-for，渲染过滤后的数据。
  • 使用watch监测keyword，当值变化时，根据新值，过滤出新的数组。
  • 注意indexof()函数，当不匹配时，返回-1，当匹配空字符串时，返回0，其余的返回关键字第一次出现的数组下标
  • 由于filterPersons初始为空数组，为了显示原有的数据，应该使用watch的immediate属性，让watch立即执行一次，那么此时关键字为空字符串，filterPersons过滤结果就是原始persons
<div id = "r1">
    <h2> 人员列表
        <input type="text" v-model="keyword" placeholder="请输入名字">
        <ul>
            <li v-for = "(p, index) of filterPersons" :key = "index">
                {{p.name}} -- {{p.age}} -- {{p.sex}} -- {{p.id}}
            </li>
        </ul>
    </h2>
</div>

<script type="text/javascript">
    const x = new Vue({
        el: "#r1",  // el element 元素 表示当前vue实例要控制的区域 类似css的条件选择器
        data: {
            keyword: "",
            persons: [
                {id : '001', name: '马冬梅', age : '19', sex : '女'},
                {id : '002', name: '周冬雨', age : '20', sex : '女'},
                {id : '003', name: '周杰伦', age : '21', sex : '男'},
                {id : '004', name: '扁嘴伦', age : '22', sex : '男'},
            ],
            filterPersons: []
        },
        methods:{

        },
        watch: {
            keyword: {
                // 初始化时，立即执行一次，这样keyword的值就为空了，所以不会执行过滤，显示原始的persons内容
                immediate: true,
                handler(val) {
                    this.filterPersons = this.persons.filter(p => p.name.indexOf(val) != -1);
                }
            }
        },

computed实现过滤

使用computed实现则更为简洁，只需要计算filterPersons数组，而filterPersons的计算依赖于keyword，因此每当keyword变化，自动重新计算filterPersons并渲染。

    <div id = "r1">
        <h2> 人员列表
            <input type="text" v-model="keyword" placeholder="请输入名字">
            <ul>
                <li v-for = "(p, index) of filterPersons" :key = "index">
                    {{p.name}} -- {{p.age}} -- {{p.sex}} -- {{p.id}}
                </li>
            </ul>
        </h2>
    </div>

    <script type="text/javascript">
        const x = new Vue({
            el: "#r1",  // el element 元素 表示当前vue实例要控制的区域 类似css的条件选择器
            data: {
                keyword: "",
                persons: [
                    {id : '001', name: '马冬梅', age : '19', sex : '女'},
                    {id : '002', name: '周冬雨', age : '20', sex : '女'},
                    {id : '003', name: '周杰伦', age : '21', sex : '男'},
                    {id : '004', name: '扁嘴伦', age : '22', sex : '男'},
                ],
                // filterPersons: []
            },
            methods:{

            },
            // watch: {
            //     keyword: {
            //         // 初始化时，立即执行一次，这样keyword的值就为空了，所以不会执行过滤，显示原始的persons内容
            //         immediate: true,
            //         handler(val) {
            //             this.filterPersons = this.persons.filter(p => p.name.indexOf(val) != -1);
            //         }
            //     }
            // },
            computed:{
                filterPersons(){
                    return this.persons.filter(p => p.name.indexOf(this.keyword) != -1);
                }
            }
        });
    </script>

添加排序功能

对过滤结果再添加排序功能：
在这里插入图片描述

  • 添加一个字段sortType，用于记录当前排序的类型

在这里插入图片描述
在计算filterPersons数组中，根据sortType，排序：

            computed:{
                filterPersons(){
                    const arr = this.persons.filter(p => p.name.indexOf(this.keyword) != -1)
                    if (this.sortType) {
                        arr.sort((p1, p2) => this.sortType === 1 ? p1.age - p2.age : p2.age - p1.age)
                    }
                    return arr
                }
            }

其他v-？内置指令

v-text

作用是向所在的标签节点中渲染文本内容，它有两个特点：

  • v-text：会替换掉标签节点中的所有内容，尽管标签中可能写有其他内容，它不会向插值语法{{}}那样自然拼接，而是完全替换。
  • v-text：绑定的字符串数据内容，会被完完全全当做普通字符串处理，尽管绑定的字符串中有类似标签的字符。例如<h>

v-html

v-html与v-text的唯一区别就在于，v-html会将绑定内容中的标签结构解析出来，而v-text则会完全当做普通字符处理。

v-html有安全性问题！！！！
（1）在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
（2）一定要在可信的内容上使用v-HTML，永远不要在用户提交的内容尚！！！

xss cookie攻击案例

有时候，我们登录了一个网站，浏览器会将服务器信息，存入cookie，cookie存在硬盘中，当关闭浏览器再次打开，由于cookie的存在，无需再次登录，就可进入个人账户。
在这里插入图片描述

由于cookie可以免登录，为了安全起见，cookie是不可跨浏览器使用的，即各个浏览器存入的cookie不可共享。
在这里插入图片描述
那么假如，我们把一个浏览器存入某个网站的cookie全部记录下来，在另一个浏览器打开相同的网站，存入cookie，就有可能通过盗取cookie在另一台电脑上实现cookie免登录！！！

在chrome浏览器，使用 cookie editor导出GitHub网站的所有cookie。
在这里插入图片描述

在火狐浏览器中，使用 cookie editor，将刚刚导出的cookie，导入。
在这里插入图片描述
刷新浏览器，实现了登录。
在这里插入图片描述
携带cookie跳转网站，可能泄露个人信息。
在这里插入图片描述

v-cloak

cloak：斗篷，这个属性字段不需要绑定值，在HTML加载时有这个cloak属性，当渲染完毕时，这个属性就消失了，就像给标签加了一个斗篷，渲染完毕后，将斗篷扯开。

使用css配合 v-cloak可以解决网速慢时，页面出现{{xxx}}的问题

下边代码中，

script 的src导入需要5s，html显示很快，但是渲染需要等待script 的src导入。

加入cloak，再使用css在style中，匹配有v-cloak属性的标签，不展示。则等待时就不会出现{{xxx}}。

在这里插入图片描述

v-once

v-once所在标签节点在初次动态渲染后，就会被视为静态内容，以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
在这里插入图片描述

v-pre

v-pre指令跳过所在节点的编译过程，可以利用它跳过，没有使用指令语法，没有使用差值语法的节点，起到加快编译的作用。

实际上就是对静态内容进行表示，提前预编译

Vue自定义指令（缺）

函数式

对象式

Vue数据代理与数据监测

数据代理实现原理

Object.defineProperty()

Object.defineProperty()字面意思就是可以为对象设置属性，且在设置属性时，可以控制属性的一些高级选项：

  • enumerable：是否可以枚举
  • writable：是否可修改
  • configurable：是否可删除
    在这里插入图片描述
    此外可以设置属性的get()和set()方法。

数据代理

  1. Vue中通过VM实例对象来代理data对象属性中的操作（读/写）
  2. 数据代理可以更加方便的操作data中的数据
  3. 实现原理：通过Object.defineProperty()把data对象中所有属性添加到vm上，为每一个属性指定getter和setter方法，在这些方法中去读/写data中对于的属性。
    在这里插入图片描述

数据监测

由数据代理可知，vue实例中data的属性字段，其实都是来自于_data，_data中的数据，才是我们在创建vue实例时，在data:中写入的内容，即 对于一个vue实例vm，vm._data === data

vue框架使用数据代理主要做了两件事：

  • 1、将我们的data中的每一组 k-v，添加响应式的getter()和setter()方法。
  • 2、使用vm_data = data，完成赋值。

在这里插入图片描述
响应式的getter()和setter()方法，完成了对vue实例对象每一个数据属性的监测，当需要读数据时，自动调用getter()方法，读取_data中对应的数据，当需要写数据时，自动调用setter()方法，将修改写回_data。

监测对象 - Vue.set() / vm.$set()

倘若在创建vue实例时，对于data的某个对象属性不确定，要在后边动态的给data中某个对象动态添加一个属性。
一般有两种方式：
1、使用Vue.set(src, k, v)方法
其中src是data中的某个数据对象，k是对象键，v是值。

2、使用vm.$set(vm.ele, k, v)方法
其中vm.ele是vue实例data中某个数据对象，k是对象键，v是值。

注意
1、只有通过上述两种方法添加的属性，Vue框架才会给属性添加setter()和getter()方法，该属性的读写才可以被Vue框架所监测到
2、上述第一种方法，src不可以直接填vm实例本身，不可以直接给data新增一个属性，只能是对已有的data的某个属性，添加新的属性k-v

举例：
假如原来data中有student这个对象属性，它有name和age两个属性字段，后续想通过按钮给他添加一个属性性别。

在这里插入图片描述

    <div id = "r1">
        <h2> 人员属性 </h2>
            <button @click = "addSex1">添加性别男</button>
            <button @click = "addSex2">添加性别女</button>
            <h3>
                姓名：{{student.name}}
            </h3>
            <h3>
                年龄：{{student.age}}
            </h3>
            <h3 v-if = "student.sex">
                性别：{{student.sex}}
            </h3>                        
    </div>

    <script type="text/javascript">
        const x = new Vue({
            el: "#r1",  // el element 元素 表示当前vue实例要控制的区域 类似css的条件选择器
            data: {
                student:{
                    name: 'lzy',
                    age: 24
                }
            },
            methods: {
                addSex1() {
                    // 1. Vue.set()
                    Vue.set(this.student, 'sex', '男')
                },
                addSex2() {
                    // 2. .$set()
                    this.$set(this.student, 'sex', '女')
                },
            }
        });
    </script>

在这里插入图片描述

监测数组 - 包裹

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

所谓包裹就是说，Vue对数组的上述方法进行进一步封装，使其在实现上述数组功能的同时，能被监测触发更新。

注：上述方法的特征是调用后会改变原始数组。相比之下，也有非变更方法，例如 filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

Vue生命周期

在这里插入图片描述

在这里插入图片描述

  • 1、beforeCreate(）：数据代理尚未开始，此时无法通过vm访问到data中的数据，methods中的方法。
  • 2、created()：数据监测和数据代理完成了，可以通过vm访问到data中的数据，methods中的方法。
  • 3、beforeMount()：页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作，最终都不奏效。
  • 4、mounted()：页面中呈现的是经过Vue编译的DOM，此时对DOM的操作均有效，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作。1-4步骤构成了挂载的主要流程
  • 5、beforeUpdate()：此时数据是新的，但是页面是旧的，即新的数据尚未更新到页面上。
  • 6、updated()：此时，页面的显示的是新数据，页面和数据同步完毕。
  • 7、beforeDestroy()：此时vm中所有的data、methods、指令等等，都处于可用状态，马上要执行销毁的过程，一般在此阶段：关闭定时器、取消订阅消息，解绑自定义事件等收尾操作。
  • 8、destroyed()：销毁完毕。可以使用this.$destroy()，让vue实例自己销毁，Vue实例销毁后，自定义事件会失效，但原生DOM事件依然有效。
芸丿兮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【前端开发---Vue2】史上最详细的Vue2入门教程，从基础到进阶带你彻底掌握Vue(二)
共同学习，共同成长
05-04 1402
本篇我们将详细讲解vue中的六大类常见指令，包括【条件渲染指令】【事件绑定指令】【属性绑定指令】...... 并结合具体案例来让小伙伴们掌握的更透彻！
Vue | Vue 核心 【模板语法 + 数据绑定 + MVVM模型 + 数据代理 + 事件处理 + 计算属性computed + 监视属性watch + 渲染+收集表单数据+过滤器 + 内置指令】
不爱吃菜的菜菜的博客
07-05 715
官网Vue：一套用于构建用户界面的 渐进式 JavaScript框架 特点 采用组件化模式，提高代码复用率、且让代码更好维护 声明式编码，让编码人员无需直接操作DOM，提高开发效率 使用虚拟DOM + 优秀的Diff算法，尽量复用DOM节点。 搭建Vue开发环境 vue文件引入关掉Vue控制台提示Vue开发者工具添加到chrome扩展程序里面，就不显示第一个了 第二个提示框 阻止 vue 在启动时生成生产提示 容器的两个作用：区分JS表达式 和 JS代码(语句）表达式：一个表达式会产生一
【前端开发---Vue2】超详细的Vue2入门教程，让你的开发效率大大提高（自己整理的笔记，超详细！）
热门推荐
m0_67844671的博客
09-27 2万+
【超详细Vue2教程】超详细的Vue2入门教程，让你的开发效率大大提高（自己整理的笔记，超详细！）
Vue2基础
最新发布
一+一加1的博客
07-05 854
分析vue中生命周期点我+1点我销毁vm
前端框架：vue2
weixin_44953928的博客
04-25 2582
文章目录一、介绍vue:常用7个属性二、基础语法1.v-bind2、条件与循环（if 和 for）3.**for循环**4、v-on 监听事件：5、v-model 一、介绍 <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) vue:常用7个属性 el属性 用来指示vue编译器从什么地方开始解析 vue
前端学习——VUE2
weixin_57896572的博客
01-03 1012
尚硅谷VUE2学习笔记
前端框架——Vue（2）
zzhou——blog
03-03 280
文章目录5.指令学习5.7.计算属性5.8.watch6.组件化6.1.全局组件6.2.组件的复用6.3.局部组件6.4.组件通信6.4.1.props（父向子传递）6.4.2.props验证6.4.3.动态静态传递6.4.4.子向父的通信：$emit7.路由vue-router7.1.场景模拟7.1.1.编写父组件7.1.2.编写登录及注册组件7.1.3.在父组件中引用7.1.5.问题7.2.v...
vue2前端框架基础笔记
很多时候犯错都是在不知情的情况下发生的
08-11 393
本篇文章需要有一定的vue基础，强烈建议先看初学系列文章  接触到vue2的时候，是需要明白一下概念 1 数据绑定原理、组件原理、钩子函数、 2 插件vue-route、vuex、axios、bus总线 3前端UI框架  element-ui，echarts图表插件 4 互联网公司vue常见面试题 一：基础概念 一个vue对象通常包括下面几个属性 el：  //dom元素 dat...
Vue入门（2）绑定样式和渲染、监视数据、表单、过滤器、指令、生命周期
N奈斯先生的博客
04-11 227
   欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。   致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨 文章目录绑定样式和渲染绑定样式渲染条件渲染列表渲染监视数据、表单、过滤器Vue监视数据的原理收集表单数据过滤器指令内置指令自定义指令生命周期面试题一、说出几种 vue 当中的指令和它的用法？二、为什么使用 key? 绑定样式和渲染 绑定样式 1.在应用界面中，某个(些)元素的样式是变化的一 2.class/style
使用Vue调取接口,并渲染数据的示例代码
10-16
在实际开发中，Vue.js常被用于与后端API交互，调取数据，并将数据渲染到页面上。这篇示例代码将向我们展示如何利用Vue.js来完成数据的获取和渲染。 首先，我们必须在HTML页面中引入Vue.js核心库以及vue-resource...
Vue.js前端开发基础与项目实战
08-13
在“Vue.js前端开发基础与项目实战”这个主题中，我们将深入探讨Vue.js的核心概念、基本语法以及实际项目的构建过程。 1. **Vue.js核心概念**： - **虚拟DOM**：Vue.js使用虚拟DOM来提高网页更新性能，减少不必要...
Vue.js的核心概念：如何理解Vue.js的声明式渲染、组件系统、Vue实例、Vue生命周期等核心概念。
哎 你看的博客
06-02 420
介绍Vue.js Vue.js的由来 Vue.js的特点 Vue.js的主要应用场景 Vue的声明式渲染 什么是声明式渲染 Vue如何实现声明式渲染 声明式渲染的优点 Vue的组件系统 什么是组件 如何使用组件 组件的生命周期 组件的通信方式：props、事件、插槽等 Vue实例 创建一个Vue实例 Vue实例的属性和方法 Vue实例的生命周期 Vue的指令系统 Vue内置的指令：v-if、v-for、v-model等 自定义指令 指令的修饰符 Vue的过渡和动画 过渡的原理 使用transition组件创
vue2
weixin_42127687的博客
04-24 365
目录 4. 通过axios实现数据请求 4.1 json4.1.1 json数据的语法 4.1.2 js中提供的json数据转换方法 4.2 ajax4.2.1 数据接口 4.2.3 ajax的使用 4.2.4 同源策略 4.2.5 ajax跨域(跨源)方案之CORS 5. 组件化开发5.1 组件[component] 5.1.1 默认组件 6. Vue自动化工具（V...
Vue2
yanhhillo的博客
05-05 431
2022.5.5 学习笔记 目录 六、路由 6.1 前端路由的概念与原理 6.1.1 什么是路由 6.1.2 SPA 与前端路由 6.1.3 什么是前端路由 6.1.4 前端路由的工作方式 6.1.5 实现简易的前端路由（了解） 6.2vue-router 的基本用法 6.2.1 什么是 vue-router 6.2.2 vue-router 安装和配置的步骤 6.2.3 声明路由的匹配规则 6.3 vue-router 的常见用法 6.3.1 路由重定向 6.3.2 嵌套路.
Vue面试精华：生命周期、props、模板语法与计算/监听属性详解
在面试中，关于Vue的常见问题涉及其核心概念、生命周期管理和组件交互。以下是几个关键知识点的详细解释： 1. **生命周期钩子函数**: Vue的生命周期分为多个阶段，每个阶段都有相应的钩子函数，这些函数在组件的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值