vue2基础

发布于:2024-07-31 ⋅ 阅读:(52) ⋅ 点赞:(0)

vue2基础用法和下载安装

作用:绑定数据和DOM元素,实现数据驱动的视图更新,当数据发生变化时,视图自动更新

支持前后端分离和前后端不分离

  • 前后端不分离

    1. 导入vue2.js文件

      <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
      
    2. 建立vue数据模型

      //el绑定div id值为app
      <script>
              new Vue({
                  el: "#app",
                  data: {
                      users: [{
                          name: "longersking",
                          age:20,
                          gender: 1,
                          score:90
                      },{
                          name: "admin",
                          age:22,
                          gender: 2,
                          score:93
                      },{
                          name: "guest",
                          age:20,
                          gender: 1,
                          score:66
                      },{
                          name: "dyc",
                          age:19,
                          gender: 2,
                          score:100
                      },{
                          name: "make",
                          age:25,
                          gender: 1,
                          score:55
                      }
                      
                  ]
                  }
              })
          </script>
      
    3. 利用表达式和指令对数据模型中的一些数据操作

      {{ 数据模型中的数据,上述代码中的users }}
      

      v指令简化一些操作 例如v-for遍历

       v-for="(user,index) in users"
      
  • 前后端分离

    1. 创建vue项目

      npm install -g @vue/cli #安装vue脚手架,便于安装
      mkdir vue_project #创建目录
      cd vue_project #进入此目录
      cmd =》 vue ui #启动图形化交互界面创建项目
      # 点击创建,创建vue2项目名称
      # 设置包管理工具,正常情况可以设置npm,nodejs环境下默认的包管理工具
      # 功能在默认基础上添加路由功能Router勾选
      # 设置vue版本为2.x,语法检测规范选择第一个,创建项目
      # 可以保存预设也可以不保存,等待下载和创建
      
    2. 说明创建的vue项目一些文件夹作用

      # node_modules 整个项目的依赖包
      # public 存放项目的静态文件
      # src 存放项目的源代码
      # package.json 模块基本信息,项目开发所需模块,版本信息
      # vue.config.js 保存vue配置的文件,如:端口,代理配置
      # src 子目录 asset 静态资源
      # src 子目录 components 可重用的组件
      # src 子目录 router 路由配置
      # src 子目录 views 视图组件(页面)
      # src 子文件 App.vue 入口页面(根组件)
      # src 子文件 main.js 入口js文件
      
    3. 运行前端项目

      # ide 中的插件或者图形化启动工具
      # 命令行 npm run serve
      # 修改项目启动端口 在vue.config.js文件中 写入
      devServer: {
        port: 7000,
      }
      # 这一段代码写在defineConfig中
      
    4. 介绍vue项目的相关标签

      # main.js
      new Vue({
        router,
        render: h => h(App)
      }).$mount('#app')
      #.$mount('#app')挂载到id为app的div标签
      # vue文件
      <template></template> #模板部分用来生成html代码
      # 控制模板的数据来源和行为
      <script>
          export default {
             # 数据模型 这里为message
             data () {
                 return {
                    message: "hello world"
                 }
             },
             # 方法定义
             methods: {
               
             }
          }
          # export 将默认方法和数据导出,在main.js文件中导入
      </script>
      
      <style></style> #css样式,美化界面
      
      
      
    5. 为了快速入门可以直接使用一些现成的组件库,这里推荐Element

      # 安装ElementUI
      npm install element-ui@2.15.3
      # 引入ElementUI组件库
      import ElementUI from 'element-ui';
      import 'element-ui/lib/theme-chalk/index.css';
      
      Vue.use(ElementUI);
      

网站公告

今日签到

点亮在社区的每一天
去签到