Vue前端框架简介及使用

就像是后端我们使用springboot来进行开发一样,前端需要使用Vue框架进行开发。由于前端不是我们的主要内容,所以只介绍简单的使用内容。具体更深的内容请参考Vue的官方网站。目前使用的较多的是Vue2,所以我们也选用这个版本。

Vue的简单使用

在使用之前,我们可以先装一个Vue2语法提示的插件:Vue 2 Snippets

前端怎么引入es6 前端怎么引入vue_javascript


在插件的界面直接点击安装即可。

首先我们在VScode中新创建一个vue2的文件夹来使用:

前端怎么引入es6 前端怎么引入vue_前端怎么引入es6_02


导入Vue

首先需要导入我们要使用的Vue框架,由于我们已经使用过npm了,所以我们之间用npm来导入Vue,官网也有相关的说明:

前端怎么引入es6 前端怎么引入vue_vue_03


只需要在控制台输入npm install vue指令即可。

在输入指令之前,我们首先要初始化npm环境搭建。

在终端输入npm init -y

PS D:\vue2> npm init -y
Wrote to D:\vue2\package.json:

{
  "name": "vue2",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

出现上面的信息表示初始化完成,之后输入npm install vue指令即可。

PS D:\vue2> npm install vue
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN vue2@1.0.0 No description
npm WARN vue2@1.0.0 No repository field.

+ vue@2.6.11
added 1 package from 1 contributor in 2s
PS D:\vue2>

之后我们创建一个index.html文件,内容如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <script src="./node_modules/vue/dist/vue.js"></script>
</body>

</html>

代码<script src="./node_modules/vue/dist/vue.js"></script>就是引入vue的意思。
接下来我们进行一个简单的使用示例:

<div id="app">
        <h1> {{name}} ,非常帅</h1>
    </div>
    <script>
        //1、vue声明式渲染
        let vm = new Vue({
            el: "#app",//绑定元素
            data: {  //封装数据
                name: "张三"
            },
     });
    </script>

声明一个变量vm,里面有name叫做张三。之后用{{}}的形式调用张三的name,绑定使用id=“app” 。

打开页面:

前端怎么引入es6 前端怎么引入vue_vue_04


Vue支持动态调整内容,我们打开控制台,输入vm.name=“zhaosi”,就会看到页面内容实时进行了变更:

前端怎么引入es6 前端怎么引入vue_Vue_05


双向绑定功能

Vue的双向绑定功能意味着不仅通过控制台改变数据会改变页面的显示,页面输入的内容也能同样影响到页面的显示,修改上面的代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <input type="text" v-model="num">
        <button v-on:click="num++">点赞</button>
        <button v-on:click="cancle">取消</button>
        <h1> {{name}} ,非常帅,有{{num}}个人为他点赞{{hello()}}</h1>
    
    </div>

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

    <script>
        //1、vue声明式渲染
        let vm = new Vue({
            el: "#app",//绑定元素
            data: {  //封装数据
                name: "张三",
                num: 1
            },

            methods:{  //封装方法
                cancle(){
                    this.num -- ;
                },
                hello(){
                    return "1"
                }
            }
        });

        //2、双向绑定,模型变化,视图变化。反之亦然。

        //3、事件处理

        //v-xx:指令
		// 整理内容:
        //1、创建vue实例,关联页面的模板,将自己的数据(data)渲染到关联的模板,响应式的
        //2、指令来简化对dom的一些操作。
        //3、声明方法来做更复杂的操作。methods里面可以封装方法。

    </script>
</body>

</html>

这段代码封装了一个点赞的方法,同时绑定了num作为绑定数,测试页面如下:

前端怎么引入es6 前端怎么引入vue_vue_06


不论是修改后台数据,还是通过方法来前端调用方法,都能够实时改变视图和后端的数据。

Vue的实例封装了非常多的属性,目前我们用到的有:

1、el:绑定元素

2、data:封装数据

3、method:封装方法

这三个也是我们之后使用最多的三个属性。tips在控制台上,我们可以看到他有一个提示

Live reload enabled.

vue.js:9055 Download the Vue Devtools extension for a better development experience:

https://github.com/vuejs/vue-devtools 意思是到这个github网站可以下载一个vue的调式工具装到chrome浏览器上。

可以选择自己到github上克隆之后进行编译添加。

也可以使用下面链接

链接:https://pan.baidu.com/s/139hspAnspD7bJbo81xigmg 密码:1hsv

这个是编译好的软件,下载解压之后,点击chrome浏览器的更多工具,选择扩展程序进入界面,打开开发者模式之后,点击加载已加压扩展程序,把解压的文件添加进去即可。

前端怎么引入es6 前端怎么引入vue_Vue_07


再次进入刚才的界面,我们就能看到控制台多了一个vue的选项,进入之后就能更方便的操作数据。

前端怎么引入es6 前端怎么引入vue_前端怎么引入es6_08