vue基础知识

1. List item

Vue 入门

{ {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.事件修饰符

<button @click.stop=“doThis”>

<button @click.prevent=“doThis”>

<button @click.stop.prevent=“doThis”>

<input @keyup.enter=“onEnter”>

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

9.v-bind 属性绑定

百度

百度

百度

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

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

11.样式绑定

链接: link.

图片:

带尺寸的图片:

居中的图片:

居中并且带尺寸的图片:

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

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

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

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

生成一个适合你的列表

• 项目
  • 项目
    • 项目

1. 项目1
2. 项目2
3. 项目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

创建一个自定义列表

Markdown

Text-to- HTML conversion tool

Authors

John

Luke

如何创建一个注脚

一个具有注脚的文本。¹

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 $\Gamma (n)=(n-1)!\forall n\in \mathbb{N}$ 是通过欧拉积分

$$\Gamma (z)={\int }_0^{\infty }{t}^{z-1}{e}^{-t}dt.$$

你可以找到更多关于的信息 LaTeX 数学表达式[here][1].

新的甘特图功能，丰富你的文章

• 关于 甘特图 语法，参考 [这儿][2],

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：