Vue介绍以及模板语法-插值

2019-05-16 23:56:18来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

1.Vue的介绍

     Vue是一套用于构建用户界面的渐进式框架。

      注意:Vue是一个框架,相对于jq库来说,是由本质的区别的:https://cn.vuejs.org/

      Vue不支持IE8及一下版本,因为Vue使用了IE8无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

1.1 Vue实例对象

      每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例 开始的:

      

<body>
    <div id="div">
        {{user_name}}
    </div>
</body>
<script src="./vue.js"></script>
<script>
    var app = new Vue({
        el:'#div',  // 设置要操作的元素
        // 要替换的额数据
        data:{
            user_name:' holle word' 
        }
    })
</script>

2.模板语法-插值

      使用{{}}的形式在HTML中获取实例对象对象中data的属性值;这种使用{{}}获取值得方式,叫做插值或插值表达式;

2.1文本

<body>
    <div id="div">
       文本插值 {{html_str}}
    </div>
</body>
<script>
    var app = new Vue({
        el:'#div',
        data:{
            html_str:'<h2>这是文本<h2>'
        }
    })
</script>

2.2使用JavaScript表达式

<body>
    <div id="div" >
       {{ tt > 9 ? '大' : '小'}}
       {{ dd() }}
    </div>
</body>
<script>
    var app = new Vue({
        el:'#div',
        data:{
            tt:6,
            dd:function(){return 1+2}
        }
    })
</script>

 


原文链接:https://www.cnblogs.com/shineguang/p/10872933.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:layDate 日期与时间组件 入门

下一篇:D3.js 对角线生成器 (V3版本)