分布式电商项目十四：Vue前端框架简介及使用

Vue前端框架简介及使用

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

Vue的简单使用

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

在插件的界面直接点击安装即可。
首先我们在VScode中新创建一个vue2的文件夹来使用：

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

只需要在控制台输入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” 。
打开页面：

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

双向绑定功能

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作为绑定数，测试页面如下：

不论是修改后台数据，还是通过方法来前端调用方法，都能够实时改变视图和后端的数据。
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浏览器的更多工具，选择扩展程序进入界面，打开开发者模式之后，点击加载已加压扩展程序，把解压的文件添加进去即可。

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