什么是Vue？什么又是vue指令？

什么是Vue？什么又是vue指令？
目录

一、介绍

二、Vue

1.安装

2.vue基本语法

二、Vue指令

1.v-once

2. v-html

3.v-text

4. v-pre

5.v-cloak

一、介绍

是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、Vue

1.安装

vue由于是框架，所以需要安装所需的插件。

https://cn.vuejs.org/js/vue.js

这个是必需的，打开之后把所有内容复制，然后粘贴到所需要开发的文件中（必须放入js文件）。

最后使用只需引用一下就行。
```
  引入vue框架，中间是存放的js路劲
```
2.vue基本语法
```
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<div id="app">{{message}}div>
<body>
    <script src="../../vue.js">script>
    <script>
        var vm = new Vue({
            el: '#app',//用于挂载要管理的元素
            data: {  //定义数据
                message:"HelloVue",
            }
        });
    script>
body>
html>
```
在谷歌浏览器中按F12，在开发者模式中console控制台，改变vue对象的message值，页面显示也随之改变。

{{message}}表示将变量message输出到标签h2中，所有的vue语法都必须在vue对象挂载的div元素中，如果在div元素外使用是不生效的。el:"#app"表示将id为app的div挂载在vue对象上，data表示变量对象。

二、Vue指令

1.v-once

v-once表示该dom元素只渲染一次，之后数据改变，不会再次渲染。
```
    "app">
        <div v-once>{{info}}div>
    
```
<script src="../../vue.js">script>
<script>
let obj = new Vue({
el: '#app',
data: {
info: 'hello'
}
})
script>

上述{{message}}的message修改后，第一个标签数据会自动改变。

2. v-html

在某些时候我们不希望直接输出百度一下这样的字符串，而输出被html自己转化的超链接。此时可以使用v-html。


    "app">
        <div v-html="msg">div>

    <script src="../../vue.js">script>

<script>

        let obj = new Vue({

el:'#app',

data:{

msg:'百度'

}

})

script>

点击直接跳转百度。

3.v-text

v-text会覆盖dom元素中的数据，相当于js的innerHTML方法。（常用）


    "app">
        <div v-text="msg">div>

使用{{message}}是拼接变量和字符串，而是用v-text是直接覆盖字符串内容。

4. v-pre

有时候我们期望直接输出{{message}}这样的字符串，而不是被{{}}语法转化的message的变量值，此时我们可以使用v-pre标签。

"app"> <div v-cloak>{{msg}}div> <script src="../../vue.js">script> <script> let vm = new Vue({ el: '#app', data: { msg: 'hello word' } }); script>

一、介绍

二、Vue

1.安装

2.vue基本语法

二、Vue指令

1.v-once

2. v-html

3.v-text

4. v-pre

5.v-cloak