路费学城之 vue
vue笔记
一、vue 框架内容大纲
"""
Vue框架：前台界面，页面逻辑
1）指令
2）实例成员
3）组件
4）项目开发
DRF框架：数据（接口）
1）基础的模块：请求、响应、解析、渲染
2）序列化、三大认证
3）过滤、搜索、排序、分页
4）异常、第三方jwt、restful接口规范
Luffy项目：前后台分离项目
1）项目的登录认证、课程商机销售、项目完成
2）短信、支付宝、服务器、上线、redis、celery、git
"""
vue 框架
"""
1）定义：javascript渐进式框架
渐进式：可以控制一个页面的一个标签，也可以控制一系列标签，也可以控制整个页面，甚至可以控制整个前台项目
2）优势：
有指令（分支结构，循环结构...），复用页面结构等
有实例成员（过滤器，监听），可以对渲染的数据做二次格式化
有组件（模块的复用或组合），快速搭建页面
虚拟DOM
数据的双向绑定
单页面应用
数据驱动
3）为什么学习vue：
前台框架：Angular（庞大）、React（精通移动端）、Vue（吸取前两者优势，轻量级）
Vue一手文档是中文
实现前后台分离开发，节约开发成本
4）如何使用Vue
简单使用
"""
Vue环境简单搭建：通过script标签导入vue文件即可
"""
1）cdn
<script src="https://cn.vuejs.org/js/vue.js"></script>
2）本地导入
<script src="js/vue.js"></script>
"""
挂载点el
"""
/** el: 挂载点
* 1）一个挂载点只能控制一个页面结构（优先匹配到的结构）
* 2）挂载点挂载的页面标签严格建议用id属性进行匹配（一般习惯用app）
* 3）html标签与body标签不能作为挂载点（html和body标签不可以被替换，组件中详细介绍）
* 4）是否接受vue对象，是外界是否要只有vue对象的内容决定的
*/
"""
<div id="app">
<div class="d1">
{
{ num }}
</div>
<div class="d1">
{
{ num }}
</div>
</div>
<div id="main">
{
{ n }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
num: 100
}
});
console.log(app.$data.num, app.num);
new Vue({
el: '#main',
data: {
n: app.num
}
});
</script>
插值表达式
"""
/** 插值表达式
* 1）空插值表达式：{
{ }}
* 2）中渲染的变量在data中可以初始化
* 3）插值表达式可以进行简单运算与简单逻辑
* 4）插值表达式符合冲突解决，用delimiters自定义（了解）
*/
"""
<div id="app">
<p>{
{ info }}</p>
<p>{
{ msg }}</p>
<p>{
{ }}</p>
<p>{
{num}}</p>
<p>{
{num + 10 * 2}}</p>
<p>{
{ msg.length + num }}</p>
<p>{
{ msg[4] }}</p>
<p>{
{ msg.split('')[4] }}</p>
<p>[{ num }]</p>
</div>
<script>
new Vue({
el: '#app',
data: {
info: '信息',
msg: 'message',
num: 10,
},
// 控制vue插值表达式符合
delimiters: ['[{', '}]'],
})
</script>
过滤器
"""
/** 过滤器
* 1）用实例成员filters来定义过滤器
* 2）在页面结构中，用 | 来标识使用过滤器
* 3）过滤方法的返回值就是过滤器过滤后的结果
* 4）过滤器可以对1~n个变量进行过滤，同时还可以传入辅助的变量，
* 过滤器方法接受参数是安装传入的位置先后
*/
"""
<body>
<div id="app">
<!-- 简单使用：过滤的对象会作为参数传给过滤器 -->
<p>{
{ num | add(20) }}</p>
<!-- 串联使用：将第一个过滤器结果作为参数给第二个过滤器 -->
<p>{
{ num | add(100) | jump(2) }}</p>
<!-- 究极使用 -->
<p>{
{ n1, n2 | fn(99, 77) }}</p>
<!-- 你品，你细品 -->
<p>{
{ n1, n2 | fn(99, 77), n1, n2 | fn(100) }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
本文详细介绍了Vue框架，从环境搭建、基本概念到实际项目开发，包括组件、路由、数据交互等方面，还涉及了Vuex、前端存储、axios插件和Django国际化配置等内容。
最低0.47元/天 解锁文章
1095
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
