Vue模板语法

Vue模板模板语法

模板语法的概览如下：

        1.插值表达式

<div id="app">
        <!-- 插值表达式  用于把内容填充到标签里面 因为Vue库文件内部会进行编译过程
        作用：1. 将数据填充到HTML标签中
              2. 插值表达式支持基本的计算操作-->
        <div>{{msg}}</div>  
        <!-- 插值表达式演示计算 -->
        <div>{{1 + 2}}</div>
        <!-- 插值表达式演示字符串拼接 -->
        <div>{{msg + '----' + 123}}</div>
    </div>
    <script type="text/javascript" src="/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#app', // 选择ID标签 （元素的载位置） 把数据关联到页面的某个位置
            data:{
                msg:'holle vue' // 填充的内容 （模型数据  值是一个对象）
            }
        });
    </script>

        2.指令

    <div id="app">
        <div v-cloak>{{msg}}</div>
        <!-- v-text没有闪动问题 -->
        <div v-text='msg'></div>
        <!-- v-html有局限性  有危险 因为容易导致xss攻击 -->
        <div v-html='msg1'></div>
        <!-- 显示的是{{msg}} -->
        <div v-pre>{{msg}}</div>
        <!-- 引用场景：如果显示的信息后续不需要再修改 可以使用v-once  因为这样可以提高性能 -->
        <div v-once>{{info}}</div>
    </div>
    <!-- 
        模板概览
        1.插值表达式


        2.指令
        自定义属性就是指令
        指令的格式都是以v-开始 如（v-cloak）

        v-cloak指令用法
        HTML里面存在闪动问题   解决：
        借助v-cloak指令来解决
        1.提供样式
        [v-cloak] {
            display:none;
        }
        2.在差值表达式所在的标签中添加v-cloak指令
        原理：通过样式隐藏内容 然后在内存中值得替换 替换完后再显示最终的结果

        v-text填充文本：想必插值表达式更简洁
        v-html填充HTML片段：1.存在安全问题  2.本网站内部数据可以使用 第三方数据不可用
        v-pre填充原始信息：显示原始信息 跳过编译过程（分析编译过程）
        v-once只编译一次：显示内容后不再具有响应任何功能

     -->
     <script type="text/javascript" src="/vue.js"></script>
     <script type="text/javascript">
         var vm = new Vue({
             el:'#app', // 选择ID标签 （元素的载位置） 把数据关联到页面的某个位置
             data:{
                 msg:'holle vue', // 填充的内容 （模型数据  值是一个对象）
                 msg1:'<h1>你好</h1>',
                 info:'111'
             }
         });
     </script>

        3.事件绑定

        4.属性绑定

        5.样式绑定

        6.分支循环结构