码迷,mamicode.com
首页 > 其他好文 > 详细

vue模板

时间:2017-11-02 11:32:24      阅读:313      评论:0      收藏:0      [点我收藏+]

标签:vue   v-cloak   v-once   

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>模板</title>

    </head>

    <script type="text/javascript" src="js/vue.js" ></script>

    <script>

        window.onload = function(){

            //配置是否允许检查代码,方便调试,生产环境中设置为false

            Vue.config.devtools = true;  //检查代码

            Vue.config.productioinTip = false;  //有强迫症的,可以关掉生产中的提示信息

            let vm = new Vue({

                el: "#div1",

                data:{

                    msg:‘hello world!!!‘

                },

                created:function(){

                    alert(1111);

                }

            });

        }

    </script>

    <style type="text/css">

        [v-cloak]{

            display: none;

        }

    </style>

    <body>

        <div id="div1">

            <input type="text" v-model="msg">

            <h1>aaaa<span v-cloak>{{msg}}</span></h1>   <!-- 防止msg-->   

            <h1 v-text="msg"></h1>      <!--v-text  不能解析html代码-->

            <h1 v-html="msg"></h1>      <!--v-html 可以解析html代码-->

            <h2 v-once>{{msg}}</h2>     <!--只绑定一次,双向绑定改变不了-->

            <h3 v-pre>{{msg}}</h3>      <!--当需要输出{{}}时,可以不编译{{}}符号,以文本形式输出-->

        </div>

    </body>

</html>


本文出自 “Note” 博客,转载请与作者联系!

vue模板

标签:vue   v-cloak   v-once   

原文地址:http://3miao.blog.51cto.com/9661385/1978256

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!