学习vue的第二天 ----模块语法插值

前言：我们为什么要学习。我想最开始的答案，一定是从我们出生开始，就已经注定了学习。从我们第一次进入学校，幼儿园开始，我们就开始了被动的学习，同时，这也是我们第一次开始接触的到人类的知识。

是什么驱动着人类学习。是生存的压力。纵观古今，逼迫生物开始改变现有状态的方式就是生存的压力，每一次生物的行为改变，我们都可以将它定义成学习。或好或坏。环境是最好的老师。我们都听说过，社会是千奇百怪的。你永远不会知道你在社会上会遇到怎样的人，他的三观，他的信条，你们每一次的冲突都是由于对世界的认知对于事态的看法不同导致的。要想处理好这些事情，就需要我们自己改变，而每一次的改变都可以被定义成学习，所以学习，在生活中无处不在。人类目前对于学习对于万物，对于意义的定义都太过简单，同样，学习的定义也过于简陋。学习不应该是被动的，而应该是主动的。什么是追求。一生的接近全力想要得到，想要到达的就是追求。它可以是一个境界，一个人，一件事。每个人的追求都不尽相同，而我的就是知识，不限类型，不限地域，不限高低。言尽于此，诸公共勉。

vue中 模块语法---第一个插值用法  “指令” 我们可以简单的列举两个

第一个：v-once

请看代码

<div id="app" v-once>
       {{a}}
   </div>

这里不难看出，v-once在html中作为了一个标签使用了。

而它的作用则是，将{{ a }}内的 a 的内容给限制住了，作用可以参考在实例中给出的Object.freeze();例如： vm.$data.a = ''adc"; 此语句将不会发生任何作用。

第二个 ---- v-html

请看代码如下

<div id="app" v-html>
       <p v-html="rawHtml"></p>
   </div>

　　由于双大括号只能够解释文本，所以，我们需要一个可以直接插入html标签的实例。在这里 v-html 可以直接代入 rawHtml 元素

我的rawHtml在js代码块中其实是一个<span>标签，并且还是一个可以将内容进行样式设计的标签，代码如下

var data = {
    rawHtml: '<span style="color : red">After using v-html, this sentans supose towards to red color</span>'
}
var vm = new Vue({
    el: '#app',
    data:data    
})

总结：v-html的作用其实就是可以将我们放在data这个自命名对象中的元素（rawHtml）（如果是一段有效的html代码）解释出来，得到我们想要得到的效果。

第三个 --- v-bind

请看代码

<div id="app">
       <div v-bind:class="color">通过v-bind能够给予dom节点属性，我们通过属性将这段字变为红色</div>
   </div>

v-bind 的作用是能够将属性给予所在的html节点，这就给了我们通过js代码来操纵 dom 节点的机会，例如：

var data = {
    color: 'red'
}
var vm = new Vue({
    el: '#app',
    data:data    
})

.red{
    color: red;
}

在这里我们将class从color改为了red，通过css，我们把div 的color改为了红色

总结：v-bind的作用不仅仅可以赋值class还能是id，我们可以通过动态修改id来动态实现不同的效果

后面还有许多的指令 比如 v-text、v-for、v-slot...等等的，可以自己去看vue官网 的API文档

网址 --->https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4

同时，vue还支持使用JavaScript的语法，在双大括号中，能够简单解析一些运算。比如常见的加减乘除，还有三元运算。

例如：加法

<div id="app">
      {{a * 6}}
   </div>

var data = {
    a : 1,
}
var vm = new Vue({
    el: '#app',
    data:data    
})

得到的结果是 -- 6 。

例如三元运算

<div id="app">
      {{ok?'yes':'no'}}
   </div>

var data = {
    ok: 100 == 99,
}
var vm = new Vue({
    el: '#app',
    data:data    
})

这里我们ok代表的是一个比较的语句 100是不是等于99，结果显而易见 false，那么输出的就是no。

为了更加的直观，我们可以直接修改ok的值为true，输出的自然为 yes

var data = {
    ok: 'yes',
}
var vm = new Vue({
    el: '#app',
    data:data    
})

为了更加直观得了解到vue对JavaScript原生代码的支持，请看代码

<div id="app">
      {{meg.split('').reverse().join('')}}
   </div>

var data = {
    meg: "Hello Vue",
}
var vm = new Vue({
    el: '#app',
    data:data    
})

不难看出，在 div 里双阔号内的代码为 JS 原生方法，他的作用是将meg这个字符串拆分成一个个字母或者符号的数组，再将数组颠倒顺序，最后拼成一个字符串。

总结：vue对于JavaScript还是很支持的，这给我们提供了很大的可操控性。

最后，加油！！！至人居若死，动若械，我也一定可以！