【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点
知识点解释
vue框架知识体系
【1】基本概念（条件渲染、列表渲染、时间绑定、声明周期、模块化思想）
【2】组件的使用思想及使用方式（路由组件Vue-router、前后端分离会使用到http请求，而http请求最常用的就是Vue-resource插件（官方不推荐使用，但是它仍然很好用，官方推荐使用的是Axios。）
【3】常用API
先基本概念
第一个vue应用
Vue是什么 https://cn.vuejs.org/v2/guide/index.html
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
https://cn.vuejs.org/v2/guide/
第一个Vue例子
- （Demo）Hello Vue!
- Vue.js CDN使用
- 在线Coding快速验证
直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。
生产环境版本，优化了尺寸和速度
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
一个Vue例子 https://cn.vuejs.org/v2/guide/instance.html
Demo
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bg {
color: red;
}
</style>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script> -->
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div class="app">
<div class="bg">
Hello World!!!
{{msg}}
</div>
<div class="bg">
{{msg}}
</div>
</div>
<script>
new Vue({
el: '.app',
data: {
msg: 'Hello Vue!!!'
}
})
</script>
</body>
</html>
Result
Hello World!!! Hello Vue!!!
Hello Vue!!!
error:
vue.js没有引入进来，new Vue(){} 是大写的V 我小写了 v了。。。等
总结
- 方便集成，灵活小巧
- 语法清晰，便捷强大
模板语法
模板语法 https://cn.vuejs.org/v2/guide/syntax.html
认识 Vue 文件结构(template, script, style)
插值 {{msg}}
指令(指令缩写) v-html(不转义), v-text(转义), v-bind:, v-on:, v-model(双向绑定), v-if(真则显示, 假则元素删除), v-show(真则显示, 假则隐藏)
使用 v-html 来实现输出 data 中 html 代码, {{html}} 将被转义
使用 v-bind: 来实现数据绑定, 可将各元素的 id 在 vue 实例中进行绑定, 统一管理, 可缩写为 :属性
使用 v-on: 来实现事件绑定, 在methods 进行实现, 可缩写为 @事件
模板语法 https://cn.vuejs.org/v2/api/index.html#template
- 认识Vue文件结构（template，script，style）
- 模板语法包含插值、指令（指令缩写）；
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
<span>Message: {{ msg }}</span>
Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令。
Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bg {
color: red;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div class="app">
<div class="bg" v-blid:id="bg1">
Hello World!!!
{{msg}}
</div>
<div class="bg">
{{msg}}
</div>
{{(count + 1) * 10 }}
{{ count + 1 }}
<div v-html="template">
</div>
<a v-bind:href="url">百度</a>
<a :href="url">百度</a>
<button type="button" v-on:click="submit()">加数字</button>
<button type="button" @click="submit()">加数字</button>
</div>
<script>
new Vue({
el: '.app',
data: {
bg1:"app-blind",
msg: 'Hello Vue!!!',
count:0,
template:'<div >Hello template</div>',
url:'http://www.baidu.com'
},
methods: {
submit:function(){
this.count ++
}
},
})
</script>
</body>
</html>
总结
- Vue文件结构;
- 插值语法{{msg}},数据、JS表达式;
- 指令(指令缩写) @click,v-if,:href
计算属性与侦听器
计算属性与监听器
监听器：https://cn.vuejs.org/v2/api/index.html#watch
计算属性：https://cn.vuejs.org/v2/api/index.html#computed
使用场景介绍
Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<p>
{{msg1}}
</p>
</div>
<script>
var arr = 'new test'
var app = new Vue({
el: '#app',
data: {
msg: 'Hello Vue!',
another: 'another Hello Vue!!'
},
watch: {
msg: function (newval, oldval) {
console.log('newval is:'+newval)
console.log('oldval is:'+oldval)
}
},
computed: {
msg1: function () {
return 'computed:' + this.msg + ',' + this.another + arr
}
}
})
</script>
</body>
</html>
arr并不在data中，arr的值发生改变不会影响computed，只有data中的值发生改变的时候，computed才会重新计算，然后渲染页面，所有显示出来的arr
的值是在控制台中改变后的值。
举个最简单的例子，watch里面监听了data里面的单一变量的变化，而computed可以监听多个本vue实例里面data变量的变化。从我们的例子里面可以看出来！！
PS: 如果有一个全局，非vue实例里面的变量发生了变化，是不会触发computed计算属性的。watch只是监听一个对象或者一组对象，computed可以监听当前vue实例内的所有对象，当computed监听到Vue实例内变量有变化时会重新渲染括号里的所有变量，不管是局部变量还是全局变量。
1、watch：当监测的属性变化时会自动执行对应的回调函数
2、computed：计算的属性只有在它的相关依赖发生改变时才会重新求值
官方的例子也写的非常的清楚，https://cn.vuejs.org/v2/guide/computed.html
vue的computed计算属性，会监听自己所管理的data中的属性的变化，而在自己管理以外的变量的变化是不会去监听的。
参考 ：计算属性和侦听器
computed更适合Vue中的多个变量需要同时监听的场景
总结
计算属性：computed
侦听器：watch
使用场景介绍，watch(异步场景)，computed（数据联动）
条件渲染、列表渲染、Class与Style绑定
条件渲染
列表渲染
Class与Style绑定
常用指令
条件渲染 https://cn.vuejs.org/v2/guide/conditional.html
v-if
v-if 指令用于条件性地渲染一块内容。
v-else,v-else-if
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用
v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-if="count < 0">
判断1：count大于0，count的值是：{{count}}
</div>
<div v-else-if="count < 0 && count > -5">
判断2：count的值是：{{count}}
</div>
<div v-else>
判断3：count的值是：{{count}}
</div>
<div v-show="count == -1">show:{{count}}</div>
{{msg}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: 'Hello Vue!',
count: 0
}
})
</script>
</body>
</html>
Result
判断3：count的值是：0
Hello Vue!
列表渲染 https://cn.vuejs.org/v2/guide/list.html
v-for
v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
v-for与v-if结合使用
v-for高阶用法
Class与Style绑定 https://cn.vuejs.org/v2/guide/class-and-style.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<div v-for="item in list">
<div v-show="item.age > 20" :class="['active','add','more',{'another': item.age < 30}]" :style="styleMsg">
{{item.name}}
</div>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: 'Hello Vue!',
styleMsg: {
color: 'red',
textShadow: '0 0 5px green'
},
list: [{
name: '小林',
age: 18
}, {
name: '小蚂蚁',
age: 24
}]
}
})
</script>
</body>
</html>
Result
Hello Vue!
小蚂蚁
总结
模板语法
计算属性与侦听器
常用指令（列表、条件、class与样式绑定）
如何工程化呢
如何写出优雅的vue代码？
如何调试vue？
【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法的更多相关文章
- Vue.js之Vue计算属性、侦听器、样式绑定
前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...
- vue计算属性和侦听器
一.计算属性: main.js: var app = new Vue({ el: '#app', data: { math: 80, physics: 90, english: 30 }, compu ...
- 一起学Vue之计算属性和侦听器
概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...
- Vue.js 生命周期、计算属性及侦听器
一.创建一个Vue实例 每个Vue应用都是使用Vue函数创建一个Vue实例.所有的Vue组件都是一个Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外). 数据和方法 当一个实例被创建后,它 ...
- Vue学习之vue中的计算属性和侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue基础——计算属性和侦听器
计算属性——介绍 模板内的表达式非常便利,但是设计他们的初衷是用于简单计算的.在模板中放入太多的逻辑会让模板太过沉重切难以维护.如下: <div id="example"&g ...
- vue——计算属性和侦听器
一.计算属性(data中的相关数据) 侦听多个属性时——计算属性 comuted. 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: & ...
- 15 Vue计算属性和侦听器
计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的. 在模板中放入太多的逻辑会让模板过重且难以维护.例如: split = 字符中间空格分割, reverse= 反转 join('' ...
- vue条件语句、循环语句、计算属性、侦听器监听属性
因为 v-if 和v-for是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if.最终 ...
随机推荐
- PHP语言基础知识
目录 前言 第一章 PHP语言学习介绍 1.1 PHP部署安装环境 1.2 PHP代码工具选择 第二章 PHP代码基本语法 2.1 PHP函数知识介绍 2.2 PHP常量变量介绍 2.2.1 PHP变 ...
- Kubernetes 最佳安全实践指南
原文链接:https://fuckcloudnative.io/posts/security-best-practices-for-kubernetes-pods/ 对于大部分 Kubernetes ...
- vue 表单基本 表单修饰符
表单的基础 利用v-model进行双向数据绑定: 1.在下拉列表中,将v-model写在select中 2.单选框和复选框需要每个按钮都需要写上v-model 3.v-model在输入框中获取得是输入 ...
- 详解Java中的IO输入输出流！
目录 本片要点 基本分类 发展史 文件字符流 输出的基本结构 流中的异常处理 异常处理新方式 读取的基本结构 运用输入与输出完成复制效果 文件字节流 缓冲流 字符缓冲流 装饰设计模式 转换流(适配器) ...
- 关于Java中的String类知识点小总结
Java中的String类知识点 前言 在 Java 中字符串属于对象,Java 提供了 String 类来创建和操作字符串. 如何创建字符串 最简单的方式 String str = "he ...
- [IOI1994]The Castle
开了博客之后一直没动今天水完题手痒想起这个就来水一篇陈年水题(雾 题目链接<< 题意:给一张n*m个格子的地图信息,求连通块个数以及最大连通块面积. 每个格子四个方向可以有墙,输入用一个十 ...
- linux中搭建phpmyadmin详细流程
一.phpmyadmin部署流程 1.1介绍 phpMyAdmin是一个以PHP为基础,以Web-Base方式架构在网站主机上的MySQL的数据库管理工具,让管理者可用Web接口管理MySQL数据库. ...
- python初学者-鸡兔同笼简单算法
鸡兔同笼问题.假设共有鸡.兔30只,脚90只.求鸡.兔各有多少只 使用for循环快速解决鸡兔同笼问题 for ji in range(0,31): if 2*ji+(30-ji)*4==90: pri ...
- 在 xunit 测试项目中使用依赖注入
在 xunit 测试项目中使用依赖注入 Intro 之前写过几篇 xunit 依赖注入的文章,今天这篇文章将结合我在 .NET Conf 上的分享,更加系统的分享一下在测试中的应用案例. 之所以想分享 ...
- postgre sql递归查询
WITH RECURSIVE r AS (SELECT * FROM [表] WHERE id = xxxunion ALLSELECT [表].* FROM [表], r WHERE [表]. ...