vue
初探vue
1.什么是MVVM
? MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。
? 采用双向绑定（data-binding）：即数据双向绑定，数据和视图同步变化。View的变动，自动反映在 ViewModel，反之亦然
2.mvvm的优点
? mvvm和mvc模式一样，主要目的是分离视图和模型
- 低耦合，View可独立于Model变化和修改，ViewModel可以绑定到不同的View上。
- 可复用，可以把视图逻辑放在VM里面，让多个View重用这段视图逻辑
- 独立开发，开发人员可专注于业务逻辑和数据的开发，设计人员可以专注于页面设计
- 可测试，可以针对VM来测试
一、vue基本语法
1. v-if
123
hello
hellohellohello
2. v-for
{{it.id}}--->{{index}}
二、vue的七个属性
-
el属性
-
- 用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
-
data属性
-
- 用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
-
template属性
-
- 用来设置模板，会替换页面元素，包括占位符。
-
methods属性
-
- 放置页面中的业务逻辑，js方法一般都放置在methods中
-
render属性
-
- 创建真正的Virtual Dom
-
computed属性
-
- 用来计算
-
watch属性
-
- watch:function(new,old){}
- 监听data中数据的变化
- 两个参数，一个返回新值，一个返回旧值，
- watch:function(new,old){}
三、vue绑定事件
1. v-on简写 @
v-on 指令用于绑定HTML事件 ：v-on:click 缩写为 @click
2. v-bind简写 :
v-bind指令用于设置HTML属性：v-bind:href 缩写为 :href
3. v-model 实现数据双向绑定
男
女
双向绑定展示: {{message}}
四、vue component 组件
component，可自定义标签名字
v-for，遍历数组
v-bind，把遍历出来的it绑定到its属性上 简写:
五、vue异步通信axios
1.什么是axios
? axios是一个开源的可以用在浏览器端和NodeJS的异步通信框架，主要作用就是实现ajax异步通信，特点：
- 从浏览器中创建XmlHttpRequests
- 从node.js创建http请求
- 支持Promise API（js链式编程）
- 拦截请求和响应
- 转换请求数据和响应格式
- 取消请求
- 自动转换json数据
- 客户端支持防御XSRF（跨域请求伪造）
为什么用axios
? vue是一个视图层框架，并且作者严格遵守SoC（关注度分离原则）所以vue并不包含ajax的通信功能。
Vue
{{ info.name }}
六、vue计算属性
? computed：可以把计算出来的结果，保存在属性中，缓存在内存中，除非缓存刷新，否则不会再重新计算；而methods中的方法不会把结果放在缓存，会重新计算结果。
Document
nowtime:{{nowtime}}
七、插槽 slot
? 内容分发：在vue.js中，我们使用
? 比如：制作一个待办事项组件，该组合由标题和内容组成，这三个组件又是相互独立，该如何操作？
Document
自定义分发事件
Document
八、vue-cli
vue-cli 是官方提供的一个脚手架，用于快速生成一个vue项目模板。
主要功能
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
需要的环境
- node.js : https://git-scm.com/downloads/
- 淘宝镜像下载 : https://npm.taobao.org/mirrors/git-for-windows/
安装node.js淘宝镜像下载加速器( cnpm )
# 配置淘宝镜像
# -g 全局安装
npm config set registry https://registry.npm.taobao.org
npm install cnpm -g
# 或者使用这条语句解决下载慢的问题
npm install --registry=https://registry.npm.taobao.org
安装 vue-cli
npm install -g @vue/cli
九、webpack
? webpack是一个js应用的静态模块打包器（module bundler）。处理应用程序时，会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个bundler。
hello.js
exports.sayHi=function () {
document.write("kk历险记
")
}
main.js
var hello = require("./hello");
hello.sayHi();
webpack.config.js
module.exports= {
entry: './module/main.js',
output: {
filename: './js/bundle.js'
}
};
index.html
Title
十、vue-router 路由
安装vue-router
npm install vue-router --save-dev
First.vue
内容页面
App.vue
内容页
main.js
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import router from './router'
Vue.config.productionTip = false
Vue.use(VueRouter)
new Vue({
el: '#app',
router,
components: { App },
template: '/router/index.js
import Vue from "vue"
import VueRouter from 'vue-router'
import First from "../components/First";
Vue.use(VueRouter)
export default new VueRouter({
routes:[
{
path:'/first',
name:'first',
//跳转的组件
component:First
}
]
});
十一、vue + elementUI
npm安装
npm i element-ui -s
CDN安装
目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
vue-elementUI 我的GitHub仓库传送门