Vue速成day01

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”}]
}