初始Vue模板语法-插值

一、模板语法

Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。

二、插值

1.{{}}语法

<body>
    <div  id="app">
        {{msg}}</br>
    </div>
    <script type="text/javascript">
        var vrm=new Vue({
            el:"#app",
            data:{
                msg:"hi vue"
            }
        });
    </script>
</body>

遇见细节错误:
在这里插入图片描述
此处声明的Vue对象必须为大写,否则会出现不必要错误
在这里插入图片描述

2.v-once指令使用

<body>
    <div  id="app">
        {{msg}}</br>
        <span v-once>{{count}}</span>
    </div>
    <script type="text/javascript">
        var vrm=new Vue({
            el:"#app",
            data:{
                msg:"hi vue",
                count:"hi vue"
            }
        });
        vrm.count="hi vue.js"; //此时未显示 hi vue.js
    </script>
</body>

在这里插入图片描述

3.v-html指令语法

<body>
    <div id="div1" v-html="rawHtml"></div>
    <script type="text/javascript">
        vrm1=new Vue({
            el:"#div1",
            data:{
                rawHtml:'<span style="color: red">This should be red.</span>'
            }
        })
</script>
</body>

在这里插入图片描述

4.v-bind 指令语法

语法:v-bind:属性类型=“属性值” 绑定属性

 <div id="div2" v-bind:class="bindDiv">这是通过b-bind绑定属性改变颜色</div>
 <script type="text/javascript">
        vrm2=new Vue({
            el:"#div2",
            data:{
                bindDiv:'red'
            }
        });
</script>
<style type="text/css">
    .red{color:#800080;}
    .yellow{color:yellow;}
</style>

此语法可动态绑定属性并赋予属性值,在需要的情况下可改变

5.使用Javascript表达式

 <div id="div3">
        {{ number + 1 }}</br>
        {{ ok ? 'YES' : 'NO' }}</br>
        {{ message.split('').reverse().join('') }}</br>
 </div>
<script type="text/javascript">
        vrm3=new Vue({
            el:'#div3',
            data:{
                number:10,
                ok:'true',
                message:'Vue'
            }
        });
</script>   

在这里插入图片描述

三、参考文档

官方文档:https://cn.vuejs.org/v2/guide/syntax.html

相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页