Vue学习笔记(2)--插值基本语法、动态绑定、计算属性

一、插值基本语法

Mustache（胡须，指双大括号）

v-once

• 不让界面随意的因为后面的改变而改变

• 该指令表示元素和组件只会渲染一次，不会随着数据的改变而改变。后面不跟表达式

• <h2 v-once>
    {{message}}
  h2>
  

v-html

• 某些情况下从服务器返回的数据本身是一个html代码，若直接用{{}}进行输出，会将html代码一起输出。如果希望按照html格式进行解析并输出对应内容，就该用到此方法。

<div id="app">
			<h2 v-html="url">h2>
		div>
		
		<script src="vue.js">script>
			<script>
		    const app = new Vue({
		    el: '#app',
		    data: {
			  url:'CCTV'
		    }
		  })
		script>

• 这样就解析出了：CCTV 。

v-text

• 直接显示message里的内容，但是h2里若再多写文本则会被message覆盖。

<h2 v-text="message">h2>

v-pre

• v-pre将会跳过这个元素和他的子元素的编译过程，用于显示原本的Mustache语法。

<h2 v-pre>
  {{message}}
h2>

//网页上显示的
{{message}}

v-cloak

• 某些情况下加载慢卡住还没到script时可以用v-cloak在解析前先显示，等解析完了会自动删除该属性。

<style>
			[v-cloak]{
				display: none;
			}
style>

<div id="app" v-cloak>
			<h2>{{message}}h2>
		div>
		
		<script src="vue.js">script>
			<script>
				//在Vue解析前div是有一个v-cloak属性
				//在Vue解析后v-cloak属性被删除
		    const app = new Vue({
		    el: '#app',
		    data: {
				message:'hello'
		    }
		  })
		script>

二、动态绑定

v-bind

• 作用：动态绑定数据
• 语法糖：：

<div id="app" v-cloak>
			<img v-bind:src="imgURL" alt="">
  		<a v-bind:href="aHref">超链接a>
  		//语法糖写法
  		<img :src="imgURL" alt="">
  		<a :href="aHref">超链接a>
		div>
		
		<script src="vue.js">script>
			<script>
		    const app = new Vue({
		    el: '#app',
		    data: {
					imgURL:'地址',
          aHref:'地址'
		    }
		  })
		script>

动态绑定class

（对象语法）

• 对象语法的含义：class后面跟的是一个对象

• 以下用法

  一、<h2 :class="{active: isActive}">Helloh2>
  二、<h2 :class="{active: isActive, line: isLine}">Helloh2>
  三、<h2 class="默认属性" v-bind:class="{active: isActive, line: isLine}">Helloh2>
  

实例：

<style>
			.active{
				color: red;
			}
		style>

<div id="app">
			
			<h2 class="默认属性" v-bind:class="{active: isActive, line: isLine}">{{message}}h2>
			<button v-on:click="btnClick()">按钮button>
		div>
		
		<script src="vue.js">script>
			<script>
		    const app = new Vue({
		    el: '#app',
		    data: {
					message: 'hello',
					isActive: true,
					isLine: true,
		    },
				methods:{
					btnClick:function(){
						this.isActive = !this.isActive
					}
				}
		  })
		script>

（数组语法）

• class后面跟着数组

• 用法如下：

  一、<h2 :class="['active']">Helloh2>
  二、<h2 :class="['active','line']">Helloh2>
  三、<h2 class="默认属性" v-bind:class="['active','line']">Helloh2>
  

动态绑定style

• 对象语法和数组语法

• 对象:style后跟一个对象类型

  
  <h2 :style="{fontSize: '50px'}">Helloh2>
  
  
  <h2 :style="{fontSize: finalSize}">Helloh2>
  <h2 :style="{fontSize: finalSize2 + 'px'}">Helloh2>
  data{
      finalSize: '100px',
  		finalSize2: 100
      }
  

• 数组：style后跟数组类型

  <div :style="[baseStyle, baseStyle2]">div>
  data: {
  	baseStlye: {backgroundColor: 'red'},
  	baseStyle2: {fontSize: '100px'},
  }
  

三、计算属性

computed:用于更直观更简洁的展示数据

基本使用：

<div id="app">
			<h2>{{fullName}}h2>
		div>
		
		<script src="vue.js">script>
			<script>
		    const app = new Vue({
		    el: '#app',
		    data: {
					fistName: 'huang',
					lastName: 'ming'
		    },
				computed:{
					fullName:function(){
						return this.fistName + ' ' + this.lastName
					}
				}
		  })
		script>

或者用来计算数字总和

<h2>总价格：{{totalPrice}}h2>

<script>
		    const app = new Vue({
		    el: '#app',
		    data: {
					books:[
						{id: 110, name: 'x1', price: 100},
						{id: 111, name: 'x2', price: 123},
						{id: 112, name: 'x3', price: 14},
						{id: 113, name: 'x4', price: 66},
					]
		    },
				computed:{
					totalPrice: function(){
						let result = 0;
						for (let i = 0;i < this.books.length;i++) {
							result += this.books[i].price
						}
						return result;
					}
				}
		  })
		script>

主要参考这个教学视频学习：https://www.bilibili.com/video/BV15741177Eh?p=1