1 vue: js渐进式框架 2 优点: 单页面、轻量级、数据驱动、数据双向绑定、虚拟DOM、组件化开发(页面代码的服用) 3 vue实例成员: el(挂载点)、data(数据)、methods(方法) 4 vue指令:v-text(纯文本指令)、v-html(可以解析标签)、v-once(插值表达式渲染文本)、{{}}(插值表达式)、v-on(事件指令)、v-bind(属性指令)、v-model(表单指令)、v-if、v-else-if、v-show @ 等价 v-on: : 等价 v-bind:
Django前后台不分离项目 1 后台渲染页面 2 csrf-token => form post请求 3 render、HTTPResponse、redirect => JSONResponse 4 ajax => 页面局部刷新 前后台分离项目 1 前台页面自己渲染 - 自己搭建运行的服务器 2 ajax完成数据请求 3 drf(django框架) - django rest framework - restful(接口规范协议) 4 vue(js框架)- 数据驱动 学习曲线 1 vue 2 drf 3 路飞
Vue框架什么是vue: 渐进式,javascript框架 前台三大主流框架: vue(轻量级) - 尤雨溪 Angular - facebook React - github 先进的前端设计模式: MVVM - 比MVC分成两部分,比MVC好 可以完全脱离服务器端,以组件化开发。(页面+样式+功能) vue的优点 1 单页面,硬件要求低 2 组件化开发 3 数据驱动 4 数据的双向绑定 5 虚拟DOM 6 轻量级
一、vue 环境部署
1 安装node http://nodejs.cn/download/ 下一步下一步 2 安装cnpm (由于npm在国外,所以我们换成国内的cnmp源,避免下载安装error) sudo npm install -g cnpm --registry=https://registry.npm.taobao.org 只要不是error 就说明安装成功 3 安装vue脚手架 sudo cnpm install -g @vue/cli 4 清空缓存处理 如果第3步安装失败,则运行下 npm cache clean --force ,然后再重新运行第3步命令
vue环境部署
二、vue项目创建
- Manually select feature - Check the features needed for your project 1 Babel 将es6语法转换成es5的语法,让浏览器更好的识别 2 Router 前端路由 3 Vuex 仓库,组件与组件之间数据交互 4 Linter/Formatter - Use history mode for router? 由于vue页面只有一个页面,为了能后退 前进,形成历史记录(window history),所以这里选Y - pick a linter/ formatter config Basic - pick additional lint feature Line on save - where do you prefer placing config for Babel, CSS etc? in decicated config files - save this as a preset for future projects? N - cnpm run serve
1. vue create [自定义vue项目名称]
- 如果迁移到一个没有vue环境的项目中,需要将除了node_modules 这个文件夹以外的所有均copy到新文件夹中, 然后执行 cnpm install 重建依赖关系
2. 项目迁移重建
- edit configuration - 填写Name(自定义) - packageJson:(选择到需要打开的vue项目路径中的package.json) - command:(run) - script:(serve) - node interpreter:(选择到node环境) - package manager:(选择到npm环境) - 打开pycharm的setting- Plugins- 搜索vue- install vue.js - restart pycharm - 完成!
3. 将vue项目在pycharm中打开
三、vue目录介绍
- node_modules: 项目依赖 - - public:公用文件 favicon.ico:页面标签图标 index: 项目的唯一页面 - src: 项目开发文件目录 assets: 静态资源 css|img components: 小组件(*.vue) views: 视图组件(*.vue) app.vue: 根组件 main.js: 主脚本文件 router.js: 路由脚本文件 - vue-router store.js: 仓库脚本文件 - vuex - *.xml|json|js: 一系列配置文件 - README.md:使用说明
import Vue from ‘vue‘ //node_modules下的依赖直接写了名字 import App from ‘./App.vue‘ // ./代表相对路径的当前目录,文件后缀名可以省略 import router from ‘./router‘ //@代表src目录的绝对路径 import store from ‘./store‘ // 在main中配置的信息就是给整个项目配置 // 已配置vue | 根组件App | 路由 | 仓库 // 以后还可以配Cookie | ajax(axios) | element-ui // Tips小提示 Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) // 下面两组结果也是正解 // render: readTemplateFn => readTemplateFn(App) // 原生的如下: // render: function (fn){ // return fn(App) // } }).$mount(‘#app‘) //$mount = el:‘#App‘
main.js简介
原文地址:https://www.cnblogs.com/lich1x/p/11459156.html
时间: 2024-08-01 00:15:51