vue简介，插值表达式，过滤器
Vue
一. 什么是Vue
渐进式 javaScript框架
可以独立完成前后端分离时 Web项目的JavaScript框架
渐进式：可以控制一个页面的一个标签，也可以控制一系列标签，也可以控制整个页面，甚至可以控制整个前台项目
二.为什么学Vue
为什么：为了前后端完全分离开发
前端三大主流框架：Angular React Vue
Vue结合了其他框架优点、轻量级、中文API、数据驱动、双向绑定、MVVM设计模式、组件化开发、单页面应用
# vue是js渐进式框架
# 根据开发需求，可以决定vue框架控制项目的具体方位：可以为一个标签，也可以为一个页面，甚至可以为整个项目
1)Vue框架：前台界面，页面逻辑
1）指令:（分支结构，循环结构...），复用页面结构等
2）实例成员:（过滤器，监听），可以对渲染的数据做二次格式化
3）组件:（模块的复用或组合），快速搭建页面
4）项目开发
2)DRF框架：数据（接口）
1）基础的模块：请求、响应、解析、渲染
2）序列化、三大认证
3）过滤、搜索、排序、分页
4）异常、第三方jwt、restful接口规范
3）为什么学习vue：
前台框架：Angular（庞大）、React（精通移动端）、Vue（吸取前两者优势，轻量级）
Vue一手文档是中文
实现前后台分离开发，节约开发成本
三.如何使用Vue
- 开发版本：vue.js
- 生产版本：vue.min.js
vue的导入:
<!--方式一: 本地-->
<script src="js/vue.js"></script>
<!--方式二: cdn-->
<script src="https://cn.vuejs.org/js/vue.min.js"></script>
插值表达式:
<div id="app">
<!-- {{ }} 是插值表达式,中间的info是变量,可通过vue实例成员data赋值 -->
<!-- 注意:插值表达式中可以写基础类型的数据,只有写变量时才能被data赋值 -->
{{ info }}
{{ 'info' }} 渲染到页面是: info
</div>
下载安装？
插值表达式
插值表达式
* 1）空插值表达式：{{ }}
* 2）中渲染的变量在data中可以初始化
* 3）插值表达式可以进行简单运算与简单逻辑
* 4）插值表达式符合冲突解决，用delimiters自定义（了解）
四、vue特点
虚拟DOM
数据的双向应用
单页面应用
数据驱动
1.虚拟DOM
就是改变屏幕卡顿（因为加载顺序，改变DOM树的结构），用斗篷指令v-cloak即可
原理：更深的原理就是改变DOM树的结构，就改变了浏览器的加载顺序。就避开了无畏的计算，提升了效率
用虚拟DOM浏览器（斗篷指令），内部原理：告诉浏览器当前不是最终加载的结果，浏览器就会全部加载完之后放到JS中，一次性加载完
上代码案例：从上至下代码加载的顺序
<style type="text/css">
[v-cloak] { display: none; }
</style>
<div id="app" v-cloak>
{{ msg }}
// 如果没有斗篷指令隐藏属性，代码加载到这里num对应的值还没有加载出来，而当下面的num加载出来的时候，屏幕就会出现闪一下
</div>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
msg: "message"
}
})
</script>
<!-- 避免页面闪烁-->
2.数据的双向绑定
什么是数据的双向应用？
大白话：两个绑一个
需要用到表单指令，v-model，内部有一个监听机制。v-bind属性指令没有监听机制
代码案例：
<!-- 两个输入框内容会同时变化 -->
<input name="n1" type="text" v-model="v1">
<input name="n2" type="text" v-model="v1">
<script>
new Vue({
el: '#app',
data: {
v1: ''
}
})
</script>
3.单页面应用
什么是单页面应用？
大白话：网站实际就是一个页面，页面的跳转只是做了内容的局部替换。因为通过vue可以控制一个标签，一个标签下可以写很多的内容，渐进式
4.数据驱动
什么是数据举动？
大白话：根据数据做页面布局
原理：利用循环命令，渲染生成标签。就是说，如果没有数据，就没有标签，有多少数据就自动渲染多少标签。
上代码案例：
<div class="box" v-for="obj in goods">
<img :src="obj.img" alt="">
<p>{{ obj.title }}</p>
</div>
//goods就是模拟的虚拟数据
let goods = [
{
"img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2457147274,3329097728&fm=26&gp=0.jpg",
"title": "纯种拆家专家"
},
{
"img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2457147274,3329097728&fm=26&gp=0.jpg",
"title": "纯种拆家专家"
},
{
"img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2457147274,3329097728&fm=26&gp=0.jpg",
"title": "纯种拆家专家"
}
];
五、Vue实例
<script>
new Vue({
// 实例成员
})
</script>
<!--
实例与页面挂载点(标签)一一对应
一个页面中可以出现多个实例对应多个挂载点
实例只操作挂载点内部内容
-->
六、实例成员
- 挂载点 | el
使vue与html页面结构建立关联
<body>
<div id="app">
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app' // 挂载点
})
</script>
注意:
# 1) html标签与body标签不能作为挂载点
# 2) 一个vue对象挂载点之后索引一个匹配结果，所以挂载点一般用id标识
- 自定义插值表达式括号| delimiters
// 控制vue插值表达式符合
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>
- 数据 | data
<!--
1) data为vue环境(被挂载的标签内部)提供数据，采用字典{变量名:值}形式
2) 在插值表达式{{}}中，直接书写数据的key(变量名)来访问数据(值)
3) 在外部通过接收实例的变量app，访问实例成员(实例成员都用$开头)，间接访问到数据
app.$data.info
4) 在外部也可以通过实例变量app直接访问数据
app.info
5) 在vue实例内部的方法methods中，使用变量，this.info (this其实就是等价于app)
-->
<body>
<div id="app">
{{ info }}
{{ 'info' }}
<p>{{ num }}</p>
<p>{{ result }}</p>
<p>{{ arr }}</p>
<p>{{ dic }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
info: 'message',
num:100,
result: true,
arr: [1, 2, 3, 4, 5],
dic: {
name: 'xionger',
age: 20
}
}
})
</script>
<script>
console.log(app); // vue对象
console.log(app.$data.info); // message
console.log(app.info); // message
</script>
- 过滤器 | filters
<!--
1) 过滤器本身就是处理数据的函数，可以将插值表达式中的数据作为参数传入过滤器函数进行处理，得到的函数返回值就是处理后的结果
2) 过滤器使用语法 {{ ...变量 | 过滤器(...变量) }}
3) 过滤器在实例中用filters成员提供
4) 参数多传不处理,少传返回NaN
-->
<body>
<div id="app">
<!-- 插值表达式可以直接做简单的运算 -->
<p>{{ num + 3.5 }}</p>
<!--<p>{{ msg.split('')[5] }}</p>-->
<p>{{ num | f1 }}</p>
<p>{{ 10, 20 | f2(50, 80) }}</p>
<p>{{ 10, 20,30 | f2(50, 80) }}</p>
<p>{{ 10 | f2(50, 80) }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
num: 100,
},
filters:{
f1:function (num) {
return num*2
},
f2:function (a,b,c,d) {
return a+b+c+d
}
}
})
</script>
- 方法 | methods
<!--
methods为事件提供实现体(函数)
与事件指令配合使用
-->
<style>
.box { background-color: orange }
</style>
<div id='app'>
<p class="box" v-on:click="pClick">测试</p>
<p class="box" v-on:mouseover="pOver">测试</p>
</div>
<script>
var app = new Vue({
el: '#app',
methods: {
pClick () {
// 点击测试
},
pOver () {
// 悬浮测试
}
}
})
</script>
<!-- v-on:为事件绑定的指令 -->
<!-- methods为事件提供实现体-->
- js对象(即字典)补充
let b = 20;
let dic = {
a: 10, // 字典本身就是对象，key都是字符串形式可以省略引号
b // 值为变量时，且与key同名，可以简写
};
console.log(dic)
- 插值表达式转义 | delimters
<!--
防止django的模板渲染语法与插值表达式冲突,前端通常会转义插值表达式的{{ }}
-->
<div id="app">
{{ msg }}
{[ msg ]}
</div>
<script>
new Vue({
el: '#app',
data: {
msg: '12345'
},
// delimiters: ['{{', '}}'],
delimiters: ['{[', ']}'],
})
</script>
- 计算属性 | computed
一个变量的值依赖多个变量(多变一)，且依赖的任意一个变量发生改变，该变量都会改变
<!--
1) computed是用来声明 方法属性(伪装成变量的方法) 的
2) 声明的方法属性不能在data中出现
3) 方法属性必须在页面中渲染使用，才会对该方法内部出现的所有变量进行监听
4) 计算属性的值来源于监听方法的返回值
-->
<div id="app">
姓：<input type="text" v-model="fName">
名：<input type="text" v-model="lName">
姓名：<b>{{ flName }}</b>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
fName: '',
lName: '',
},
computed: {
// flName 要在页面渲染
flName(){
// this.fName和this.lName是被监听的变量
// 变量flName的值由函数的返回值决定
return this.fName + this.lName;
}
}
})
</script>
- 监听属性 | watch
多个变量的值依赖一个变量(一变多)，该变量发生改变，所有依赖变量都会改变
<!--
1) watch是用来声明 方法属性 的
2) watch为data中已存在的属性设置监听事件
3) 监听的属性值发生改变，就会触发监听事件
4) 监听事件的方法返回值没有任何意义
-->
<body>
<div id="app">
姓名：<input type="text" v-model="fullName">
姓：<b>{{ firstName }}</b>
名：<b>{{ lastName }}</b>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
fullName:'',
firstName:'',
lastName:'',
},
watch:{
fullName(){
// 从data中拿到fullname进行操作
namearr = this.fullName.split('');
// 给data中的firstname和lastName赋值,渲染到插值表达式中
this.firstName = namearr[0];
this.lastName = namearr[1];
// return 的值没有任何意义
}
}
})
</script>
vue简介，插值表达式，过滤器的更多相关文章
- VUE基础插值表达式
vue 基本操作插值表达式 首先使用js导入vue.js文件 <style> [v-claok]{ display:none;//解决闪烁问题 } </style> <d ...
- vue中插值表达式中时间转换yyyy-MM-dd HH:mm:ss
vue插值表达式中将时间转换两种方式:一.定义方法 <div id="app">当前实时时间:{{dateFormat(date)}}</div> //时间 ...
- VUE笔记 - 插值表达式 v-on: / @ 事件绑定 定时器运用
<body> <!-- 2. 创建一个要控制的区域 --> <div id="app"> <input type="button ...
- [Vue入门及介绍，基础使用、MVVM架构、插值表达式、文本指令、事件指令]
[Vue入门及介绍,基础使用.MVVM架构.插值表达式.文本指令.事件指令] 1)定义:javascript渐进式框架 渐进式:可以控制一个页面的一个标签,也可以控制一系列标签,也可以控制整个页面 ...
- angular,vue,react的基本语法—插值表达式，渲染数据，响应式数据
基本语法: 1.插值表达式: vue:{{}} react:{} angular:{{}} 2.渲染数据 vue js: export default{ data(){ return{ msg:&qu ...
- Vue学习之路第三篇：插值表达式和v-text的区别
上一篇说到插值表达式有一个问题: 页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据. 对于这个问题Vue给予了解决办法,看具体事例. <div i ...
- Vue学习之路第二篇：插值表达式
要开始写Vue的功能了,是不是很激动呢!开始吧! 1.首先建立一个html页面,导入Vue js包 <script type="text/javascript" src=&q ...
- Vue基础之插值表达式的另一种用法！附加变量的监听！
Vue基础之插值表达式的另一种用法!附加变量的监听! 讲这个之前我们先回顾一下原来的用法! <body> <!-- Vue.js的应用可以分为两个重要的组成部分 一个是视图! 另一个 ...
- Vue基础之用插值表达式在视图区显示数据
Vue基础之用插值表达式在视图区显示数据 第一步:当然就是你要引入Vue.js这个脚本文件啦! <script src="https://cdn.jsdelivr.net/npm/vu ...
随机推荐
- 从零开始のcocos2dx生活（七）ParticleSystem
CCParticleSystem是用来设置粒子效果的类 1.粒子分为两种模式:重力模式 和 半径模式 重力模式独占属性: gravity 重力方向,Vec2类型,可以分别指定不同方向的重力大小 spe ...
- docker+mysql 构建数据库的主从复制
docker+mysql 构建数据库的主从复制 在最近的项目中,决定将项目改造成数据库读写分离的架构,后续会有博文详细讲述我的开发改造,本文主要记录我是如何一步步的构建数据库的主从复制. 为什么使用d ...
- python3 三行代码基于HTTP2完美实现APNS推送【详解】
第一次做苹果APNS(Apple Push Notification service)推送,关于APNS推送原理以及证书的获取方式网上已经有许多资料,在此不做过多赘述,需要注意的是证书分为测试证书和正 ...
- Markdown 复杂公式&常用符号
公式格式 行内公式 行内公式(不会换行)使用 $ 作为起止符,例如:$a + b = c$, 效果为:\(a + b = c\) 块级公式 块级公式(单独一行)使用 $$ 作为起止符,例如:$$a + ...
- Java开发中的各种乱码问题
乱码问题 其实解决乱码问题,就是保证所有的编码格式一致,就不会出现问题. 控制台乱码 修改idea的控制台格式 修改 idea.exe.vmoptions和idea64.exe.vmoptions 在 ...
- Http GetPost网络请求
using Newtonsoft.Json; using System; using System.Collections.Generic; using System.IO; using System ...
- 案例分析丨谷歌设计冲刺 4 天决定 Clips 的功能特性
这次为大家带来Google冲刺日程案例,之前案例分析可以戳对应文字直达:ING集团.音乐流媒体Spotify.美国知名超市Target 作为一款工具类产品,谷歌十分注重产品候选人的技术背景,同时也看重 ...
- Scala实践10
1.模式匹配 模式匹配是一种根据模式检查值的机制.它是switch(Java中语句)的更强大版本,它同样可以用来代替一系列if / else语句. 句法 匹配表达式具有值,match关键字和至少一个c ...
- 艾编程coding老师：深入JVM底层原理与性能调优
1. Java内存模型JMM,内存泄漏及解决方法:2. JVM内存划分:New.Tenured.Perm:3. 垃圾回收算法:Serial算法.并行算法.并发算法:4. JVM性能调优,CPU负载不足 ...
- Spring学习记录3——Spring AOP
SpringAOP基础 AOP简介: AOP是Aspect Oriented Programing的简称,翻译为“面向切面编程”.它适用于具有横切逻辑的应用场合,如性能检测,访问控制,事务管理及日志记 ...