<!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. 【LeetCode】2. 两数相加

    题目 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字.   如果,我们将这两个数相加起来,则会返回一个新的链表来表 ...

  2. 最近的项目系之3——core3.0整合Senparc

    1.前言 既然是.net下微信开发,自然少不了Senparc,可以说这个框架的存在, 至少节省了微信相关工作量的80%.事实上,项目开始前,还纠结了下是Java还是core,之所以最终选择core,除 ...

  3. numpy 和 tensorflow 中的各种乘法（点乘和矩阵乘）

    点乘和矩阵乘的区别: 1)点乘(即" * ") ---- 各个矩阵对应元素做乘法 若 w 为 m*1 的矩阵,x 为 m*n 的矩阵,那么通过点乘结果就会得到一个 m*n 的矩阵. ...

  4. elasticsearch 心得

    1.es 一台机器一般为一个节点.一台机器不设置的情况下是无法创建副本集的,副本集和主本必须不在一个节点下,方便故障转移等 2.es7.x后一个索引后只能创建一个类型,可以通过修改更改 出现这个的原因 ...

  5. FCC---Create Movement Using CSS Animation---设计一个盒子上下左右移动，结合animation, @keyframe, position (上下左右的offset)

    When elements have a specified position, such as fixed or relative, the CSS offset properties right, ...

  6. xml解析-jaxp遍历结点

    jaxp遍历结点 把xml中所有的结点都打印出来 // 遍历结点把所有元素名称打印出来 / 1.创建解析器工厂 * 2.根据解析器工厂创建解析器 * 3.解析xml返回document * * 4.得 ...

  7. rocksdb和leveldb性能比较——写性能

    前面学习了一下rocksdb,这个db是对leveldb的一个改进,是基于leveldb1.5的版本上的改进,而且leveldb1.5以后也在不断的优化,下面从写入性能对两者进行对比. 前言 比较的l ...

  8. Spring Cloud Gateway报错：Unable to start embedded Tomcat

    最近搭建Spring Cloud Gateway时启动项目出现如下报错信息: Error starting ApplicationContext. To display the conditions ...

  9. Pycharm创建Django项目

    1. 点击菜单栏的File--->New Project 2. 打开Terminal, 进入刚刚创建的路径执行如下命令: python manage.py startapp app01 显示效果 ...

  10. Asp.Net Core 开发之旅之NLog日志

    NLog已是日志库的一员大佬,使用也简单方便,本文介绍的环境是居于.NET CORE 3.0 1.安装 Install-Package NLog.Web.AspNetCore 2.创建配置文件 在we ...