当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Vue介绍以及模板语法-插值

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

2019年05月16日  | 移动技术网IT编程  | 我要评论

1.vue的介绍

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

      注意：vue是一个框架，相对于jq库来说，是由本质的区别的：

      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>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网