Vue初上手

        一个“好”的软件系统包括很多方面，但是界面的友好性是第一步，因为它给用户一个直观的印象。在前一次博客介绍的vue的安装配置基础上，我想对vue的一些简单操作做一总结。以下是基于实操得来的。以下内容在visual stdio code里面的终端运行，在谷歌浏览器中打开界面。

1.开始运行

在我们开始写界面的时候，一般是接着已有的工作继续做，但当你重启Visual Stdio Code程序后，会发现前面写的localhost:8080/页面打不开，这是因为你没有运行项目，假设原来的项目名为vue-demo,运行下面命令即可：

这时候刷新网站就可以看到了。

2.模板语法

        Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。

  模板语法主要包括简单的普通文本打印，变量文本打印，以及超链接。以下是举例。

（1）普通文本渲染

输入如下：

效果如下：

这个很简单就能实现文本打印，其中h3与h5主要是指字号不同，h1>h3。

（2）双括号表示

第二种就是用变量来打印所需要的文本，用双大括号{{xxx}}表示。

效果如下：

（3）超链接

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。其中v-html是一种特殊的格式，用来置超链接，

示例如下：

效果如下：

点击“北站”按钮，即可跳转到对应网址界面。

3.条件渲染

        条件渲染和if else语句的类似，当值取true或者false的时候输出不同的结果。例如下面语句，flag取true，所有条件为真对应下的语句全部输出。

        v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染，你也可以使用 v-else 为 v-if 添加一个“else 区块”。需要注意的是:一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别。

示例如下：

效果如下：

4.列表渲染

        我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名,在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。我们也可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。

例如下图中的item.title。

效果如下：

上述的代码在Visual stdio code上运行，仅仅是一些简单的应用，特别注意return语句里面之间的逗号分隔开，不然容易报错。关于超链接，不建议大量使用，否则容易被攻击。后续还会继续学习，敬请期待！

源代码：

<template>
  <div class="hello">
    <h3>大凡的腿毛</h3>
    <p>{{ message }}</p>
    <div v-html="rawHTML"></div>
    <div v-bind:id="dynamicId"></div>
    <p>{{ num+10 }}</p>
    <div v-if="flag">
      <h5>孙猴子 啥猴子，我会在 就看到好看 举办的</h5>
      <p>傻猴子</p>
    </div>
    <ul>
      <li v-for="item in newsList">
        {{item.title}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      message:"bshchjbh",
      rawHTML:"<a href='http://www.itbaizhan.com'>百战</a>",//第6行
      dynamicId:10001,
      num:10,
      flag:true,
      newsList:[
        {
          id:1001,
          title:"进入新闻1"
        },
        {
          id:1002,
          title:"进入新闻2"
        },
        {
          id:1003,
          title:"进入新闻3"
        },

      ]
    }
  }
}
</script>