vue + element + CDN 的方式使用

CDN方式开发vue项目步骤：1.cdn链接相关css(element-ui.css, common.css), js(jq ,vue.js, element-ui.js, common.js)等2.每个页面嵌入下列相关内容<div id="app">{{ 3.1415926 | number(2) }}</div>// 全局过滤器V...

羽下佳人

28215人浏览 · 2019-02-25 15:26:00

羽下佳人 · 2019-02-25 15:26:00 发布

CDN方式开发vue项目步骤：

1.cdn 链接相关css(element-ui.css, common.css), js(jq ,vue.js, element-ui.js, common.js) 等

2.每个页面嵌入下列相关内容

<div id="app">
    {{ 3.1415926 | number(2) }}
</div>

// 全局过滤器
Vue.filter("number", function(data){
    return ....
})

new Vue({

   el: "#app",

   data: {},

   methods: {
        fun1(){},
        fun2: function(){}
   },
    
   filters: {
       number: function(data,n){
           return data.toFixed(n);
       }
   }

});

3.代码优化：相关js可以提出写在js文件内，与html区别开

4.相关项目练习代码如下所示：

* event: 传参 $event

取消冒泡：e.stopPropagation()；

取消默认行为：e.preventDefault(); 或者 @click.prevent.stop="open()" // 如取消a链接的跳转行为

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>vue cdn</title>

        <link rel="stylesheet" href="../libs/element-ui/lib/theme-chalk/index.css">

        <link rel="stylesheet" href="../css/style.css">

    </head>

    <body>

        <div id="app">

            <el-row>

              <el-col :span="24"><div class="grid-content">

                <a href="https://yulegh.github.io/vue-element-test/index.html">cdn 项目demo地址</a>

                <a href="javascript:;" @click="openGitHub">open GitHub</a>

              </div></el-col>

            </el-row>

            <el-row>

              <el-col :span="4"><div class="grid-content bg-purple">

                

                <el-menu :default-active="activeIndex">

                    <template v-for="firstMenu in menus">

                        <el-menu-item :index="firstMenu.id" @click="open(firstMenu.url)"  v-if="firstMenu.children==undefined">

                            <i :class="firstMenu.iconClass"></i>{{ firstMenu.name }}

                        </el-menu-item>

                        <el-submenu :index="firstMenu.id" v-else>

                           <template slot="title"><i :class="firstMenu.iconClass" ></i>{{ firstMenu.name }}</template>

                           <el-menu-item-group v-for="secondMenu in firstMenu.children" :key="secondMenu.id">

                                <!-- <template slot="title">{{ secondMenu.name }}</template> -->

                                <!-- <el-menu-item :index="secondMenu.id" @click="open(secondMenu.url)">{{ secondMenu.name }}</el-menu-item> -->

                                <el-menu-item v-for="thirdMenu in secondMenu.children" :index="thirdMenu.id"

                                             :key="thirdMenu.id" @click="open(thirdMenu.url)">{{ thirdMenu.name }}

                               </el-menu-item>

                           </el-menu-item-group>

                        </el-submenu>    

                    </template>

                </el-menu>

                
              </div></el-col>

              <el-col :span="20"><div class="grid-content bg-purple-light">

                <iframe :src="iframeUrl" frameborder="0"></iframe>

              </div></el-col>

            </el-row>

        </div>

        
        <script src="../libs/jquery.js"></script>

        <script src="../libs/element-ui/lib/vue.js"></script>

        <script src="../libs/element-ui/lib/index.js"></script>

        <script src="../js/menus.js"></script>

        <script type="text/javascript">

            new Vue({

                el: "#app",

                data: {

                    activeIndex: "aboutme",

                    aboutMeUrl: "aboutme.html",

                    iframeUrl: "aboutme.html",

                    menus: menus

                },

                methods: {

                    open(url){

                        console.log(url)

                        this.iframeUrl = url;

                    },

                    openGitHub(){

                        window.open("https://github.com/yuleGH", "_blank");

                    }

                }

            });

        </script>

    </body>

</html>

上面html页面js可提出：

index.js：

new Vue({

    el: "#app",

    data: {

        activeIndex: "aboutme",

        aboutMeUrl: "aboutme.html",

        iframeUrl: "aboutme.html",

        menus: menus

    },

    methods: {

        open(url){

            console.log(url)

            this.iframeUrl = url;

        },

        openGitHub(){

            window.open("https://github.com/yuleGH", "_blank");

        }

    }

});

aboutme.js

new Vue({

    el: "#app",

    data: {

        dialogVisible: false

    },

    methods: {

        handleClose(done) {

            this.$confirm('确认关闭？')

              .then(_ => {

                done();

              })

              .catch(_ => {});

        }

    }

});

menu.js

var menus = [

    {

        name: "关于我",

        id: "aboutme",

        iconClass: "el-icon-aboutme",

        url: "aboutme.html"

    },

    {

        name: "测试页",

        id: "test",

        iconClass: "el-icon-test",

        url: "test.html"

    },

    {

        name: "测试页2",

        id: "test2",

        iconClass: "el-icon-test",

        url: "https://www.baidu.com"

    },

    {

        name: "测试页3",

        id: "test3",

        iconClass: "el-icon-test",

        url: "https://www.toutiao.com/"

    },

    {

        name: "时间控件",

        id: "date",

        iconClass: "el-icon-time",

        children: [

            {

                name: "DatePicker 日期选择器",

                id: "DatePicker",

                children: [

                    {name: "年月日时分", id: "DatePicker-demo1", url: "date/demoElDatePicker.html"},

                    {name: "多日期选择", id: "DatePicker-mutidemo", url: "date/demoMultipleDate.html"}

                ]

            }

        ]

    },

    {

        name: "Form",

        id: "form",

        iconClass: "el-icon-edit-outline",

        children: [

            {

                name: "Input",

                id: "input",

                children: [

                    {name: "小写转大写", id: "input-demo1", url: "form/demoUpper.html"}

                ]

            },

            {

                name: "validateRules",

                id: "validateRules",

                children: [

                    {name: "动态修改校验规则", id: "validateRules-demo", url: "form/validateRules.html"}

                ]

            }

        ]

    }

]

5.效果图如下所示：

6.监听

<div id="app">
    {{ 3.1415926 | number(2) }}
</div>


var vm = null;
windoe.onload = function(){
    vm = new Vue({

       el: "#app",

       data: {
           age: "",
           name: "",
           obj: {
              value: "",
              name: ""
           }
       },

       watch: {
           age: function(newValue, oldValue){
                console.log("监听年龄修改")
           },
           name: function(newValue, oldValue){
                console.log("监听姓名修改")
           },
           obj: {
                handler: (newValue, oldValue) => {
                    console.log("obj 属性监听");
                },
                // deep: true  表示监听对象的属性变化，执行handler,获取newValue
                // deep: false 关闭监听，看不到属性变化，不执行handler. 数组无需此设置
                deep: true,   
           },
       } 
       
       methods: {
            fun1(){},
            fun2: function(){}
       }

    });
}

// 全局监听
Vue.$watch("number", function(data){
    return ....
})

7.属性获取

<div id="app">
    {{ 3.1415926 | number(2) }}
</div>


var vm = null;
windoe.onload = function(){
    vm = new Vue({

       el: "#app",

       data: {
           age: "",
           name: "",
           obj: {
              value: "",
              name: ""
           }
       },
       name: "aaaa",
       methods: {
            fun1(){},
            fun2: function(){}
       }

    });
}

8.手动挂载Vue实例

vm.$mount("app");

new Vue({}).$mount("app");

9.属性增删改

<div id="app">
    {{ 3.1415926 | number(2) }}
</div>


var vm = null;
windoe.onload = function(){
    vm = new Vue({

       el: "#app",

       data: {
           age: "",
           name: "",
           obj: {
              value: "",
              name: ""
           }
       },
       name: "aaaa",
       methods: {
            add(){
                // this.obj.age = 12;  无效
                this.$set(this.obj,"age",12);
            },
            del: function(){
                this.$delete(this.obj,"age");
            },
            update(){
                this.obj.age = 20;
            }
       }

    });
}

10.指令+指令生命周期

<div id="app">
    <input v-focus>
    <p v-hello>12</p>
    <p v-hello:wds>12</p>
    <p v-hello2>12</p>
</div>


var vm = null;
windoe.onload = function(){
    vm = new Vue({

       el: "#app",

       data: {
           age: "",
           name: "",
           obj: {
              value: "",
              name: ""
           }
       },
       name: "aaaa",
       methods: {},
       direactives: {
           focus: {
                inserted(el){ el.focus(); // 页面打开输入框即获得焦点 },
                 
           }
       }
    });
}

Vue.directive('hello',{
   bind(el, binding){},
   insert(){}
});

Vue.directive('hello2',{
   bind(el, binding){},
   inserted(){},
   update(){}
});

11.组件

全局写法：

局部组件：有独立data数据

组件引入：

组件套指令：

<templete id="myaddress">
    <input v-focus/>
    ....
</templete>

<body>
    <myaddress ></myaddress>
</body>

12.组件中is的使用：不建议使用

直接正常组件引入<my-row></my-row> 此种写法，展示tbody并没有写入table中，甚至有时候解析出错或者解析不出来。

13.slot内容分发，嵌套使用

14.动态模板

方法1：v-if

方法2：is flag 值与组件名必须统一

15.keep-alive: 缓存非活动组件

button按钮点击切换组件，随机数第一次更新后不再变化，只更新一次。

若是去掉keep-alive，点击一次按钮就会更新一次随机数

16.父子组件通信：父包含子组件

子 --> 父传值发射：

父接收广播：

17.axios数据请求get，post, 以及发送请求数据格式处理：

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}$/, //不连续的两位字母// /^