Vue开发模式与Vue-cli

一、什么是Vue
1、简介
  • 渐进式的JS框架
  • Vue的核心库只关注视图层
2、MVVM模式—数据双向绑定
  • Moderl:模型层,在这里表示Javascript对象
  • View:视图层,在这里表示DOM(HTML操作的元素)
  • ViewModel:连接视图和数据的中间件,Vue就是MVVM中的ViewModel层实现者

Image.png

3、VM的实现原理
  • ViewModle中内置了一个观察者(上图中的DOM Listeners),观察者做两件事
    • 观察视图变化:视图变了,通知数据进行变化
    • 观察数据的变化:数据变了,就通知视图进行变化
  • MVVM通过VM实现了双向数据绑定
4、Vue中的关键字
  • 绑定数据:v-model
  • 绑定事件(vue中定义的函数):@或v-on
  • 绑定html标签中的属性:v-bind
  • v-html和v-text
    • v-html:将vue属性中的属性的值作为html元素使用
    • v-text:将vue属性中的值作为纯文本使用
  • 循环语句:v-for
二、Vue组件
  • Vue的一大特性:组件化
  • 可以将vue对象作为一个组件,反复的使用
1、注册的方式
  • 全局注册
  • 本地注册
2、全局注册
  • 注册组件

  • 使用组件:在被vue绑定的html元素中才能使用组件。如果一个div没有被vue绑定,那么这个div中不能使用之前注册的组件

 

三、vue开发模式
1、vue-cli脚手架工具
  • 在进行Vue项目开发时,可以选择不同的Vue模版(骨架)进行项目的搭建。比如simple、webpack-simple、webpack等
  • vue-cli是官方提供的一个脚手架,即预先定义好的目录结构及基础代码,用于快速生成一个vue项目模板
2、安装vue-cli

3、创建vue项目文件夹并打开

4、使用vue命令创建基于webpack-simple骨架的项目

  • vue-cli-demo是项目名
5、创建基于webpack骨架的项目

使用vue list可以列出当前官方提供的骨架
6、安装项目依赖

7、以开发模式启动

Image [2].png
8、webpack-simple项目结构
  • node_modules:所需要的依赖都在这里
  • src:写代码的地方
    • main.js:整个vue项目的入口js
    • app.vue:这种以“.vue”为扩展名的内容(文件),实际上就是一个Vue对象,也称为Vue组件
  • package.json:放置配置信息
  • webpack.config.js:具体的配置信息
四、.vue文件的组成部分
组成部分对应关系

  • <template>–>html
  • <script>–>js
  • <style>–>css
Image [3].png
五、在vue组件中使用多个vue组件搭建一个页面
1、全局注册
  • 在main.js中,通过Import和Vue.component配合,将一个.vue文件注册成为一个标签
  • 该标签可以在整个项目中使用
2、本地注册
  • 在组件的内部去注册另外一个组件,成为一个标签,这个标签,只在组件的内部使用,而不能在其他组件内使用。通过components.
六、各组件之间的参数传递
Image [4].png
  • 通过子组件的props部分,指明可以接受的参数,父组件通过在标签中写明参数的键值对来传递参数
  • props是表示一个组建的参数部分,那么props的写法有两种:
    • props:[‘参数1′,’参数2’]
    • props:{参数名1:{type:String,required:true,default:’xxxx’}, 参数名2:{…}}
七、Vue中发送Ajax请求—Axios

1、什么是Axios
2、为什么要使用Axios
3、Axios的使用
  • 安装vue axios

  • 在main.js中引入

  • 发送Ajax请求

可以使用created()函数,在页面一访问的时候立刻进行请求

八、跨域问题
1、什么是跨域问题?
  • 跨域,指的是浏览器不能执行其他网站的脚本
  • 这是由于浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制
2、什么是同源?
  • 是指域名、协议、端口均相同
3、如何解决跨域问题?
  • CORS(跨资源共享)解决跨域问题
    • 它允许浏览器向跨域服务器发出XMLHttpRequest请求
    • 服务器实现CORS接口,就可以跨源通信
  • JSONP