Vue.js前端框架系统学习（3）——Vue.js模版

写在前面，今天来学习一下vue.js的模版，实现基本的将文本渲染到界面。

VS Code设置vue模版

我们首先利用Vue CLI脚手架搭建一个最简单的单页应用。

win+R打开cmd，输入

vue ui

进到DashBoard界面之后创建项目，之后可以通过cmd，执行：

npm run serve //运行项目

在此之前，我们需要给vue配置一个方便快捷的模版，从而解决我们每次都要重新写重复的模版代码的问题。

从文件 =>首选项=>用户片段

在上方文本框中输入vue,选择vue.json打开进行配置。

将其中代码删除，并复制一下代码：

{
  "Print to console": {
    "prefix": "vue",
    "body": [
      "<!-- $1 -->",
      "<template>",
      "<div class='$2'>$5</div>",
      "</template>",
      "",
      "<script>",
      "//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
      "//例如：import <组件名称> from '<组件路径>';",
      "",
      "export default {",
      "//import引入的组件需要注入到对象中才能使用",
      "components: {},",
      "data() {",
      "//这里存放数据",
      "return {",
      "",
      "};",
      "},",
      "//监听属性 类似于data概念",
      "computed: {},",
      "//监控data中的数据变化",
      "watch: {},",
      "//方法集合",
      "methods: {",
      "",
      "},",
      "//生命周期 - 创建完成（可以访问当前this实例）",
      "created() {",
      "",
      "},",
      "//生命周期 - 挂载完成（可以访问DOM元素）",
      "mounted() {",
      "",
      "},",
      "beforeCreate() {}, //生命周期 - 创建之前",
      "beforeMount() {}, //生命周期 - 挂载之前",
      "beforeUpdate() {}, //生命周期 - 更新之前",
      "updated() {}, //生命周期 - 更新之后",
      "beforeDestroy() {}, //生命周期 - 销毁之前",
      "destroyed() {}, //生命周期 - 销毁完成",
      "activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
      "}",
      "</script>",
      "<style lang='scss' scoped>",
      "//@import url($3); 引入公共css类",
      "$4",
      "</style>"
    ],
    "description": "Log output to console"
  }
}

设置完成后保存。然后在我们新建的vue文件下输入vue 再按Enter就能自动导入模版了，很方便吧，而且这个模版可以根据自己的要求进行修改。

来看一下，.vue文件包含三个部分：

模版部分。vue.js使用基于HTML的模版语法，它将模版编译成虚拟DOM渲染函数。简而言之，就是它会将模版中的内容渲染到页面上。

样式部分。这个部分用来写相应的CSS样式，当然了，如果是更为复杂的CSS样式则建议单独写到.css文件中。 这里写的是脚本，可以导入其他的文件，主要做逻辑的一些处理。

Vue.js基本框架

看一下搭建完的项目结构

我们将HelloWorld.vue中的内容整理一下，style之类的可以删除。

//HelloWorld.vue
<template>
  <div>
<h1>Hello World</h1>   //  h1 tag
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',    //template name
  props: {
    msg: String    //给prop 传递一个 msg,msg为string类型
  }
}
</script>

然后我们再进入App.vue

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App" />  //HelloWorld组件
    <span>{{msg1}}</span>  //span标签
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'  //导入HelloWorld组件，只有导入才能使用

export default {
  name: 'App',
  data () {
    return {
      msg1: 'Welcome'  //新建一个msg1，赋为'Welcome'，从而渲染到模版中
    }
  },
  components: {
    HelloWorld   //组件注册
  }
}
</script>

由于Vue支持热加载，所以我们只需要运行一次项目，然后每次修改后保存都能实时在页面上看到我们的渲染结果。

这是修改后的结果，我们利用浏览器中安装的vue-devtool工具检查一下：

HelloWorld组件在App.vue中成功渲染，同时我们在使用HelloWorld组件时给msg赋值，通过prop显示出来了。

而且我们在 App.vue中的msg2也成功的渲染出来了。

很简单的功能实现了。