路费学城之 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>