vue
1.第一个vue小程序
1、idea安装插件vue.js
2、下载vue.
3.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="id1">
{{ message }}
</div>
<script type="text/javascript">
var app = new Vue({
el:"#id1",
data:{
message:"hello vue "
}
})
</script>
</body>
</html>
显示 hello vue在控制台改变
或者通过:
<div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span> </div>
你看到的 v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。
如果你再次打开浏览器的 JavaScript 控制台，输入 app2.message = ‘新消息‘，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。
2、MVVM
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。
前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。
把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。
我们惊讶地发现，改变JavaScript对象的状态，会导致DOM结构作出对应的变化！这让我们的关注点从如何操作DOM变成了如何更新JavaScript对象的状态，而操作JavaScript对象比DOM简单多了！
设计思想
- 这就是MVVM的设计思想：关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操作DOM的繁琐步骤中解脱出来！
3.基础语法：
条件判断：if
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
<p v-else>现在你没看到我</p>
<p v-if="seen">现在你看到我了</p>
<p v-else-if="seen===‘a‘">现在你看到a</p>
<p v-else>aaaaa</p>
</div>
<script type="text/javascript">
var app3 = new Vue({
el: ‘#app-3‘,
data: {
seen: true
}
})
</script>循环：for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
</head>
<body>
<ul id="id1">
<li v-for="item in iteams">
{{item.message}}
</li>
</ul>
<script type="text/javascript">
var app = new Vue({
el:"#id1",
data:{
iteams:[
{message:"space1"},
{message:"space2"},
{message:"space3"}
]
}
})
</script>
</body>
</html>4.绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="id1">
<button v-on:click="saihello" >clock me</button>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#id1",
data: {
message: "space1"
},
methods:{
saihello:function () {
alert(this.message)
}
}
})
</script>
</body>
</html>5.vue7个属性
学习vue我们必须之到它的7个属性，8个 方法，以及7个指令。787原则
el属性
- 用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
data属性
- 用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
template属性
- 用来设置模板，会替换页面元素，包括占位符。
methods属性
- 放置页面中的业务逻辑，js方法一般都放置在methods中
render属性
- 创建真正的Virtual Dom
computed属性
- 用来计算
watch属性
- watch:function(new,old){}
- 监听data中数据的变化
- 两个参数，一个返回新值，一个返回旧值，
data的三种写法
在vue中，定义data可以有三种写法。
1.第一种写法，对象。
var app = new Vue({
el: ‘#yanggb‘,
data: {
yanggb: ‘yanggb‘
}
})2.第二种写法，函数。
var app = new Vue({
el: ‘#yanggb‘,
data: function() {
return {
yanggb: ‘yanggb‘
}
}
})3.第三种写法，函数，是第二种写法的ES6写法。
var app = new Vue({
el: ‘#yanggb‘,
data() {
return {
yanggb: ‘yanggb‘
}
}
})三种写法的区别
在简单的vue实例应用中，三种写法几乎是没有什么区别的，因为你定义的#yanggb对象不会被复用。
但是如果是在组件应用的环境中，就可能会存在多个地方调用同一个组件的情况，为了不让多个地方的组件共享同一个data对象，只能返回函数。这个与JavaScript的作用域特性有关，函数自己拥有私有的作用域，函数之间的作用域相互独立，也就不会出现组件对数据的绑定出现交错的情况。
6.双向绑定
- 可以通过 改变js对象(model)，改变view
- 借助v-model绑定model，可以通过改变view 传递数据到model
UI控件上,表单的input ,selected上创建双向数据流通.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="id1">
请输入：<input type="text" value="123" v-model="message"/> {{message}}
<br>
<input type="radio" name="sex" value="male" v-model="sex1" checked>Male
<br>
<input type="radio" name="sex" value="female" v-model="sex1" >Female
<br>
{{sex1}}
</div>
<script type="text/javascript">
var app = new Vue({
el:"#id1",
data: {
message: "space1",
sex1:""
},
})
</script>
</body>
</html>7.组件
- 自定义标签
- 可重复使用的vue实例,模板
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
</head>
<body>
<ul id="id1">
//使用模板,传递参数给模板
<diy1 v-for="item in items" v-bind:qin="item"></diy1>
</ul>
<script type="text/javascript">
// 创建组件
Vue.component("diy1",{
props:[‘qin‘],
template:" <li>{{qin}}</li>"
})
var app = new Vue({
el:"#id1",
data: {
items:["java","python","c++"]
}
})
</script>
</body>
</html>组件的组织
通常一个应用会以一棵嵌套的组件树的形式来组织：
例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。
为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的：
Vue.component(‘my-component-name‘, {
// ... options ...
})全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。
到目前为止，关于组件注册你需要了解的就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把组件注册读完。
8.网络通信
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
特性
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
Vue基于 关注度分离 专注于视图层，少用jquery，频繁操作DOM树。
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="id1">
<div>{{info.name}}</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#id1",
data(){
//请求返回的数据,必须和json字符串一样
return{
info:{
name:"",
url: "",
page: "",
isNonProfit:"",
}
}
},
//进行网络通信,底部实现是ajax
mounted(){
//钩子函数
axios.get("./data.json").then(response=>(this.info=response.data))
}
})
</script>
</body>
</html>9.Vue生命周期
八大钩子函数
1，beforeCreate（）：此钩子函数发生在实例创建之前，此时data，el，methods未初始化，观测数据和事件初始化完成，
2，created（）：此钩子函数data，methods数据初始化；el未初始化
3，beforemount（）：此钩子函数内就运用了dom虚拟技术 即是先占位置 数据不更新 （操作dom时拿不到数据），el未初始化完成
4：mounted（）：实例挂载完成，
5：beforeupdate（）：此函数发生在视图dom数据更新之前，dom虚拟和下载补丁之前，即data更新 当操作dom时拿不到数据，
6：updated（）：视图更新完成，
7：beforedestory（）：此时实例仍未销毁，this可以使用
8：destoryed（）：实例销毁完成，
生命周期图示
下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。
中文版：
10.计算属性
计算属性=把计算出来的值，保存在属性里面，在内存中运行，虚拟DOM，想象成缓存。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="id1">
fun1:{{data1()}}
<br>
fun2:{{data2}}
</div>
<script type="text/javascript">
var app = new Vue({
el:"#id1",
data: {
message:"aaaa"
},
methods: {
data1:function () {
return Date()
}
},
computed:{
data2:function () {
this.message;
return Date()
}
}
})
</script>
</body>
</html>
11.插槽slot
Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 [Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。
就是在页面里面预留 位置 ，提前规划好位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="id1">
<slot1>
<title2 slot="title" v-bind:title1="messgae"></title2>
<lis slot="lis" v-for=" i in items " v-bind:item="i"></lis>
</slot1>
</div>
<script type="text/javascript">
//插槽
Vue.component(‘slot1‘,{
template:" <div> <slot name=‘title‘></slot> <ul> <slot name=‘lis‘></slot> </ul> </div>"
})
Vue.component(‘title2‘,{
props: [‘title1‘],
template: ‘<div>{{title1}}</div>‘
});
Vue.component(‘lis‘,{
props: [‘item‘],
template:"<li>{{item}}</li>"
});
var app = new Vue({
el: "#id1",
data:{
messgae:"书籍列表",
items:["java","c++","python"]
}
});
</script>
</body>
</html>
自定义事件
<!-- v-on:remove="removelist(index)" 自定义事件remove-->
this.$emit("remove",index) 通过这个把组件的函数 映射到自定义事件上，调用自定义事件的函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="id1">
<slot1>
<title2 slot="title" v-bind:title1="messgae"></title2>
<lis slot="lis" v-for=" (i, index) in items" v-bind:item="i" v-bind:index1="index"
v-on:remove="removelist(index)" v-bind:key="index" >
</lis>
</slot1>
</div>
<script type="text/javascript">
//插槽
Vue.component(‘slot1‘,{
template:" <div> <slot name=‘title‘></slot> <ul> <slot name=‘lis‘></slot> </ul> </div>"
})
Vue.component(‘title2‘,{
props: [‘title1‘],
template: ‘<div>{{title1}}</div>‘
});
Vue.component(‘lis‘,{
props: [‘item‘,"index"],
template:"<li>-- {{index}} ----{{item}} <button v-on:click=‘remove‘>删除</button></li>",
methods:{
// this.$emit("remove",index1)
remove:function (index) {
this.$emit("remove",index)
}
}
});
var app = new Vue({
el: "#id1",
data:{
messgae:"书籍列表",
items:["java","c++","python"]
},
methods: {
//index表示下标
removelist:function (index1) {
console.log("删除了"+this.items[index1]+"---------")
this.items.splice(index1,1)
}
}
});
</script>
</body>
</html>12.实际开发
Vue的开发都是基于NodeJS，实际开发采用vue-cli,vue-route路由,vuex做状态管理,VueUI ，界面一般使用ElementUI(饿了吗)，或者ICE(阿里巴巴)
13.Vue-cli
vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
vue-cli是有Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板，是为现代前端工作流提供了 batteries-included的构建设置。只需要几分钟的时间就可以运行起来并带有热重载，保存时 lint 校验，以及生产环境可用的构建版本。
主要的功能
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
index 会自动加载 main.js 给他的 模板,main.js的模板来自App.vue
项目结构
需要的环境：
nodejs(官网下载)
git
确定 nodejs安装成功
node -v npm -v //淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org
使用npm 安装 cnpm
1. 需要更改一个安装路径
npm config set registry "http://registry.npmjs.org/"
2. 再次使用npm进行全局安装cnpm
npm install -g cnpm
3.输入cnpm -v 即可出现版本号使用cnpm安装vue-cli
cnpm install -g vue-cli
vue list
//查看可以基于那些模板进行创建，通常我们使用webpack13.1、创建第一个Vue项目
创建Vue项目
vue init webpack myVue
? Project name myvue ? Project description A Vue.js project ? Author helloWorld ? Vue build standalone ? Install vue-router? No ? Use ESLint to lint your code? No ? Set up unit tests No ? Setup e2e tests with Nightwatch? No ? Should we run `npm install` for you after the project has been created? (recommended) no
初始化并运行
//进入项目,安装依赖 npm install //启动项目 npm run dev
Your application is running here: http://localhost:8080
14、webpack
本质上，webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack它是代码编译工具，有入口，出口、loader和插件
模块的进化
最原始的js加载方式,
<script src="" ></script>
每一个文件看做一个模块，那么他们的接口暴露在全局作用域下。
弊端
- 全局作用域变量冲突
- 按照
<script>书写的顺序进行加载 - 开发人员必须主管解决模块和代码库的依赖关系
- 大型项目各种资源难以管理，长期积累的问题导致代码库混乱不堪
CommonJS
CommonJS是一种被广泛使用的js模块化规范，核心思想是通过require方法来同步加载依赖的其他模块，通过module.exports导出需要暴露的接口。
采用 CommonJS 导入及导出的代码如下：
//导入 const moduleA = require ( ’. / moduleA’); //导出 module .exports = moduleA.someFunc;
AMD是什么
? Asynchronous Module Definition，即异步模块加载机制
? 作为一个规范，只需定义其语法API，而不关心其实现。AMD规范简单到只有一个API，即define函数：
CMD
(Common Module Definition)通用模块定义，它解决的问题和AMD规范是一样的，只不过在模块定义方式和模块加载时机上不同，CMD也需要额外的引入第三方的库文件，SeaJS
ECMAScript 6（简称ES6）
是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言 [1]
安装webpack
安装：
cnpm install webpack -g cnpm install webpack-cli -g
测试:
D:\Code\myvue\myVue>webpack -v 4.44.1 D:\Code\myvue\myVue>webpack-cli -v 3.3.12
配置
Webpack 最关键的就是 webpack.config.js 配置文件，架构的好坏都体现在这个配置文件中。
- 入口(entry) ：入口文件，制定WebPack用哪个文件作为项目的入口
- 输出(output)：指定WebPack把处理完成的文件放置到指定路径
- model：模块，用于处理各种类型的文件
- 插件(plugins)：如：热更新，代码重用等
- resolve：设置路径指向
- watch：监听，用于设置文件改动后直接打包成文件。
使用webpack
1.创建一个文件夹
2.创建一个 module 目录，用于放置JS模块等资源文件
3.在module创建hello.js文件，编写js模块代码
"user strict"
//暴露一个方法
exports.sayHi=function () {
document.write("<div>我在学前端</div>")
}4.在module创建main.js文件,作为入口文件,
"user strict"
//require 映入模块
var hello = require("./hello");
hello.sayHi()5.创建配置文件webpack..conf.js，使用webpack打包
? 设置入口，出口
"use strict"
var path = require(‘path‘);
module.exports = { //注意这里是exports不是export
entry: "./module/index.js", //入口文件
output: { //输出文件
path: path.resolve(__dirname,‘dist‘), //输出文件的目录
filename: ‘bundle.js‘ //输出文件的名称
}
}6.创建HTML文件，引入打包后的js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>结果：
15.vue-router
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为
安装和使用
基于vue-cli创建的项目,进入项目后进行安装vue-router插件
cnpm install vue-router --save-dev //安装到开发环境
在模块进行使用 ,必须通过Vue.use()进行加载
import VueRouter from "vue-router"; //安装路由 Vue.use(VueRouter)
1.创建组件
Context.vue
<template>
<h1>内容页</h1>
</template>
<script>
export default {
name: "Context"
}
</script>
<style scoped>
</style>Main.vue
<template>
<h1>主页</h1>
</template>
<script>
export default {
name: "Index"
}
</script>
<style scoped>
</style>2.创建自定义路由
在src下创建route目录，创建index.js
index.js
import Vue from "vue";
import VueRouter from "vue-router";
import Context from "../components/Context";
import Main from "../components/Main";
//安装路由
Vue.use(VueRouter)
//配置路由
export default new VueRouter({
//注册路由
routes:[
{
//路径
path:"/context",
//名称
name:"context",
//组件
component:Context
},
{
//路径
path:"/main",
//名称
name:"main",
//组件
component:Main
}
]
})3.注册路由
在main.js入口文件注册
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue‘
import App from ‘./App‘
import Router from ‘./route/index‘
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: ‘#app‘,
components: { App },
template: ‘<App/>‘,
//注册全部路由
router:Router
})结果：
