夜光带你走进Vue.js（五）擅长的领域

夜光序言：

 

 

荒原上的光线以肉眼可见的速度，向西移动，浅黄葱绿交织的的草原被分成界限分明的阴阳两块。但很快阴的一面占了上风。太阳把最后一点光线都沉入水中，黑夜接管了大地,清晰变成混沌，希望堕落成空虚.风从世界的尽头刮过来，以吹枯拉朽的气势，宣告它在这荒岛的主权。

 

 

 

 

 

 

 

正文：Vue.js 模板语法~~~

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

 

---

文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：

文本插值

文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：

文本插值

<div id="app"> <p>{{ message }}</p> </div>

 

---

 

 

属性

HTML 属性中的值应使用 v-bind 指令。

以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

 

 

 

 

<template>
  <div id="content">
       {{msg}}
    <div v-html="test1"></div>  <!--夜光：也可以这样传值-->
    <label for="r1">修改颜色</label>
    <input type="checkbox" v-model="use" id="r1">
    <hr>
    <br>
    <div v-bind:class="'class1',use">
        夜光：v-bind：class指令
    </div>

  </div>
</template>
<script>
  export default {
    data(){
      return{
        msg:'商品详情',
        test1: '传值',
        use: false
      }

    },
    mounted() {
      //获取get传值
      console.log(this.$route.query);
    }
  }
</script>