vue基础知识

最新推荐文章于 2022-08-11 15:01:07 发布

朦胧龙

最新推荐文章于 2022-08-11 15:01:07 发布

阅读量699

点赞数 1

分类专栏： Vue基础知识文章标签： vue

本文链接：https://blog.csdn.net/weixin_49437061/article/details/108683828

版权

本文是Vue.js的基础教程，涵盖了Vue的入门、数据响应式、事件处理、指令、组件化开发、生命周期、插槽和父子组件通信等核心概念。详细解释了v-cloak、v-html、v-once、v-model、MVVM设计思想、事件修饰符、v-bind、样式绑定等指令的用法，并提供了代码示例。此外，还讨论了如何创建自定义列表、表格、注脚和样式，以及使用KaTeX、甘特图、UML图表和流程图等功能增强Markdown文章。

摘要由CSDN通过智能技术生成

这里写自定义目录标题

List item

Vue 入门

Document

{ {msg}}
msg

<!-- 第二步，引入vue.js文件，我们才能使用Vue -->
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    // 第三步，调用Vue构造函数，创建了一个vm实例对象
    var vm = new Vue({
        // 我们传入到Vue构造函数中的这个对象，就是Vue的配置对象，这个对象设置了我们的Vue要如何来做事情
        // el属性其实就是element的简写，它可以告诉Vue，到底使用页面中的哪一个区域来进行Vue的操作
        el: '#app',
        // data属性就是Vue使用的数据
        data: {
            msg: 'Hello Vue'
        }
    });
</script>

2.v-cloak

这个指令是用来解决页面闪动问题。
步骤如下：
A.给Vue容器添加v-cloak属性：

{ {msg}}

B.使用属性选择器设置样式
[v-cloak]{
display:none
}

v-开头的属性归根结底就是自定义属性。

3.v-html，v-text，v-pre

v-text类似与innerText，将Vue的某个数据可以绑定作为标签显示的文本内容
v-html类似于innerHTMl，将Vue的某个数据作为标签内部渲染的html代码。
v-pre将文本内容原样显示，不做Vue的编译。

注意：
v-html要慎重使用，如果使用第三方提供的html代码进行渲染，可能会遭遇xss攻击。

4.数据响应式和v-once

数据响应式指的就是当我们改变vue实例中的数据时，使用这个数据的地方会跟着一起发生变化。
而有一些数据希望是展示完毕之后，不再发生变化，此时我们就可以使用v-once指令来进行处理。

5.v-model [重要]

A.当文本框的内容发生变化的时候，vm实例中的数据随之发生变化这个方向的数据绑定的实现原理是酱紫的： Vue会找到v-model指令对应的文本框，给这个文本框添加一个input事件(input事件会在文本框输入内容的时候发生)的处理。在input事件的处理函数中进行数据赋值

input.addEventListener("input",function( e ){
  vm.msg = e.target.value
})

B.当vm实例中的数据发生变化的时候，文本框中的内容随之发生变化。
我们会使用defineProperty来设置vm实例中的数据，当数据发生变化的时候会触发我们设置的set(){}函数，在set函数中就可以将文本框的内容进行修改，改成与数据一致。

6.MVVM设计思想

MVVM(M model,V view, VM view-model):model即数据层，可以认为是data中的数据
view即视图层，可以认为就是html页面，VM就是控制层，可以认为是Vue实例对象。

在MVVM中，由Vue实例对象来控制data中的数据渲染到视图中，视图中数据的变化影响到data中的数据这些事情。

7.v-on 进行事件绑定

v-on:click = “函数名”

区分到底要不要写this？
在视图区中访问Vue的数据也好，还是访问Vue的函数也好都可以直接写名称，无需写this
在vm实例对象中如果想要访问Vue中的数据，必须要加this

事件处理函数传递参数的形式

8.事件修饰符

Vue.config.keyCodes.heiheihei = 65;// 按下键盘上的a，才会触发事件处理函数
<input type=“text” @keyup.heiheihei=“handle”>

9.v-bind 属性绑定

百度

初学者经常容易忘记写属性绑定的特殊符号 (😃, 所以大家一定要注意，属性绑定必须加冒号。

10.双向数据绑定v-model的底层实现

11.样式绑定

链接: link.

图片: Alt

带尺寸的图片:

居中的图片: Alt

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

项目
- 项目
  - 项目

项目1
项目2
项目3

计划任务
完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	`'Isn't this fun?'`	‘Isn’t this fun?’
Quotes	`"Isn't this fun?"`	“Isn’t this fun?”
Dashes	`-- is en-dash, --- is em-dash`	– is en-dash, — is em-dash