前端怎么引入es6 前端怎么引入vue

转载

墨染青衫 2024-07-20 07:07:37

文章标签 前端怎么引入es6 vue javascript js Vue 文章分类 架构后端开发

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