<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <!-- 设置语言为中文 -->

    <meta http-equiv="Content-Language" content="zh-cn" />

    <!-- 禁止百度转码 -->

    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <!-- 是否开启cleartype显示效果 -->

    <meta http-equiv="cleartype" content="on" />

    <meta name="skype_toolbar" content="skype_toolbar_parser_compatible" />

    <!-- 优先使用最新的chrome版本 -->

    <meta http-equiv="X-UA-Compatible" content="chrome=1" />

    <!-- 启用360浏览器的极速模式(webkit) -->

    <meta name="renderer" content="webkit" />

    <!-- 避免IE使用兼容模式 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->

    <meta name="HandheldFriendly" content="true" />

    <!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 -->

    <meta name="viewport"

        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />

    <!-- 开启 safe-area-inset-bottom 属性 -->

    <van-number-keyboard safe-area-inset-bottom />

    <!-- 设置手持设备支持 -->

    <meta content="yes" name="apple-mobile-web-app-capable" />

    <meta content="black" name="apple-mobile-web-app-status-bar-style" />

    <meta content="telephone=no" name="format-detection" />

    <!-- 使用 Vue 框架 -->

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

</head>

<body>

    <div id="app">

        <div v-text="msg"></div>

        <button @click="changeText" v-text="button"></button>

    </div>

</body>

<script>

    let _this;

    var app = new Vue({

        el: "#app",

        data() {

            return {

                msg: 'hello world',

                button: '转换大小写'

            };

        },

        beforeCreate() {

            _this = this;

        },

        watch: {

        },

        computed: {

        },

        methods: {

            changeText() {

                if (_this.msg == 'hello world') {

                    let msg = _this.msg.replace(/\b(\w)/g, (m) => {  // 转换为首字母大写

                        return m.toUpperCase();

                    });

                    _this.msg = msg;

                } else {

                    _this.msg = _this.msg.toLowerCase(); // 转换为小写

                }

            }

        },

        created() {

        },

        mounted() {

        },

        destroyed() {

        },

        filters: {

        }

    })

</script>

</html>

Vue基础框架的更多相关文章

  1. django+vue 基础框架 ：vue

    <template> <div> <p>用户名:<input type="text" v-model="name"&g ...

  2. django+vue基础框架：django one对one格式

    创建app:python manage.py startapp  app01(这里的app01是指名字,可以是a或b等等) 生成迁移文件:python manage.py makemigrations ...

  3. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  4. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期

    回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...

  5. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明

    缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

  6. vue 前端框架 目录

    vue 前端框架 目录   vue-目录 ES6基础语法 vue基础语法 Vue.js的组件化思想 —上 Vue.js的组件化思想 —下 Vue + Vue-Router结合开发 SublimeSer ...

  7. python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  8. Vue基础以及指令

    Vue 基础篇一   一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...

  9. Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法

    一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...

随机推荐

  1. 【分布式架构】--- 基于Redis组件的特性，实现一个分布式限流

    分布式---基于Redis进行接口IP限流 场景 为了防止我们的接口被人恶意访问,比如有人通过JMeter工具频繁访问我们的接口,导致接口响应变慢甚至崩溃,所以我们需要对一些特定的接口进行IP限流,即 ...

  2. Java生鲜电商平台-商品基础业务架构设计-商品设计

    Java生鲜电商平台-商品基础业务架构设计-商品设计 在生鲜电商的商品中心,在电子商务公司一般是后台管理商品的地方.在前端而言,是商家为了展示商品信息给用户的地方,它是承担了商品的数据,订单,营销活动 ...

  3. Spring MVC接口实例

    概述 前文记录了MVC模式和Spring MVC的初步认识,现在记录创建一个项目,配置Spring MVC,编写接口程序. 创建项目 打开IntelliJ IDEA,点击"File-> ...

  4. uni-app学习（四）好用的插件2

    1. uni-app学习(四)好用的插件2 1.1. 树形结构 点击这里 1.2. 下拉刷新上拉加载组件 如果想把下拉上拉做成自定义的,更加好看,可以使用这个插件 地址这里 举个例子 1.3. 浮动键 ...

  5. 实战FFmpeg－－编译iOS平台使用的FFmpeg库（支持arm64的FFmpeg2.6.2）

    编译环境:Mac OS X 10.10.2 ,Xcode 6.3  iOS SDK 8.3        FFmpeg库的下载地址是 http://www.ffmpeg.org/releases/ . ...

  6. linux 编译源码报错，找不到libXrender.so.1

    1.通过xshell连接到服务器编译hadoop源码得时候遇到问题, 2.使用Xshell的时候登陆后的环境变量中会比SecureCRT登陆后的环境变量多出一条 DISPLAY=localhost:1 ...

  7. 什么是测试系统工程师（TSE）？

    深圳市共创力研发咨询 杨学明/文 TSE(Test System Engineer)简称测试系统工程师,作为系统工程(SE)团队的一员,很多公司目前还没有这样的角色,导致测试部分往往处理弱势,第一,不 ...

  8. 分布式文件管理系统HDFS

    Hadoop 分布式文件管理系统HDFS可以部署在廉价硬件之上,能够高容错. 可靠地存储海量数据(可以达到TB甚至PB级),它还可以和Yam中的MapReduce 编程模型很好地结合,为应用程序提供高 ...

  9. 【原创】CentOS 7 安装解压版mysql5.7

    1.将mysql压缩包解压至 /usr/local 文件夹下,将其改名为mysql #解压 tar -zxf mysql-5.7.27-el7-x86_64.tar.gz -C /usr/local/ ...

  10. docker容器跨服务器的迁移的方法

    docker的备份方式有export和save两种. export是当前的状态,针对的是容器,docker save 是针对镜像images. export 找出要备份容器的ID ? 1 2 3 [r ...