Vue basic framework

<! DOCTYPE HTML > 
< HTML > 

< head > 
    < Meta charset = "UTF-8" > 
    <-! Setting for the Chinese language -> 
    < Meta HTTP-equiv = "Content-Language" Content = "zh-CN"  /> 
    <! - prohibited Baidu transcoding -> 
    < Meta HTTP-equiv = "Cache-Control" Content = "NO-siteapp"  /> 
    <! - whether to open cleartype display -> 
    < Meta HTTP-equiv = "cleartype" content="on" />
    <Meta name = "skype_toolbar" Content = "skype_toolbar_parser_compatible"  /> 
    <-! priority latest chrome version -> 
    < Meta HTTP-equiv = "the X-UA-Compatible-" Content = "chrome = 1"  /> 
    <! - enabled browser 360 speed mode (WebKit) -> 
    < Meta name = "the renderer" Content = "WebKit"  /> 
    <-! avoid IE compatibility mode -> 
    < Meta HTTP-equiv = "X- Compatible-the UA " Content =" IEs = Edge "  /> 
    <!- optimization for handheld devices, mainly for some older browsers do not recognize viewport, such as Blackberry -> 
    <meta name = "HandheldFriendly" Content = "to true"  /> 
    <-! add meta tags in the head tag, and set the value of the viewport-fit = cover -> 
    < meta name = "the viewport" 
        Content = "width = device- width, Initial-Scale = 1.0, 1.0 = maximum-Scale, Minimum-Scale = 1.0, the viewport = Cover-Fit "  /> 
    <-! open safe-area-inset-bottom properties -> 
    < Van-Number-Keyboard --Area-The inset from the Safe bottom /> 
    <-! settings handheld device support -> 
    < Meta Content = "yes" name = "the 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(); // lowercase 
                } 
            } 
        }, 
        Created () { 

        }, 
        Mounted () { 

        }, 
        Destroyed () { 

        }, 
        Filters: { 

        } 
    }) 
</ Script > 

</ HTML >
Guess you like
