Vue---基础语法
1、回顾
-
规范
目录规范
代码规范
css
js -
前端发展史
-
了解vue
-
vue数据双向绑定的原理
数据劫持以及发布订阅者模式
数据劫持 Object.defineproperty()
Observer/watcher/compile
Observer 劫持属性，看到变化，通知订阅者
compile 绑定数据 指令解析器
watcher 接收到变化后通知相应的函数更新数据数据的改变会引起视图的二次渲染
shim: vue不知ie8
一个shim是一个库，它将一个新的API引入到一个旧的环境，而且要仅靠旧的环境中已有的手段实现polyfill
可以让低版本你的浏览器支持promise等
2、模板语法
2.1 文本
{{ msg }}
02文本.html
{{ msg }} --- {{ num }} --- {{ flag }} --- {{ obj.a }} ---- {{ obj.b }} --
{{ arr[3] }}
data: { // 初始化数据，可以定义很多个，可以定义各种数据类型
msg: 'hello vue',
num: 1,
flag: true,
obj: {
a: 1,
b: 2
},
arr: [1, 2, 4, 5]
}
2.2 纯HTML
v-html vue提供的一个指令，相当于原生js中的 innerHTML 的功能,相当于jQuery中的().html() v-text vue提供的一个指令，相当于原生js中的 innerText 的功能,相当于 jQuery 中的().text() ,一般会用 文本 形式代替 {{ msg }},
作用： 防止XSS,CSRF
作业： XSS, CSRF
用途：传递的代码中如果有HTML标签，并且需要解析的时候，比如说 详情页面 的 详情部分 ，一搬后台会返回带有图文的一些HTML代码
03html.html
<div v-html="msg"></div>
data: {
msg: '<h1>hello vue</h1>'
}
2.3 表达式
赞成使用三元（目）运算符，不赞成写其余的业务逻辑
虽然赞成你使用三元运算符，但不是必须，以此案例为例，可以使用vue的 过滤器（filter） 实现，后面会讲
04表达式
{{ sex == 0 ? '女' : '男' }}
{{ msg.split('').reverse().join('*') }}
data: {
sex: 0,
msg: 'hello vue'
}
2.4、指令
vue中含有v-前缀的特殊属性 ---- 指令
input中使用v-model ，就会把它的值当做是输入框的value值
标签上v-html，就会把它的值插入到该标签内部 v-text
v-if 条件判断 v-else-if v-else
v-show 条件判断
v-for 遍历循环使用
v-on 绑定事件
v-bind 绑定属性
不常用的
v-slot
v-pre
v-cloak
v-once
2.5 缩写
- 事件简写形式 v-on:click =》 @click
<button onclick="fn()">click</button> ---- 原生js
<button v-on:click="fn()">click</button> --- vue
<button @click="fn()">click</button> --- vue简写
- 属性的简写形式 v-bind:class =》 :class
<div class="test"></div> --- 原生，test就是一个固定的值
<div v-bind:class="test"></div> --- vue中，test可以是一个变量
<div :class="test"></div> --- vue简写形式
2.6 绑定属性
绑定属性必然跟标签相关
适合场景
- img 的 src 属性(从服务器获取了地址)
- 组件间的传值
05绑定属性.html
<div id="app">
<div msg="msg">原生的属性，只能是定值</div>
<div v-bind:msg="msg">利用vue的绑定属性，给一个名为msg的属性，添加了一个值为msg的变量</div>
1<img src="img" alt="">
2<img v-bind:src="img" alt="">
</div>
const app = new Vue({
el: '#app',
data: {
msg: 'hello vue',
img: 'https://cn.vuejs.org/images/logo.png'
}
})
3、 class与style绑定
class 与 style 都属于 HTML 的属性， ---- 绑定属性 v-bind:属性 : 属性
3.1 class 绑定
如果数据来源是后端提供的 class 的名字，前端不能操控，就需要使用class语法
- 对象
<style>
.active {
font-size: 40px;
color: #f66;
}
</style>
<div :class="{active: flag}">如果vue项目中的active样式是由flag的值控制的</div>
data: {
flag: true
}
- 数组
<style>
.active {
font-size: 40px;
color: #f66;
}
.test {
background-color: #ccc;
}
</style>
<div :class="[activeClass, testClass]">数组写法就是先把数据定义好，直接数组包裹即可</div>
data: {
activeClass: 'active',
testClass: 'test'
}
作业：style绑定属性
4、条件判断
v-if v-else-if v-else
v-show
v-if 渲染还是不渲染 ---- 运行时消耗更大
v-show 显示还是隐藏 ----- 初始渲染消耗更大
审查元素查看效果
07条件判断.html
<div id="app">
<div v-if="flag">如果为真我就显示</div>
<div v-if="test === 1">test的值为1</div>
<div v-else>test的值不为1</div>
<div v-show="flag">v-show也可以作为条件的判断，但是 显示/隐藏</div>
</div>
作业：详细描述v-if与v-show区别
5、循环遍历
v-for = “item of/in list” :key="唯一性的值"
v-for = “(item, index) of/in list” :key="index"
可以遍历数组，可以遍历对象，还可以遍历字符串，一定要记得加 key 值（钥匙与锁的故事 -- 详细介绍 --- 虚拟DOM算法）
08列表渲染.html
