由于项目要用Vue框架,学习搭建了一个,发现vue框架是将html代码模板化,用很多个Template组合成一个页面。之前用过dojo,也是类似的方式。

    本文会讲一些使用vue的一些理解和感悟,如果有不对的请在评论中提醒我,话不多说开始吧!

    1.安装vue(使用NPM) 推荐

            

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack mypro
# 安装依赖,走你
$ cd my-project
$ npm install

    注意事项:期间会有很多选择,如:是否安装router(路由)、Eslint(vue代码校验工具),推荐都选y,都蛮有用的

    非NPM请见:详细安装教程

    2.启动服务

当我们输入了:

$ cnpm run dev

会将工程启动,默认8080端口,在浏览器中可以查看到效果图。

    3.修改HelloWorld.vue文件

在*\mypro\src路径下,有这个工程的主要资源文件

assets里面存放的是一个大大的V(Vue的logo)图片

components中存放的是我们要修改的helloworld.vue文件

router里面存放的是index.js路由(后面也会讲作用)

进入components->打开helloworld.vue文件

我使用的编译器是WebStorm,在编译器中安装Vue插件和EsLint插件才可以编辑*.vue文件。

参考:各种编译器添加EsLint

 helloworld.vue里面我们可以看到,主要有三部分组成,template、script和style scoped

分别对应: HTML、script、css

将template修改成:

<template>
  <div class="hello">
    <h1>{{ msg }}World</h1>
  </div>
</template>

注意:{{  }}表示数据绑定,如果之前接触过Angular就会有所了解,查了下资料,Vue也可以双向绑定,使用v-model

将script修改成:

<script>
export default {
    name:'HelloWorld',
    data () {
      return {
        msg: 'Hello'
      }
    }
}
</script>

将style scoped 修改成:

<style scoped>
h1{
  font-weight: normal;
}
</style>

大功告成,这样打开浏览器看看你的杰作吧。


是的就是这么酷炫!

下面讲原理!重点来了!!!

点击这个神奇的传送门


Logo

前往低代码交流专区

更多推荐