Vue 1 基础语法

模板语法

1. 基本应用

打开中文Vue官网 ：https://cn.vuejs.org/ ，点击快速上手入参考文档，有时间可以阅读。

本次 介绍的模板语法，打开新建的vue项目，src 文件夹下介绍如图：

打开HelloWorld.vue , 进行编辑

要想实现 动态数据绑定 和 DOM 监听，就需要将前端HTML中对应的数据使用 双花括号 {{}} 进行修饰，内部 的值要与 JavaScript脚本中的 模板对应，实例代码如下：

<template>
  <div class="hello">
    <h1> DS01 Vue </h1>
     
    <h2> {{mes_ds}}  </h2>
    </div>
</template>


<script>
export default {
  name: 'myDemo',
  data(){
    return{
      mes_ds:"模板语法 data函数下添加return{} 实现 数据数据绑定 与 DOM监听"
    }

  }
}
</script>

显然，script脚本中的 data函数中使用return返回的值通过 mes_ds 在 template 中使用，这可以当做标准语法模板，也是一种规范。但是 双花括号 只能输出简单的文本，要想输出相关的原始HTML，要使用 v-html ,当要显示 a标签中的内容，需要在template 中引入 v-html 。

2.属性 Attribute也有可能发生动态变化 ，使用 v-bind: 或者 : 实现相关功能：

<template>
  <div class="hello">
    <h1> DS01 Vue </h1>
     
    <h2> {{mes_ds}}  </h2>
    <h2> {{raw_html}}</h2>
  
    <div v-html="raw_html"></div>
    <div v-bind:id="dynamicId"> Ds v-bind: ||  ":" </div>
    <div  :id="dynamicId"> Ds    ":" </div>
    <h2>{{num+50}}</h2>
    <h2>{{flag?"vue-true":"vue-false"}}</h2>
    </div>
</template>


<script>
export default {
  name: 'myDemo',
  data(){
    return{
      mes_ds:"模板语法 数据数据绑定 与 DOM监听",
      raw_html:"<a href='https://blog.csdn.net'>模板语法</a>",
      dynamicId:"1001",
      num:100,
      flag:false
    }

  }
}
</script>

注意;每个绑定仅支持单一表达式，也就是一段能够被求值的 JavaScript 代码。支持三目运算。

3.条件渲染（v-if）

根据条件不同渲染不同内容,v-if 指令会基于表达式 "seen" 的值的真假来移除/插入该 元素,v-else与其相反

 <p v-if:="seen"> Can you see me ? </p>
    <p v-else> see another lable </p>

v-show 也可以实现相关标签 显示/隐藏 功能。v-if 是真正的条件渲染，当隐藏节点时，它会直接删除相关内容，它是惰性的，有更高的切换开销。

4 .列表渲染 v-for

列表展示方式比较常见 ，使用v-for 可以将一个数组渲染为列表。需要使用item in items 的方式。