前端vue基础

2020-06-05
<!-- JAVASCRIPT框架:
     1,jQuery:优点是简化了DOM操作,缺点是DOM操作太频繁,影响前端性能,在前端眼里使用他只是为了兼容IE6,7,8
     2,Angular:Google收购的前端框架,由Java程序员开发,其特点是将后台的MVC模式搬到了前端,并增加模块化开发的理念
     3,React:Facebook出品,一款高性能的JS前端框架,特点是提出了新概念「虚拟DOM」用于减少真实DOM操作,在内存中虚拟
        DOM操作,有效的提升了前端渲染效率,缺点是使用复杂,因为需要额外学习一门JSX语言。
     4,Axios:前端通信框架,因为vue的边界很明确,就是为了处理DOM,所以不具备通信能力,此时就需要额外使用一个通信框架与服务器交互
        当然也可以直接使用jQuery提供的AJAX通信功能 -->


<!-- UI框架:
     1,Ant-Design:阿里巴巴出品,基于React的UI框架
     2,ElementUI:基于vue的UI框架
     3,Bootscript:Twitter推出的一个用于前端开发的开源工具包
     4,AmazeUI:又叫‘妹子UI’一款HTMl5跨屏前端框架 -->


<!-- javaScript构建工具:
     1,Babel:js编译工具,主要用于浏览器不支持的ES新特性,比如用于编译的TypeScript
     2,WebPack:模块打包器,主要作用是打包,压缩,合并及按序加载 -->

安装node.js

前往官网下载:http://nodejs.cn/download/
image.png

安装 vue-cli

#安装
sudo npm install vue-cli -g
#查看是否安装成功
vue list

创建一个基于 webpack 模板的 vue 应用程序

# 这里的 myvue 是项目名称,可以根据自己的需求起名
vue init webpack myvue

说明

  • Project name:项目名称,默认 回车 即可
  • Project description:项目描述,默认 回车 即可
  • Author:项目作者,默认 回车 即可
  • Install vue-router:是否安装 vue-router,选择 n 不安装(后期需要再手动添加)
  • Use ESLint to lint your code:是否使用 ESLint 做代码检查,选择 n 不安装(后期需要再手动添加)
  • Set up unit tests:单元测试相关,选择 n 不安装(后期需要再手动添加)
  • Setup e2e tests with Nightwatch:单元测试相关,选择 n 不安装(后期需要再手动添加)
  • Should we run npm install for you after the project has been created:创建完成后直接初始化,选择 n,我们手动执行

初始化并运行

cd myvue
npm install
npm run dev

安装并运行成功后在浏览器输入:http://localhost:8080
image.png

目录结构

image.png

  • build 和 config:WebPack 配置文件
  • node_modules:用于存放 npm install 安装的依赖文件
  • src: 项目源码目录
  • static:静态资源文件
  • .babelrc:Babel 配置文件,主要作用是将 ES6 转换为 ES5
  • .editorconfig:编辑器配置
  • .gitignore:git 忽略的配置文件
  • .postcssrc.js:css 相关配置文件,其中内部的 module.exports 是 NodeJS 模块化语法
  • index.html:首页,仅作为模板页,实际开发时不使用
  • package.json:项目的配置文件* name:项目名称
    • version:项目版本
    • description:项目描述
    • author:项目作者
    • scripts:封装常用命令
    • dependencies:生产环境依赖
    • devDependencies:开发环境依赖

基础语句if-else if-else

    <div id="app">
      <div v-if="type === 'A'">I am A</div>
      <div v-else-if="type === 'B'">I am B</div>
      <div v-else-if="type === 'C'">I am C</div>
      <div v-else>NO</div>
    </div>
    <div id="biaoge">
<script type="text/javascript">
      var hello = new Vue({
        el:'#app',
        data:{
          type: "A"
        }
      });
</script>

遍历集合for循环

    <div id="biaoge">
      <ul>
        <li v-for="item in items">
          {{item}}
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      var biaoge = new Vue({
        el:'#biaoge',
        data:{
          items:["lisi","zhangsan","wangwu"]
        }
      });
   </script>

点击事件c-on:click

    <div id="dianji">
      <button v-on:click="dianwo()">点我</button>
    </div>
    <script type="text/javascript">
      var dianji = new Vue({
        el:'#dianji',
        data: {
          massage: "hello misterzhang"
        },
        methods: {
          dianwo: function(event){
            alert(this.massage);
          }
        }
      });
    </script>

标题:前端vue基础
作者:张范
地址:http://misterzhang.top/articles/2020/06/05/1591325477488.html