day01
1. 首先了解一下Vue的定义
官网称 Vue是一个渐进式JavaScript框架,所谓渐进式指的是主张最少,就比如jQuery主要是用来做动画的,bootstrap是ui框架,
数据请求:ajax,axios;
简单来说就是从使用vue的方式上来进行区分定义的,也可以单独使用vue中的api,也可以使用vue中的底层服务,所以也可以这么说vue即是库又是框架。
2.
优点:易上手,灵活,高效,模块化友好,SPA(单页面应用)
这里区分一下什么是单页面应用和多页面应用
多页面应用:一个url对应一个html页面,多个url对应多个html页面,有利于SEO优化,但是容易出现白屏。
单页面应用:: 多个url对应一个html页面, 不利于SEO优化,首屏加载慢,但是不会出现白屏、
3
缺点:
不支持IE6 7 8
首屏加载慢
不利于SEO优化
4
Vue的核心是
数据驱动
组件系统
5.三种引入方式
①cdn方式引入
②npm下载使用 npm install vue --save 或者 cnpm install vue --save
③脚手架(后面学习了再补充吧)
④官方下载引入
6.创建一个Vue实例
new Vue({
el:"#app", // 这里的el叫做挂载点,和html中的id绑定,这里最好使用id,因为id是唯一的,若使用 .app 只对第一个类名起作用!
data:{ // 这里的data用来存放各种变量,如果在methods中某个函数需要用到这个message需要 使用 this.message进行调用。
message:"你好Vue!"
},
methods:{
getMessage(){
this.message = '你好啊Vue!'
}
//这里写函数方法
}
})
9.
v-html v-text {{}} 三种指令各自的优缺点
首先他们都是用来显示数据的
不同的是 v-html指令可以解析html标签 其他两种不可以
v-text 不能识别html标签但是首屏不会出现{{}}
v-html 可以解析html标签但是写法麻烦 首屏不会出现{{}}
{{}} 不能识别标签首屏会出现{{}} 但是很方便 易上手
10.上文说到首屏容易出现 {{}} 那怎么解决呢?
①第一种办法就是 使用v-html或者v-text指令
②第二种办法 css种写入
[v-cloak]{
display: none;
}
然后再html中写入
<div id="app" v-cloak>
//这样的话 这个标签内的{{}} 疯狂刷新不会 出现{{}}了 很实用
</div>
10
v-bind 动态数据绑定
语法糖 :(就一个冒号)
<img v-bind:src="imgSrc" v-bind:imgTitle="title"> //正常写法
<img :src="imgSrc1"> //简写
v-bind 一般是用来 绑定已存在的属性 还可以绑定自定义属性
切记绑定的是属性 比如img标签的src属性 title属性 video或者audio的src属性
或者 a标签的href属性 这些都是属性 或者 自己自定义属性
11.
v-model双向数据绑定
<input type="text" v-model="age">
//模型部分
new Vue({
el:'#app',
data:{
name:'张三',
age:18
}
})
在这里不管你是手动更改 javascript 中的 age变量 还是 更改表单的值 数据会同时发生改变 这就是双向绑定
12.
v-if 和v-show的区别
v-if 又称为惰性加载 意思就是 如果v-if=“false”的情况下 在HTML结构中根本不存在,根本就不加载这个DOM节点,v-if的切换是节点的删除与操作,性能差,
对浏览器不友好
v-show 如果为false时他其实就是给当前这个标签添加了一个display:none这个属性 如果说频繁的切换使用v-show对浏览器比较友好
**13.
v-else的使用注意事项
v-else使用必须和v-if紧挨着**
<div id="app">
<p v-if="arr.length>0">你好</p>
<p v-else>暂无数据</p>
<!-- 注意 v-if要和v-else连续用 -->
<!-- v-show 没有v-else的语法 -->
</div>
14.
v-for
这是一个循环语句
可以渲染数据
v-for使用时注意事项
<div id="app">
<a v-for="item in arr" :href="item.src">
<img :src="item.imgsrc" alt="">
</a>
</div>
这里我只需要使用item所以做了简写 ,特殊情况下需要用到index这时候我们可以这样写
<p v-for="(item,index) in arr" :haha="item.title">
{{item}}---{{index}}
</p>
15.面试题
1、vue与其它框架对比的优势和劣势?
答:优势:擅长处理数据的增删改差。劣势:不利于SEO优化、不支持IE6 7 8、首屏加载慢
2、mvvm框架是什么?它和其它框架(jquery)的区别是什么?哪些场景适合?
答:M-model模型 V-view视图 VM-view model视图模型,通过view model来改变,它是模型和视图的中间桥梁。mvvm擅长处理数据的增删改查,而jquery擅长处理动画
3、vue等单页面应用及其优缺点
4、说出至少4种vue当中的指令和它的用法
5、v-if 和 v-show 区别
16.作业
需求:做出效果图即可
需要用到的json文件内容如下:
{
“d”:[{“img”:“https://img.alicdn.com/bao/upload/TB19T_1VwHqK1RjSZFEXXcGMXXa.jpg_190x190Q75s0.jpg_.webp”,“logo”:“https://img.alicdn.com/bao/upload/TB1MJZoVxnaK1RjSZFtXXbC2VXa.png_70x70Q75s0.jpg_.webp”,“name”:“顺钦银楼旗舰店”,“desc”:“满300减60元”},{“img”:“https://img.alicdn.com/bao/upload/TB10t5Mi13tHKVjSZSgXXX4QFXa.jpg_190x190Q75s0.jpg_.webp”,“logo”:“https://img.alicdn.com/bao/upload/TB1GrubV4naK1RjSZFBXXcW7VXa.png_70x70Q75s0.jpg_.webp”,“name”:“种善堂大药房”,“desc”:“爆款第2件半价”},{“img”:“https://img.alicdn.com/bao/upload/TB1bNnhVIbpK1RjSZFyXXX_qFXa.jpg_190x190Q75s0.jpg_.webp”,“logo”:“https://img.alicdn.com/bao/upload/TB1gMeGVSzqK1RjSZPcXXbTepXa.png_70x70Q75s0.jpg_.webp”,“name”:“美乐棵旗舰店”,“desc”:“全店享满赠”},{“img”:“https://img.alicdn.com/bao/upload/TB1mAL.b2c3T1VjSZPfXXcWHXXa.jpg_190x190Q75s0.jpg_.webp”,“logo”:“https://img.alicdn.com/bao/upload/TB1A7D.b2c3T1VjSZPfXXcWHXXa.png_70x70Q75s0.jpg_.webp”,“name”:“Sparllo海外旗舰店”,“desc”:“每满299减5元”},{“img”:“https://img.alicdn.com/bao/upload/TB1aBnGVrPpK1RjSZFFXXa5PpXa.jpg_190x190Q75s0.jpg_.webp”,“logo”:“https://img.alicdn.com/bao/upload/TB1qfMJiu3tHKVjSZSgXXX4QFXa.png_70x70Q75s0.jpg_.webp”,“name”:“古尚古旗舰店”,“desc”:“全场满88减10”},{“img”:“https://img.alicdn.com/bao/upload/TB17dX1WlLoK1RjSZFuXXXn0XXa.jpg_190x190Q75s0.jpg_.webp”,“logo”:“https://img.alicdn.com/bao/upload/TB1ryWsWhnaK1RjSZFtXXbC2VXa.png_70x70Q75s0.jpg_.webp”,“name”:“如喜旗舰店”,“desc”:“满300减30不封顶”},{“img”:“https://img.alicdn.com/bao/upload/TB1csu3VSrqK1RjSZK9XXXyypXa.jpg_190x190Q75s0.jpg_.webp”,“logo”:“https://img.alicdn.com/bao/upload/TB19QLdVFzqK1RjSZFCXXbbxVXa.png_70x70Q75s0.jpg_.webp”,“name”:“张裕官方旗舰店”,“desc”:“抢店铺双重赠品”},{“img”:“https://img.alicdn.com/bao/upload/TB1z_bEXUGF3KVjSZFvXXb_nXXa.jpg_190x190Q75s0.jpg_.webp”,“logo”:“https://img.alicdn.com/bao/upload/TB1ejDFXQ5E3KVjSZFCXXbuzXXa.png_70x70Q75s0.jpg_.webp”,“name”:“虹越旗舰店(天猫)”,“desc”:“满300减30”},{“img”:“https://img.alicdn.com/bao/upload/TB1nHV1V4jaK1RjSZKzXXXVwXXa.jpg_190x190Q75s0.jpg_.webp”,“logo”:“https://img.alicdn.com/bao/upload/TB1tARCVYrpK1RjSZTEXXcWAVXa.png_70x70Q75s0.jpg_.webp”,“name”:“婷妃内衣旗舰店”,“desc”:“满一百减十元”},{“img”:“https://img.alicdn.com/bao/upload/TB1kQGbVyLaK1RjSZFxXXamPFXa.jpg_190x190Q75s0.jpg_.webp”,“logo”:“https://img.alicdn.com/bao/upload/TB14bFWVwHqK1RjSZJnXXbNLpXa.png_70x70Q75s0.jpg_.webp”,“name”:“韩雅伊人旗舰店”,“desc”:“满99-10元”},{“img”:“https://g.alicdn.com/s.gif”,“logo”:“https://g.alicdn.com/s.gif”,“name”:“好护士器械旗舰店”,“desc”:“全场低至9.9”},{“img”:“https://g.alicdn.com/s.gif”,“logo”:“https://g.alicdn.com/s.gif”,“name”:“澳兰黛旗舰店”,“desc”:“全场满299-50”},{“img”:“https://g.alicdn.com/s.gif”,“logo”:“https://g.alicdn.com/s.gif”,“name”:“新日电动车旗舰店”,“desc”:“晒单再领赠品”},{“img”:“https://g.alicdn.com/s.gif”,“logo”:“https://g.alicdn.com/s.gif”,“name”:“帝防旗舰店”,“desc”:“比5折低 每300-30”},{“img”:“https://g.alicdn.com/s.gif”,“logo”:“https://g.alicdn.com/s.gif”,“name”:“凤凰金圣源专卖店”,“desc”:“1元秒大额券”},{“img”:“https://g.alicdn.com/s.gif”,“logo”:“https://g.alicdn.com/s.gif”,“name”:“蛟蓓旗舰店”,“desc”:“全店低至三折”},{“img”:“https://g.alicdn.com/s.gif”,“logo”:“https://g.alicdn.com/s.gif”,“name”:“日丰家居旗舰店”,“desc”:“买就送浴室挂件”},{“img”:“https://g.alicdn.com/s.gif”,“logo”:“https://g.alicdn.com/s.gif”,“name”:“eko家居旗舰店”,“desc”:“抢限时2件7.5折”},{“img”:“https://g.alicdn.com/s.gif”,“logo”:“https://g.alicdn.com/s.gif”,“name”:“GoPro官方旗舰店”,“desc”:“直降送好礼”},{“img”:“https://g.alicdn.com/s.gif”,“logo”:“https://g.alicdn.com/s.gif”,“name”:“美国belli官方旗舰店”,“desc”:“全店折后满300-60”}]
}