vue传统方式开发（非npm）集成element ui

1.为啥会用传统方式开发由于以前老的项目都是采用传统方式开发但是又想用vue这个开发方式将之前的代码改为npm的方式不现实只能两者结合使用cdn方式引入vue开发。2.如何使用vue进行传统方式开发2.1引入vue.js<html><head></head><body>&l

路上ing

8513人浏览 · 2018-10-15 19:47:11

路上ing · 2018-10-15 19:47:11 发布

1.为啥会用传统方式开发

由于以前老的项目都是采用传统方式开发但是又想用vue这个开发方式将之前的代码改为npm的方式不现实只能两者结合使用cdn方式引入vue开发。

2.如何使用vue进行传统方式开发

2.1引入vue.js

<html>
<head>
	
</head>
<body>
    <div id="app" >
    {{this.test}}
    </div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
</html>
<script>
var vm = new Vue({
        el: '#app',
        data: {
            test:'this is first vue'
        }
    })
</script>

上面是一个例子非常简单引入vue.js 即可

2.2 引入elementui

<link rel="stylesheet" href="https://unpkg.com/element-ui@2.0.3/lib/theme-chalk/index.css">

//注意这个要放在vue.js 的下面
<script src="https://unpkg.com/element-ui@2.0.3/lib/index.js"></script>

2.3 请求服务器数据实现增删改查(vue-resource)

2.3.1 post请求

                this.$http.post(
                    'www.api.com/user',{name:'chenrj',sex:'1',age:18},{emulateJSON:true}).then(function(res){
                        this.$message('添加成功');
                },function(){
                    this.$message.error('添加失败');
                });

2.3.2 get请求

                this.$http.get(
                    'www.api.com/user',{params:{user_id:1,page_size:10,page_index:1}},{emulateJSON:true}).then(function(res){
                        this.category_list = res.data.data;
                },function(){
                    this.$message.error('加载列表失败');
                });

3.组件封装

3.1 封装子组件

<template id="test">
    <div>{{this.name}}</div>
</template>
<script>
	
    Vue.component('test', {
        template: '#test',
         props: ['param'],
         data:function(){
            return{
                name:'这是一个组件'
            }
        }
    })
</script>

3.2 引入组件我这里使用的thinkphp 所以只需要include

<include file="../test" />

3.3 使用组件

<test :param='this.param'></test>

以上是vue传统使用方式的总结

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^