Vue后台开发快速入门学习

之前公司的项目中用到Vue框架，对我而言只是调用接口，这是上次的《Vue框架前后端联调》
现在需要我作为前后端，自己进行编写前端代码，这着实让我尴尬了一场，我们组是一个不需要前端的组，遇到前端功能后台上，所以感谢我的前端朋友远程指导我完成vue的开发
下面我来简而言之讲一下vue吧，vue是啥，做啥，优点，这就不说，直接开门见山

一、重要指令

v-bind：指令，v-bind:title=“message” 将元素节点的title特性和vue实例的message属性保持一致
v-if：if判断语句
v-for：绑定数组的数据来渲染一个项目列表
v-on：click：指令添加一个事件监听器
v-mode：表单输入与应用状态之间的双向绑定
v-once：一次性插入
v-html：将数据输入为html文件

二、请求流程

浏览器输入ip:port/路径经过的路程：
1)/config/index.js寻找port，请求对应的后台地址也在此文件中：proxyTable{target: ‘http://127.0.0.1:8081’,}
2)/src/router/index.js：请求对应项目中的位置
3)页面渲染new App入口

三、关于数据绑定

Vue.js是一款轻量级的以数据驱动的前端JS框架，其和jQuery最大的不同点在于jQuery通过操作DOM来改变页面的显示，而Vue通过操作数据来实现页面的更新与展示

Vue.js数据驱动的原理：当View层的视图发生改变时，Vue会通过DOM Listeners来监听并改变Model层的数据。相反，当Model层的数据发生改变时，其也会通过Data Bingings来监听并改变View层的展示。这样便实现了一个双向数据绑定的功能

Jquery修改数据：button绑定事件，然后获取文案对应的元素dom对象，然后根据切换修改该dom对象的值
Vue修改数据：在button元素上指明事件，同时声明对应文案的属性，点击事件的时候改变属性的值，对应元素的文本就能够自动的进行切换

四、vue文件

在template标签中写html，在script标签中写js，在style标签中写css

export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口
import用于在一个模块中加载另一个含有export接口的模块

Component：组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，这个就相当于java中我们自己封装一个方法，只不过是页面的不同的组合而已

首先template里定义一个组件：

script中写入：

var testTemplate = {
        template: '
{{msg}}
',
        data:function(){
            return {msg:'我的局部组件1'}
        },
        methods:{
            change:function(){
                console.log(this);
            }
        }
    };
 export default {
        data() {
            return{
                a: testTemplate,
            }
        },
        components:{
            'testTemplate':testTemplate,
        },
    }

推荐博客：《组件Component》

数据关联

filterable 是否可搜索

data() {
	return{
		autoParameter:'',
                environment: [{  //定义集合
                    name: '',
                    url: ''
                }],
	}
}

将形式相似的两个json拼接成一个用方法：o1=Object.assign(o1,o2)

需求：选择下拉框后鼠标上划，显示id

将el-popover标签嵌套在el-select标签外，:disabled="visibleShop"属性随着el-select的change事件改变而变化，默认为true，当有长度时false，否则true（PS：这个调试了半天，发现true false条件反了）

computed

会基于它所依赖的数据进行缓存，只有在它所依赖的数据发生变化时，才会重新取值

created

在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图

mounted

在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作

至于method方法和js中一样，做的时候很多都是明明一个效果很简单，可是就是做不出来的感觉，隔端如隔山吧，好在是基本出内容了，我也算是可以搁置一个段落了。