vue模板语法以及简单应用---按钮切换

介绍：

vue使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有 Vue的模板都是合法的 HTML，所以能被遵循规范的浏览器和HTML解析器解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接编写渲染函数及render，使用可选的 JSX 语法（react采用的就是jsx语法）。

1、文本插值

  <div id="app">
    {{msg+'xixi'}}
  </div>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello vue',
      },
      methods: {}
    })
  </script>

结果是：hello vuexixi 

{{msg}} 用双大括号将data数据模型中的字段渲染到页面中
{{ msg + 'xixi' }} 双大括号内部可以放js表达式

2、指令

v-bind：动态绑定元素上的属性    v-bind:title 可以简写成 :title="title"

v-html：绑定html代码片段，有格式的内容转成相应html代码片段 

v-on：动态绑定事件     v-on:click="clickHandler"可以简写成@click="clickHandler"

      <div id="app">
        {{msg}}<br>
        //绑定点击事件
        <button v-on:click="clickHandler">修改数据</button>
        <p v-bind:title="title">v-bind指令</p>
        <div class="content" v-html="content"></div>
      </div>
      <script>
        let vm = new Vue({
          el: '#app',
          data: {
            msg: 'hello vue',
            title: '我是P标签',
            content: '<h3>我是3级标题</h3>'
          },
          methods: {
            clickHandler() {
              this.msg = '你好 vue'
            }
          }
        })
      </script>

 点击修改数据后hello vue变成你好 vue

  

3、条件渲染

v-if     v-else

v-show

 两者区别如下：

1>v-if v-else 通过控制dom节点的渲染，实现显示与隐藏

2>v-show 通过控制dom节点css样式中display，来实现显示与隐藏

频繁的显示与隐藏某个组件时，用v-show较好；v-if会频繁渲染dom数，占用资源，影响代码运行效率。

4、列表渲染

v-for：用于将列表数据进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<ul>
 <li v-for="item in items" :key="item.message"> {{ item.message }} </li>
</ul>

当items为数组的时候，item为数组元素，index表示索引

<ul> 
	<li v-for=“(item,index) in items" :key="item.message"> {{ item.message }} </li> 
</ul>

 当obj为对象的时候，value为属性值，key为属性名,index为索引

<ul> 
	<li v-for= "(value,key,index) in obj" :key="value"> {{ value}} </li> 
</ul>

5、class绑定

操作元素的class列表和内联样式是数据绑定的一个常见需求，因为它们都是attribute，所以我们可以用v-bind处理它们。

6、style绑定

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名。

7、模板语法简单应用（按钮切换）

  <div id="app">
    //2、用三目运算符判断样式  当确定isActive是按钮1/2/3时，就将acStyle的样式给当前点击的按钮，否则就是默认样式
    <button :style="isAcive=='按钮1' ? acStyle : ''" @click="clickHandler">按钮1</button>
    <button :style="isAcive=='按钮2' ? acStyle : ''" @click="clickHandler">按钮2</button>
    <button :style="isAcive=='按钮3' ? acStyle : ''" @click="clickHandler">按钮3</button>
  </div>
  <script>
    //vue实例
    let vm = new Vue({
      el: '#app',
      data: {
        isAcive: '',
        acStyle: {
          background: 'black',
          color: 'white'
        }
      },
      methods: {
        clickHandler(event) {
          //1、判断当前点击的isActive是按钮几
          this.isAcive = event.target.innerText
        }
      }
    })
  </script>

 target 属性获取最初发生事件的元素，用它可以获取button按钮点击的那个目标节点，之后可以用innerText 属性获取button按钮的内容。