Vue.js 学习笔记（二）vue模板语法-CFANZ编程社区

一、模板语法

Vue模板语法实现前端渲染，前端渲染即把数据填充到html标签中。
数据（来自服务器）+模板（html标签）=前端渲染（产物是静态html内容）

二、插值

1. 文本插值

用双大括号插入文本，数据可变，解释为普通文本

<div id="app">
    <!-- 会与实例中的【data】中的属性绑定在一起，并且数据实现同步-->
    <h1>{{message}}</h1>
</div></body>
<script>
    // Vue所做的工作也就是把数据填充把页面的标签里面。
    var vm = new Vue({
        el: "#app",
    // data模型数据，值是一个对象。
    data: {
        message: "I LOVE YOU"
    }
    })
</script>

用v-once指令插值，数据无法变化

<body>
<div id="app">
    <!-- v-once只编译一次。显式内容之后不再具有响应式功能。 -->
    <!-- v-once的应用场景，如果显式的信息后续不需要再修改，可以使用v-once指令，可以可以提高性能，因为Vue就不需要去监听它的变化了。 -->
    <h1 v-once>{{message}}</h1>
</div></body>
<script>
    // Vue所做的工作也就是把数据填充把页面的标签里面。
    var vm = new Vue({
        el: "#app",
    // data模型数据，值是一个对象。
    data: {
        message: "I LOVE YOU"
    }
    })
</script>

2. HTML插值

v-html，将数据解释为HTML代码

<body>
<div id="app">
    <!-- 内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译，在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击 -->
    <h1 v-html="msg"></h1>
</div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "<span style='color:blue'>BLUE</span>"//可以使用v-html标签展示html代码。
        }
    })
</script>

翻译后的HTML代码
在这里插入图片描述

3. 属性插值

v-bind指令，可以缩写成：

可以动态绑定在src、href上

<body>
<div id="app">
    <!--若无v-bind，则imgUrl就不会经过data的中转，而是直接翻译为imgUrl-->
    <img v-bind:src="imgUrl" alt=""/>
    <a :href="searchUrl">百度一下</a>
</div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            imgUrl:'https://img-blog.csdnimg.cn/aff28bae46f3435788ec46333a74e1dc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aWl5aaZ5peg56m5,size_20,color_FFFFFF,t_70,g_se,x_16',
            searchUrl:'http://www.baidu.com'
    }
    })
</script>

绑定class、style

<body>
<div id="app">
    <!--通过:class更新的类名和本身存在的类可以共存-->
    <p :class="{fontCol:isName,setBack:!isAge}" class="weight">{{name}}</p>
    <i :class="addClass">{{name}}真好看！</i>
</div>
<script>
    var vm = new Vue({
        el:"#app",
    // 条件比较少
    data:{
        isName:false,
　　　　isAge:false,
　　　　name:"功守道"
    },
    // 当v-bind：class的表达式过长或者逻辑复杂（一般当条件多于两个的时候)，可以考虑采用计算属性，返回一个对象
    computed:{
        addClass:function(){
            return {
                checked:this.isName&&!this.isAge
            }
        }
    }
    })
</script>
</body>

翻译后
在这里插入图片描述

<body>
<div id="app">
	<!--这样子写长样式不方便，故一般写在data中-->
    <div :style="{'color': color,'fontSize':fontSize + 'px'}">修饰文本</div>
</div>
<script>
    var vm= new Vue({
        el: "#app",
        data: {
            color: 'red',
            fontSize: 24
        }
    })
</script>
</body>

把样式放在data中

<body>
<div id="app">
    <div :style="styles">修饰文本</div>
</div>
<script>
    var vm= new Vue({
        el: "#app",
        data: {
            styles: {
                color: 'red',
                fontSize: 14+'px'
            }
        }
    })
</script>
</body>

绑定多个style

<body>
<div id="app">
    <!--绑定多个样式，最终会将多个样式结合起来-->
    <div :style="[styleA,styleB]">文本</div>
</div>
<script>
    var vm=new Vue({
        el: "#app",
        data: {
            styleA:{
                color: 'red',
                fontSize: 24 + 'px'
            },
            styleB: {
                width: 100 + 'px',
                border: 1 + 'px ' + 'black ' + 'solid'
            }
        }
    })
</script>
</body>

4. 插值中使用JavaScript表达式

注意使用的是表达式，而不是语句
语句：{{ var a=1 }}
表达式：{{ number+1 }}

<body>
<div id="app">
    <p>{{ number + 1 }}</p>
    <hr>
    <p>{{msg + '~~~~~'}}</p>
    <hr>
    <p>{{flag ? '条件为真' : '条件为假'}}</p>
    <hr>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'Hello beixi!',
            flag:true,
            number:2
        }
    })
</script>
</body>

翻译后
在这里插入图片描述

三、指令

参数
例如：v-bind:href=“url”
v-bind是指令，href是参数，“url”是数据
动态参数
例如：v-bind:[attributeName]=‘url’
若data中存在属性attributeName，其值为‘href’，则原式等价于v-bind:href
修饰符
以“.”指明的特殊后缀
v-on:submit.prevent=“onSubmit”
.prevent即修饰符，此修饰符告诉v-on指令对于触发的事件调用event.preventDefault()