web框架之Vue渐进式框架-安装及入门
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项目创建
- 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
- 如果迁移到一个没有vue环境的项目中，需要将除了node_modules 这个文件夹以外的所有均copy到新文件夹中，
然后执行 cnpm install 重建依赖关系
- 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
- 完成！
三、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'
四、自定义组件创建与使用
<!--OwenComponent.vue自定义组件--> <!--<template>--> <!----> <!--</template>--> <!--<script>--> <!--export default {--> <!--name: "OwenComponent"--> <!--}--> <!--</script>--> <!--<style scoped>--> <!--</style>--> <!--所有的component组件都有以下三部分组成--> <!--html代码：有且只有一个根标签--> <template> <div class="owen"> <h1 :class="{active: is_active}" @click="btnClick">owen组件</h1> </div> </template> <!--js代码:在export default{}的括号内完成组件的各项成员 [data|methods...]--> <script> export default { data() { return { is_active: false } }, methods: { btnClick() { this.is_active = !this.is_active } } } </script> <!--css代码：样式组件化 - 样式只在该组件内部起作用--> <style scoped> .active { color: red; } </style> ``` ```vue <!--About.vue组件--> <template> <div class="about"> <h1>This is an about page</h1> <h2>好好好</h2> <owen-comp></owen-comp> </div> </template> <script> // import OwenComp from '../components/OwenComponent' //导入组件 import OwenComp from '@/components/OwenComponent' //导入组件 export default { components: { OwenComp, //注册组件 } } </script>
五、Vue项目开发大致流程
1、环境 2、创建项目 3、配置项目并启动 4、项目目录介绍 5、全局reset.css配置：main.js => import '@/assets/css/reset.css' 6、组件：页面组件与小组件 小组件：template | script | style 页面的局部复用 页面组件：template | script | style 代表一个页面 7、路由：vue-router => router.js => 完成路由配置 8、router-link：to完成路由指定路径跳转 9、router-view：完成跳转的组件渲染
