【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.最终 ...
随机推荐
- Vue--子组件相互传参
引用了element做按钮组件 父组件 创建子组件公用的空vue变量,为pubVue,并传给需要互相传参/互相调用方法的两个子组件 <template> <div> <b ...
- strin 字符串的内置函数
count("x")统计字符串的元素的个数 a = "hello kitty" print (a.count("t"))#统计t出现的个数 ...
- 在IDEA中使用JDBC获取数据库连接时的报错及解决办法
在IDEA中使用JDBC获取数据库连接时,有时会报错Sat Dec 19 19:32:18 CST 2020 WARN: Establishing SSL connection without ser ...
- 网络知识扫盲——DNS
参考文章链接 : https://baijiahao.baidu.com/s?id=1668393227924896391&wfr=spider&for=pc 一.DNS 是什么? ...
- maven继承父工程统一版本号
一.建立一个maven工程 pom类型 统一管理依赖以及版本号 子工程不会使用所有的定义的依赖 子工程使用依赖时无需指定版本号 pom.xml <project xmlns="http ...
- 关于django的坑（一）
关于django orm 的坑: 关于设置数据库表自动更新 django的orm关于更新数据库的方法有update和save两种方法.想要表中自动更新需要一下几个条件: 使用 DateTimeFiel ...
- Arduino IDE开发ESP8266-01S连接MQTT服务器 控制继电器点亮LED
准备条件: 1.Arduino IDE 2.ESP-01S模块 2.MQTT服务器 3.手机热点或路由器热点 Wi-Fi芯片 默认订阅的主题是 "开关控制" 当你发送主题 &q ...
- new 的原理和实现
new 运算符内部做了如下四个操作: 创建一个空的简单 JavaScript 对象(即{}): 链接新对象(即设置该新对象的构造函数)到函数对象: 将新创建的对象作为 this 的上下文: 如果该函数 ...
- python-scrapy爬取某招聘网站(二)
首先要准备python3+scrapy+pycharm 一.首先让我们了解一下网站 拉勾网https://www.lagou.com/ 和Boss直聘类似的网址设计方式,与智联招聘不同,它采用普通的页 ...
- 知乎上看到的一篇讲解Epoll的文章，较形象生动
作者:蓝形参链接:https://www.zhihu.com/question/20122137/answer/14049112来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...