Vue.js常用插件

ue.js本身只提供了数据与视图绑定及组件化等功能，

如果想用它来开发一个完整的SPA（Single Page Application）应用，我们还需要使用到一些Vue.js的插件。

Vue-router

Vue-router是给Vue.js提供路由管理的插件，利用hash的变化控制动态组件的切换。以往页面间跳转都由后端MVC中的Controller层控制，通过<a>标签的href或者直接修改location.href，我们会向服务端发起一个请求，服务端响应后根据所接收到的信息去获取数据和指派对应的模板，渲染成HTML再返回给浏览器，解析成我们可见的页面。Vue.js + Vue-router的组合将这一套逻辑放在了前端去执行，切换到对应的组件后再向后端请求数据，填充进模板来，在浏览器端完成HTML的渲染。这样也有助于前后端分离，前端不用依赖于后端的逻辑，只需要后端提供数据接口即可。

resource用法

Vue-resource提供了一种与RESTful API风格所匹配的写法，通过全局变量Vue.resource或者组件实例中的this.$resource对某个符合RESTful格式的url进行封装，使得开发者能够直接使用增删改查等基础操作，而不用自己再额外编写接口。

我们先大致说明下RESTful API：这是一种设计风格而不是标准，只是提供了一组设计原则和约束条件。它主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。在这种风格中，每个url路径代表一种资源（resource），所以路径中不推荐有动词，只能有名词，而且所用的名词往往与数据库的表格名对应，且一般采取复数的形式命名。而对于资源的具体操作类型，则由HTTP动词表示，即GET/POST/PUT/PATCH/DELETE等。【B站推荐】Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程包含4套优质VUE练手项目，从零开始入门到精通，一套搞定。_哔哩哔哩_bilibili

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

一、MVVM模式和第一个Vue程序

1.什么是 MVVM

该层向上与视图层进行双向数据绑定
向下与 Model 层通过接口请求进行数据交互

Vue的安装方式：

1.1 使用CDN方法(初学者使用)
也可以直接使用CDN的方式引入，代码如下：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

1.2Vue-cli脚手架
利用Vue-cli 脚手架构建Vue项目，在后面第七点详细讲解。(中大型项目中推荐使用)。

2.第一个Vue程序

1、创建一个 HTML 文件

2、引入 Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

完整示例：

<!DOCTYPE html>
  <html>
<head lang="en">
    <meta charset="UTF-8">
    <title>贝西说</title>
    <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<!--view视图-->
 <div id="app">
     <input type="text" v-model="message"/>
     {{message}}
 </div>
 <script>
     var vue=new Vue({
        el:"#app",
         /*model数据*/
         data:{
             message:"hello,vue"
         }
     });
 </script>
</body>
</html>

演示效果：（视图驱动数据，数据驱动视图）

二、基础语法

v-bind

v-bind就是用于绑定数据和元素属性的
完整示例：

<body>
  <div class="app">
        <a v-bind:href="url">点我</a>
    </div>
 <script>
     var app = new Vue({
         el:'.app',
         data:{
             url:"https://www.baidu.com",
         }
     });
 </script>
</body>

注意：
v-bind后面是：属性名=，我的理解是表示绑定这个属性，绑定之后，对应的值要去vue的数据里面找。
当我们在控制台改变url时，对应也会变化。

相同的，我们还可以绑定图片src属性、超链接的class

<body>
    <div class="app">
      <a v-bind:href="url">点我</a>
        <img v-bind:src="imgsrc" width="200px"/>
    </div>
 <script>
     var app = new Vue({
         el:'.app',
         data:{
             url:"https://www.baidu.com",
             imgsrc:"https://cn.vuejs.org/images/logo.png"
         }
     });
 </script>
</body>

注意：

<div class="app">
	  <a v-bind:href="url">点我</a>
</div>

通常我们可以将v-bind：简写成：

<div class="app">
<a :href="url">点我</a>
</div>

v-if,v-else

v-if,v-else

完整示例：

<body>
    <div id="app">
      <div v-if="ok">YES</div>
        <div v-else>NO</div>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                 ok:true,
             }
         });
     </script>
</body>

v-if,v-else-if,v-else

<body>
    <div id="app">
      <div v-if="role=='beixi'|| role=='admin'">您好，admin</div>
        <div v-else-if="role=='jzj'">贾志杰</div>
        <div v-else>您无权访问！</div>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                 role:"admin",
             }
         });
     </script>
</body>

v-for

1、v-for循环普通数组

<body>
  <div id="app">
        <p v-for="(item,index) in list">{{item}}----索引:{{index}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                list:[1,2,3,4,5],
             }
         });
     </script>
</body>

2、v-for循环对象数组

<body>
<div id="app">
        <p v-for="(user,index) in list">{{user.id}}---{{user.name}}-----索引:{{index}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                list:[
                    {id:1,name:'beixi'},
                    {id:2,name:'jzj'},
                    {id:3,name:'贾志杰'}
                ],
             }
         });
     </script>
</body>

3、v-for循环对象

<body>
  <div id="app">
        <p v-for="(val,key,index) in user">值：{{val}}---键：{{key}}-----索引:{{index}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                user:{
                    name:"beixi",
                    age:"18",
                    sex:"男"
                }
             }
         });
     </script>
</body>

4、v-for循环数字

<body>
  <div id="app">
        <p v-for="count in 5">这是第{{count}}次循环</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{ }
         });
     </script>
</body>

三、Vue绑定事件

语法：

v-on:事件名 = “方法名”
简写： @事件名 = “方法名”
事件名： click|keydown|keyup|mouseover|mouseout|自定义事件名

v-on事件监听，完整示例：

<!DOCTYPE html>
  <html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8">
    <title>贝西说</title>
    <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
    <div id="app">
       {{count}}
        <button v-on:click="count+=1">点我加1</button>
        <button v-on:click="sub">点我减1</button>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{count:1 },
             methods:{
                 sub:function(){
                    this.count-=1;
                 }
             }
         });
     </script>
</body>
</html>

注意：v-bind可以简写为： v-on: 可以简写@

四、Vue：表单双绑、组件

1.什么是双向数据绑定

Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。

值得注意的是，我们所说的数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用 vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

2.在表单中使用双向数据绑定

你可以用 v-model 指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

注意：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值!
示例1：

<body>
  <div id="app">
        <input type="text"  v-model="message"/>{{message}}
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{message:'' }
         });
     </script>
</body>

完成效果：

示例2：

  <div id="app">
    <input type="radio" name="sex" value="男" v-model="gender"/>男
        <input type="radio" name="sex" value="女" v-model="gender"/>女
        <p>{{gender}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{gender:'' }
         });
     </script>

示例3：

<body>
  <div id="app">
        <select v-model="selected">
            <option value="">--请选择--</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
        </select>
        <p>{{selected}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{selected:'' }
         });
     </script>
</body>

3.什么是组件

组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板，跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment 等框架有着异曲同工之妙。
通常一个应用会以一棵嵌套的组件树的形式来组织：

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

4.简单定义一个组件

注意：在实际开发中，我们并不会用以下方式开发组件，而是采用 vue-cli 创建 .vue 模板文件的方式开发，以下方法只是为了让大家理解什么是组件。

  <div id="app">
    <beixi></beixi>
    </div>
     <script>
 	    //注册组件
         Vue.component("beixi",{
             template:'<li>hello</li>'
         });
         var app = new Vue({
             el:"#app",
         });
     </script>

说明：

Vue.component()：注册组件
beixi：自定义组件的名字
template：组件的模板

5.使用props属性动态传递参数

<body>
  <div id="app">
        <!--组件：使用props把值传递给组件-->
        <blog-post v-for="item in items" v-bind:value="item"></blog-post>
    </div>
     <script>
         Vue.component("blog-post",{
             props:['value'],
             template:'<li>{{value}}</li>'
         });
         var app = new Vue({
             el:"#app",
             data:{
                 items:['beixi','jzj','贾志杰']
             }
         });
     </script>
</body>

说明：

v-for=“item in items”：遍历 Vue 实例中定义的名为 items 的数组，并创建同等数量的组件

v-bind:value=“item”：将遍历的 item 项绑定到组件中 props 定义的名为 value属性上；= 号左边的 value 为 props 定义的属性名，右边的为 item in items 中遍历的 item 项的值

五、Axios异步通信

1.什么是Axios

Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX 异步通信，其功能特点如下：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API [JS中链式编程]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF（跨站请求伪造）

GitHub：https://github.com/axios/axios

中文文档：http://www.axios-js.com/

2.为什么要使用 Axios

由于 Vue.js 是一个视图层框架并且作者（尤雨溪）严格准守 SoC （关注度分离原则），所以 Vue.js 并不包含 AJAX 的通信功能，为了解决通信问题，作者单独开发了一个名为 vue-resource 的插件，不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架。少用jQuery，因为它操作Dom太频繁！

3.第一个 Axios 应用程序

咱们开发的接口大部分都是采用 JSON 格式，可以先在项目里模拟一段 JSON 数据，数据内容如下：创建一个名为 data.json 的文件并填入上面的内容，放在项目的根目录下

{
  "name": "贝西说",
  "url": "https://blog.csdn.net/beixishuo",
    "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "太谷",
    "city": "山西晋中",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://space.bilibili.com/474668932"
    },
    {
      "name": "贝西说",
      "url": "https://blog.csdn.net/beixishuo"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

完整示例：

    <!--引入 JS 文件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
	<!--在线引入axios。在项目开发中会安装axios组件(npm install axios)-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <div>{{info.name}}</div>
    <div>{{info.address}}</div>
    <a v-bind:href="info.url">贝西说</a>
</div>
<script>
    var app=new Vue({
        el:"#app",
        //data: 属性
        data:function(){//需要处理(返回)后台数据在页面上渲染时使用
            return{
                //请求的返回参数格式必须和json字符串一样
                info:{
                    name:null,//相当于形参占位，实际参数data.json会赋予
                    url:null,
                    address:{
                        street:null,
                        city:null,
                        country:null
                    }
                }
            }
        },
        mounted:function(){//mounted钩子函数，相当于java中main函数。可以调用methods中定义的函数
        // axios.get('data.json').then(resp=>(console.log(resp.data)));
            axios.get('data.json').then(resp=>(this.info=resp.data));
        }
    })
</script>
</body>

注意:
读取本地json文件中的数据时读取失败，如图

解决方式就是右击浏览器快捷方式，更改属性，在目标后面加上

–allow-file-access-from-files

说明:

在这里使用了 v-bind 将 a:href 的属性值与 Vue 实例中的数据进行绑定
使用 axios 框架的 get 方法请求 AJAX 并自动将数据封装进了 Vue 实例的数据对象中
我们在data中的数据结构必须要和Ajax响应回来的数据格式匹配！

4.axios API

可以通过将相关配置传递给 axios 来进行请求。

axios(config)

// 发送一个 POST 请求
axios({
	method: 'post',
	url: '/user/12345',
	data: {
	firstName: 'Fred',
	lastName: 'Flintstone'
	}
});

axios(url[, config])

// 发送一个 GET 请求 (GET请求是默认请求模式)
	axios('/user/12345');

请求方法别名
为了方便起见，已经为所有支持的请求方法提供了别名。

axios.request（config）
axios.get（url [，config]）
axios.delete（url [，config]）
axios.head（url [，config]）
axios.post（url [，data [，config]]）
axios.put（url [，data [，config]]）
axios.patch（url [，data [，config]]）

注意

当使用别名方法时，不需要在config中指定url，method和data属性。

5.Vue的生命周期

六、计算属性

1.什么是计算属性

当一些数据需要根据其它数据变化时,需要进行处理才能去展示,虽然vue提供了绑定数据表达式绑定的方式,但是设计它的初衷只是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,对于一些比较复杂和特殊的计算有可能就捉襟见肘了,而且计算的属性写在模板里也不利于项目维护

computed主要的作用:

分离逻辑(模板和数据分离)
缓存值
双向绑定(getter,setter)

简单理解为：把计算的结果当作属性返回去

2.完整示例

    <!--引入 JS 文件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text"  v-model="num1"/><input type="text" v-model="num2"/>
    <p>求和结果{{result}}</p>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{num1:1,num2:2},
        computed:{//计算属性
           result:function(){
               return parseInt(this.num1)+parseInt(this.num2);
           }
        }
    })
</script>
</body>

3、methods方法与computed计算属性区别

两者的执行结果是完全相同的
计算属性是基于他们的依赖进行缓存的，只有在相关依赖发生改变时，他们才会重新求值，也就是说，只要他的依赖没有发生变化，那么每次访问的时候计算属性都会立即返回之前的计算结果，不再执行函数
每次触发重新渲染时，调用方法将总会再次执行函数

七、前端工程化 vue-cli

Vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

利用vue-cli脚手架来构建Vue项目需要先安装Node.js和NPM环境。
1.Node.js的安装

Node.js的安装比较简单，大家需要在node.js官网(https://nodejs.org/en/download/)下载并安装node.js环境，windows的推荐下载Windows Installer (.msi)。同时，大家会得到一个附送的NPM工具。

a，安装Node.js，双击下载好的node文件，如图所示。

安装过程比较简单，一直“下一步”即可。
b，环境变量配置：安装完成后需要设置环境变量：即Path中添加安装目录(例如：D:\java\nodejs)，如图所示。

c，点击开始=》运行=》输入"cmd" => 输入node -v如图所示，验证安装是否成功。

2.npm安装
由于node.js已经集成了npm，所以之前npm也一并安装好了。所以在cmd终端输入npm -v 来测试是否安装成功。命令如图所示，出现版本提示表示安装成功。

3基本使用

步骤如下：
①　搭建第一个完整的Vue-cli 脚手架构建的项目。

②　安装完成，输入Vue -V，如果出现相应的版本号，则说明安装成功。如图7-6所示。

③　我们可以使用vue-cli来快速生成一个基于webpack模板构建的项目，如图所示，项目名为vue-project。

④　配置完成后，可以看到目录下多出了一个项目文件夹，里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目。
然后进入项目目录（如：cd vue-project），使用 npm install安装依赖，如图所示。

依赖安装完成后，我们来看一下项目的目录结构，如下所示：

.
|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- dev-client.js                // 热重载相关
|   |-- dev-server.js                // 构建本地服务器
|   |-- utils.js                     // 构建工具相关
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试环境变量
|-- node_modules		   //所需要依赖资源
|-- src                              // 源码目录
|   |--  assets                   	   //存放资产文件
|   |-- components                   // vue公共组件
|   |-- router                   	//存放路由js文件，用于页面的跳转
|   |-- App.vue                        // 页面入口文件
|   |-- main.js                        // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|   |-- data                           // 群聊分析得到的数据用于数据可视化
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- README.md                        // 项目说明
|-- favicon.ico 
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息

对于开发者更多操作的是src目录：

|-- src                              // 源码目录
|   |--  assets                   	   //存放资产文件
|   |-- components                   // vue公共组件
|   |-- router                   	//存放路由js文件，用于页面的跳转
|   |-- App.vue                        // 页面入口文件
|   |-- main.js

④　输入npm run dev命令来启动项目，如图所示。

运行成功后在浏览器输入：http://localhost:8080，访问项目结果如图所示。

板语法

对于之前我们简单的说了说教程的计划，和开发中会使用的 IDE 编辑器。接下来我们来说说 Vue.js 的相关语法定义。

这里简单地说说语法这个知识点，不管是任何的语言都会有一套语法结构，能够让开发者使用起来很方便，而且各个语言之间差异都不大。而 Vue.js 则是基于 HTML 的模板语法进行实现的。而一套成熟可用的语法结构，一般都分为：关键字，基础数据类型，条件判断，循环结构，函数，事件等基础功能，而在前端的体系里，又多了对于表单相关的语法定义。而在最近这几年组件的兴起，功能组件化也越来被越多的人拍手叫好。对于组件的使用是贯穿整个 Vue.js 的开发周期，所以学习一门新的语言和知识，最主要的一开始，要学习的就是这些基础点，然后在这个基础之上，才是你发挥的场地。

Mustache

Vue.js 是基于 Mustache 的，而 Mustache 是一款 logic-less 的前端模板引擎。最主要使用它的原因是规范和经典（大家都在用）。最基本的就是定义一个变量 {{ }} 双花括号的定义方式。然后在实际的 HTML 定义中 Vue.js 又实现了一系列的指令，就是响应标签的属性中的自定义属性。以 v-* 来定义。这个就是后端学习中模板语法的基础关键字。死记硬背也要记牢的。当然以人类的记忆遗忘曲线，你天天用它也就记住了它。一开始就差文档就好了，收藏我这个文章，后续可以当文档用哦！

语法部分思维导图

准备开始

这里先说怎么简单使用，后续将针对每一个标签都书写一篇教程，尽量能涵盖所有的知识点。

这里使用方式用两种进行讲解。一个是普通的引用方式进行，另外一个是单体应用。讲解的话直接引用更能说明基础的语法关系。

所有编程语言第一个案例都是 hello world 程序。这里也不例外。

打开我们的开发工具，这里下用 VS Code 开开胃。

创建应用

创建一个hello.html文件，并编写如下代码。

按下F5, 或者点击菜单运行 -> 调试选择 Chrome，如果没有，就先下载吧。后续基本以它为主了。

启动调试之后，我们可以看到浏览器的效果。

就这样我们就完成了 Vue.js 的使用。学习起来十分简单，只要有 HTML 和 JavaScript 的一点基础知识，就可以很顺手的使用。代码很简单，我们过一下这个流程。

首先第一步，引入框架

你要使用一个框架，不管是什么类型的语言，都会有对应的引用方式，比方说 Java 的 jar, 正确的引入了才能使用它，否则只会给你说你在干什么？

而 HTML 应引入一个 JavaScript 的框架，所以就需要 script 标签进行引入使用。

<script src="https://unpkg.com/vue@next"></script>

这里暂时使用 CDN 的引用方式，后期研究代码执行步骤，就需要考虑使用本地的方式进行查看，这样更容易分析代码。

第二步，声明一个模板

const HelloVueApp = {
  data() {
    return {
      message: "Hello Vue.js!!",
    };
  },
};

这是一个最简单的使用方式，这里把变量都放到一个函数 data() 中，这里放到 data 函数，而不是放到 data 属性中，因为以下的原因。

防止 data 中的变量出现数据污染。不使用函数包裹的数据将会在全局可访问。

var Vue = function () {};
Vue.prototype.data = { a: 0, b: 1 };
var var1 = new Vue();
var var2 = new Vue();
var1.data.a = 3;
console.log(var2.data.a); // 3
//直接暴露属性会造成数据污染， 因为共用一个数据。

组件实例中的 data 必须为函数，为了防止多个组件之间调用共用一个 data, 产生数据污染。

var Vue = function () {
  this.data = this.dataFun();
};
Vue.prototype.dataFun = function () {
  return {
    a: 1,
    b: 2,
  };
};
var v1 = new Vue();
var v2 = new Vue();
v1.data.a = 5;
console.log(v1.data.a, v2.data.a); //5 1

在创建实例的过程中，该函数返回的是一个对象，这样可以通过 Vue 的响应式系统将其封装起来，并以 $data 的形式存储在组件实例中。并且该对象的任何顶级的属性（property）也会通过组件实例暴露出来。并且该函数中的属性都可以使用 Mustache 语法进行访问，也就是页面中 {{ message }} ，改造上面的代码就可以访问 message 变量

const vm = Vue.createApp(HelloVueApp).mount("#hello-vue");
console.log(vm.$data.message) // 控制台输出 Hello Vue.js!!

当然除了 data 之外还有： methods，props, computed， watch，provide，inject, setup，emits 等。

然后使用 Vue 暴露出来的 createApp 进行创建。使用 mount 绑定一个页面元素。这里使用 id # 的方式关联到 hello-vue 的 id 属性上。最终我们就看都了页面中的效果。

最后，渲染到页面上

{{ message }}

整个过程都在 Vue.js 的构建生命周期中。因为每个组件创建的过程中都要经过一系列的初始化的过程，比方说：监听数据，编译模板，将实例挂载到 DOM 上，并响应监听数据的变化更新到 DOM上等。在这个生命周期就会定义一些钩子函数，可以让使用者在不同的阶段添加代码的机会。

Vue.js 的生命周期图示

created 在实例创建完成后被同步调用。

单独说这个钩子函数，后续所有的周期钩子都会详细的介绍，现在先简单的收下 created, 也就是说，你可以认为这个函数执行的时候，页面基本上已经加载完毕。在 data 下写上下面代码，执行查看效果，你会发现，执行的步骤。

beforeCreate(){
	console.log("beforeCreate"); 
},
created(){
	console.log("created");
},

模板中使用指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。对于指令大部分都是操作的单个 JavaScript 表达式， v-for 和 v-on 是例外情况，会在后面循环和事件中，详细说明。

v-text

我们来看一个指令 v-text，将一个变量中的数据填充到标签中。

浏览器查看效果：

从这里可以看出来和 {{}} 模板语法起到相同的作用，就是让数据放入到标签中显示出来。

然后我们来用一些其他的使用方式，加载不同类型的数据。

先看效果：

除了基础的变量类型，我们可以使用对象，也可以使用数组，还可以使用简单的三目运算，并且还可以进行赋值的操作。这里只能是单个表达式。页面中继续加入如下代码：

<div v-text="message = '赋值可行?'"></div>

刷新页面，我们会发现，页面中 message 变量中的数据已经变成 “赋值可行？”这里需要注意的是，能赋值的是之前就创建好的对象，如果该对象或者变量不存在就不允许使用了。

当然我们也可以使用一些受限的 JavaScript 函数。例如： Date 函数。继续加入以下代码：

<div v-text="new Date().getYear() + 1900"></div>

查看效果，我们发现页面中打印了 2021 的年份信息。因为这是模板引擎，所以实现调用原始函数有限，仅限于如下函数可以使用：

Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,
decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,
Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt'

根据以上的案例我们可以得出 {{}} 模板应该也和 v-text 一样的效果。我们继续改造我们的代码。

<div>
	当前： {{ new Date().getYear() + 1900 }}年
</div>

可以看到页面中显示出来了对应的效果。当前： 2021年，如果你能出现 2050年，可能这个框架应该已经不在出现，又有新的技术将它们代替。你只是在考古，考的是我曾经遗留下来的代码笔记。

v-text的最终代码和效果图如下图所示：

效果图：

v-once

使用 v-once 执行一次性的插值操作，，他只渲染元素和组件进行一次处理，后续又数据的调整将不再修改数据。这可以优化代码的性能，代码如下：

效果图：

这里我们发现，原始的数据并没有进行数据的响应，而后续的正常使用插值指令的就进行数据更新。这里需要注意的是， v-once 的整个标签作用域内，所有的数据都不会发生变化。

v-cloak

使用 v-cloak 解决 Vue 还没有实例化，模板语法 {{}} 显示到页面中的问题，该问题只会出现在非组件化的或者单页的模式下，该指令主要是保持元素上的组件在实例化结束以后才能显示，可以结合 [v-cloak] { display: none } 一起使用时起到隐藏 Mustache 标签的作用，具体代码如下：

该案例的效果通过只有在访问速度过慢的时候才能显示出来。

v-show

根据表达式的真假值，切换 HTML 元素的 CSS display 状态，进行隐藏和显示元素信息，这里元素不管是否显示都会加载到页面上。当切换频率很高的时候，推荐使用该方式，当切换频率不高的情况下可以选择该方式，或者使用 v-if 指令。演示代码如下:

效果如下：

v-html

使用 innerHTML 更新元素的内容，保留元素的格式，这里内容只会按照普通的 HTML 插入，并不会作为 Vue 的模板进行编译。如果真的要使用 v-html 的组合模板，可以考虑使用组件来代替，这里可以使用在富文本内容的显示上。代码案例如下。

效果图如下 :

v-pre

不需要编译器去编译表达式，用来显示原始的元素数据，这里可以写在没有指令的元素节点上，加快编译的速度。演示效果，代码如下：

效果图如下：

v-on

该指令可以使用 @ 进行缩写。绑定页面中的事件，也就是一个事件监听器。该表达式可以是一个函数的名字，也可以是一个内联语句，当然也可以绑定一个修饰符，没有修饰符的情况下可以省略。这里只做说明，后续事件详细讲解这个属性。上面显示和隐藏元素 v-show 的时候，演示过该用法。

<button v-on:click="doThis"></button>
//doThis 可以是方法名， 或者内联语句。

v-bind

该指令可以使用：进行缩写。绑定一个或者多个元素属性（ attribute ）, 或者绑定一个组件 prop 到表达式。

<!-- 绑定 attribute -->
<img v-bind:src="imageSrc" />

<!-- 动态 attribute 名 -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc" />

<!-- 动态 attribute 名缩写 -->
<button :[key]="value"></button>

本次基础模板和指令的使用先告一段落，接下来我们来看一下一个模板中必有的条件判断。关注我。持续关注后续内容。

在线咨询

上一篇：21html模版里的if判断语句
下一篇：为电信诈骗办卡，构成帮助信息网络犯罪活动罪法院判决了

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Vue.js常用插件

一、MVVM模式和第一个Vue程序

1.什么是 MVVM

2.第一个Vue程序

二、基础语法

三、Vue绑定事件

四、Vue：表单双绑、组件

1.什么是双向数据绑定

2.在表单中使用双向数据绑定

3.什么是组件

4.简单定义一个组件

5.使用props属性动态传递参数

五、Axios异步通信

1.什么是Axios

2.为什么要使用 Axios

3.第一个 Axios 应用程序

4.axios API

5.Vue的生命周期

六、计算属性

1.什么是计算属性

2.完整示例

3、methods方法与computed计算属性区别

七、前端工程化 vue-cli

板语法

Mustache

语法部分思维导图

准备开始

创建应用

首先第一步， 引入框架

第二步， 声明一个模板

最后， 渲染到页面上

Vue.js 的生命周期图示

created 在实例创建完成后被同步调用。

模板中使用指令

v-text

v-once

v-cloak

v-show

v-html

v-pre

v-on

v-bind

您的项目需求

首先第一步，引入框架

第二步，声明一个模板

最后，渲染到页面上