【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.最终 ...
随机推荐
- sql server的bcp指令
有时需要允许bcp指令 -- 允许配置高级选项EXEC sp_configure 'show advanced options', 1GO-- 重新配置RECONFIGUREGO-- 启用xp_cmd ...
- LLVM程序分析日记之 basic blocks could have duplicate predecessors
We used the predecessors() to get the predecessors of a basic block based on LLVM's IR. The code is ...
- 总结 Visual Studio 2019 发布以来 XAML 工具的改进
不知不觉,Visual Studio 2019 已经出到 16.8 和 16.9 Preview 了.虽然每次更新都林林总总地一大堆新功能和改进,但关于 XAML 的内容总是,always,每次都只有 ...
- Linux 设置日期时间
linux 日期设置 直接设置日期和时间 date -s 2019-02-11 date -s 12:12:12 date -s "2019-02-11 12:12:12"
- windows上mysql5.7服务启动报错
安装之后,启动服务 net start mysql,无法启动,日志报错缺少一些系统表,mysql.user等表 解决办法: bin目下执行:mysqld --initialize-insecure - ...
- Eureka系列(四) 获取服务Server端具体实现
获取服务 Server端流程 我们先看下面这张图片,这张图片简单描述了下我们EurekaClient在调用EurekaServer 提供的获取服务Http接口,Server端实现接口执行的大致流程 ...
- Numpy的学习2-基础运算1
import numpy as np a=np.array([10,20,30,40]) # array([10, 20, 30, 40]) b=np.arange(4) # array([0, 1, ...
- Windows权限维持
前言 最近终于不是那么忙了,有时间静下心来学点知识,这篇文章自起稿到发布,用时近三周,其中有近一周的时间在迷茫在焦躁,甚至怀疑.否定自己.网上的表哥们个顶个儿的优秀,于是就给自己很大的压力,所以那一个 ...
- 【代码周边】MongoDB与Mysql对比以及插入稳定性分析（指定主键的影响）
在数据库存放的数据中,有一种特殊的键值叫做主键,它用于惟一地标识表中的某一条记录.也就是说,一个表不能有多个主键,并且主键不能为空值. 无论是MongoDB还是MySQL,都存在着主键的定义. 对于M ...
- ubuntu虚拟机启用双网卡IP配置
首先要登入自己的虚拟机,这里以ubuntu为例. 配置两块网卡,一块eth0为NAT模式,另一块为eth1仅主机模式 # 进入网卡配置页面vi /etc/network/interfaces # Th ...