Vue 模板语法

项目前导 学习笔记

一、文本

        在 html 中通过 {{}}（双大括号）中可以把 Vue 对象中的数据插入到网页中，Vue 对象一般是有后端提供给前端的。并且只要 Vue 对象上对应的值发生改变了，那么 html 中双大括号中的值也会立马改变。

1.1、显示变量

	<div id="app">
	    <p>{{username}}</p>
	    <button v-on:click="change">点击修改</button>
	</div>
	<script>
	    let vm = new Vue({
	        el: "#app",
	        data: {
	            "username": "逻辑教育"
	        },
	        methods: {
	            change: function(){
	                this.username = 'China';
	            }
	        }
	    });
	</script>

1.2、v-once

        如果在 html 的 {{}} 中，第一次渲染完成后（第一次赋值完成），不想要跟着后期数据的更改而更改，那么可以使用 v-once 指令来实现。

	<p v-once>{{username}}</p>

1.3、显示原生的 HTML

        有时候我们的 Vue 对象中，或者是后台返回给我们一个段 原生的 html 代码 ，我们需要渲染出来，那么如果直接通过 {{}} 渲染，会把这个 html 代码当做字符串。这时候我们就可以通过 v-html 指令来实现。

	<div id="app">
	    <div v-html="code"></div>
	    <p v-html="code"></p>
	</div>
	<script>
	    let vm = new Vue({
	        el: "#app",
	        data: {
	            "code": "<a href='https://www.baidu.com/'>百度一下，你就知道！</a>"
	        }
	    });
	</script>

---

二、属性绑定

2.1、属性绑定

        如果我们想要在 html 元素的属性上绑定我们 Vue 对象中的变量，那么需要通过 v-bind 来实现。

• 不用 v-bind

	<div id="app">
	    <img src="{{imgSrc}}">你好，世界
	</div>
	<script>
	    let vm = new Vue({
	        el: "#app",
	        data: {
	            "imgSrc": "https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1-2885cdb57f.png"
        },
	    });
	</script>

• 需要 v-bind

	<div id="app">
	    <img v-bind:src="imgSrc">你好，世界
	    <img :src="imgSrc">这两个是一样的
	</div>

2.2、属性绑定 Class

当 html 代码需要用到 class 设置的样式时，vue 对象有多种方式实现。

• 单个 class

    <style>
		.title {
		    font-size: 24px;
		    color: red;
		}
    </style>
    
	<div id="app">
        <p v-bind:class="class1">Hello World</p>
    </div>
    
	<script>
	    let vm = new Vue({
	        el: "#app",
	        data: {
	            "class1": "title"
	        }
	    });
	</script>

• 多个 class

    <style>
		.title {
		    font-size: 24px;
		    color: red;
		}
        .main-title {
            font-weight: 800;
        }
    </style>
    
	<div id="app">
        <p v-bind:class="[class1,class2]">有多个 class，用列表实现</p>
        <p v-bind:class="class3">用一个 vue 对象传递多个 class</p>

        <!--    因为 class 名有 - 符合, 所有要用引号引起来（或者驼峰命名）   -->
        <p v-bind:class="{title:class4, 'main-title':class5}">用对象实现（用引号）, 通过vue对象控制class是否使用</p>
        <p v-bind:class="{title:class4, mainTitle:class5}">用对象实现（驼峰命名）, 通过vue对象控制class是否使用</p>

    </div>
    
	<script>
	    let vm = new Vue({
	        el: "#app",
	        data: {
	        	"class1": "title",
	            "class2": "main-title",
	            "class3": "title main-title",
	            "class4": true,
	            "class5": false
	        }
	    });
	</script>

2.3、属性绑定 Style

• 用对象的方式

	<div id="app">
	    <pv-bind:style="{'background-color': pBgColor}">绑定style（引号解决）</p>
	    <p v-bind:style="{backgroundColor: pBgColor}">绑定style（驼峰命名解决）</p>
	    <p :style="pstyle">多个style写在一个对象里</p>
	</div>

	<script>
	    let vm = new Vue({
	        el: "#app",
	        data: {
	        	pBgColor: "yellow",
	            pstyle: {
	                'background-color': 'red',
	                'font-size': '20px'
	            }
	        }
	    });
	</script>

• 用数组的方式

	<div id="app">
	    <p :style="[listyle1,listyle2]">通过数组来使用多个style</p>
	</div>

	<script>
	    let vm = new Vue({
	        el: "#app",
	        data: {
	            listyle1: {
	                'background-color': 'pink',
	            },
	            listyle2: {
	                'font-size': '20px'
	            }
	        }
	    });
	</script>

---

三、使用 JavaScript 表达式

前面使用了 v-bind 的 html 属性，或者使用了 {{}} 的文本，我们还可以执行一个 JavaScript 表达式。

注意，只能是 JavaScript 表达式，不能是语句，比如 var a=1;a=2; 这样的是 js 语句，不是表达式了。

	<div id="app">
        <!--  字符串切割  列表反转  转为字符串  -->
        <p :style="{color:scolor? 'red':'yellow'}">{{username.split(" ").reverse().join(" ")}}</p>
    </div>

	<script>
	    new Vue({
	        el: "#app",
	        data: {
	            username: "Hello World!",
	            scolor: true
	        }
	    });
	</script>