vue01

一、什么是vue.js（单页面应用程序）

用于构建用户界面的渐进式框架，采用自底向上增量开发的设计。
核心理念：数据驱动视图，组件化开发
前端三大主流框架：Vue.js Angular.js React.js

二、为什么学习流行框架

轻量级框架：只关注视图层，构建数据的视图集合
简单易学
视图、数据、结构分离
虚拟的DOM

三、框架和库的区别

框架：是一套完整的解决方案，对项目的侵入性比较大，如果项目需要更换框架，则需要架构整个项目
库：提供某一个小功能，对项目的侵入性较小，如果这个库无法满足某些需求，更换一个库即可。

四、MVC与MVVM的区别

MVC是后端分层开发的概念，MVVM是前端视图层的概念
在MVC中，
- v 是视图层view，用来展示数据，发送请求，
- c 是调度层Controller，用来接收数据，响应数据，返回数据，
- m 是模型层model，用来处理数据，与数据库打交道。
MVVM中，
- v 是视图层view，用来展示数据，
- vm 是视图层view-model，用来连接view和model，承上启下的作用，
- m 是模型层model，用来处理逻辑关系

五、展示数据的几种方法（3种）

1、vue的代码结构

1、引入vue.js
2、书写视图层
3、创建vue实例

<!-- 1、引入vue.js -->
<script src="./vue-2.4.0.js">
<body><!-- 2、书写视图层 --><div id="app">  {{msg}}   {{age+3}}   <!-- 今天开始学习vue 21 --><div v-text="msg">123</div>  <!-- 今天开始学习vue --><div v-html="msg">123</div>  <!-- 今天开始学习vue --><div v-text="html">123</div>  <!-- <a href="">学习vue啦</a> --><div v-html="html">123</div>  <!-- 学习vue啦 --></div>
</body>
<script>//创建vue实例let vm = new Vue({//控制区域el:"#app"//存放数据的地方data: {msg: '今天开始学习vue',age: 18,html: '<a href="">学习vue啦</a>'},//存放方法的地方methods: {}})
</script>

三种方法：插值表达式 {{ }} v-text v-html

插值表达式进行简单的运算
v-text和v-html的区别
- 相同点：都会替换标签中原有的内容
- 不同点：v-text不能解析富文本，v-html能解析富文本

六、v-on和v-bind

1、v-on：事件的绑定，简写@

2、v-bind：元素属性的绑定，简写为冒号

<body><div id="app"><!-- v-bind:元素的属性绑定 --><img v-bind:src="imgsrc" alt=""><!-- 简写 : --><img :src="imgsrc" alt=""><!-- 事件的绑定 --><button v-on:click="log1">我是按钮1</button><!-- 简写 @ --><button @click="log2">我是按钮2</button><button @click="changeImg">修改图片</button><div>
</body>
<script>
let vm = new Vue({el: "#app",data: {imgsrc: 'https://pic.rmb.bdstatic.com/bjh/914b8c0f9814b14c5fedeec7ec6615df5813.jpeg',value:"我是输入框的值"},methods: {log1(){console.log(11111111);},log2(){console.log(22222222);},changeImg(){console.log(this);console.log("测试");console.log(this.imgsrc);if(this.imgsrc == ""){
this.imgsrc="https://pic.rmb.bdstatic.com/bjh/914b8c0f9814b14c5fedeec7ec6615df5813.jpeg"}else{this.imgsrc=""}}}
})
</script>