MVVM模式
一、第一个Vue程序
1.IDEA安装Vue.js
2. 创建html文件，并导入Vue.js的CDN
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。
-
Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
-
unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
-
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
3. 运行
二、基本语法
1.if、for
三、绑定事件
绑定事件查询：https://www.jquery123.com/category/events/
四、 组件
五、Axios异步通信
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>[v-clock]{display:none;}</style><!--解决闪烁问题-->
</head>
<body>
<!--View层-->
<div id="app" v-clock><!--v-clock 解决闪烁问题-->
<!--可以使用data.json里的所有数据-->
<h1>{{info.name}}</h1>
<h1>{{info.links}}</h1>
<!--绑定url-->
<a v-bind:href="info.url">超链接</a>
</div>
<!--1.导入Vue.js , Axios.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
/*Model层*/
data: {
//info接收数据
info:{}
},
mounted(){
//获取json文件 返回 将返回值赋给info
axios.get('../demo/data.json').then(response=>(this.info=response.data));
},
});
</script>
</body>
</html>
六、计算属性
可以提高效率，类似缓存
七、插槽（slot）
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<title-li>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<!--v-bind: 可以简写为 :-->
<todo-li slot="todo-li" v-for="item in items" :li="item"></todo-li>
</title-li>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
//插槽
Vue.component("todo",{
template: '<div>' +
'<slot name="todo-title"></slot>' +
'<ul>' +
'<slot name="todo-li"></slot>' +
'</ul><' +
'/div>'
});
Vue.component("todo-title",{
props: ['title'],
template: '<div>{{title}}</div>'
});
Vue.component("todo-li",{
props: ['li'],
template: '<li>{{li}}</li>'
});
new Vue({
el: "#app",
data: {
title: "Vue",
items: ['123','456','789']
},
});
</script>
</body>
</html>
八、第一个vue-cli程序
1.环境准备
##1. 1 node.js下载
node.js官网：https://nodejs.org/en/
1.2 node.js安装
安装过程一路next，在选择存储路径时，尽量选取本地保存环境的路径。
1.3 验证安装
用管理员身份打开cmd，命令行输入
node -v
npm -v 
当显示版本号时证明安装成功
1.4 安装淘宝镜像
npm在国内的速度有时很慢，安装淘宝的镜像可以很大提升下载速度，但是尽量少使用cnpm下载，打包时有可能出现错误
npm install cnpm -g //-g的意思是全局安装，
npm install -g cnpm --registry=https://registry.npm.taobao.or下载镜像时首先要保证自我网络的通畅
2.安装Vue-Cli脚手架
2.1 安装Vue-Cli
cnpm install vue-cli -g
//查看创建Vue程序可使用的模板
vue list
2.2 创建Vue-Cli程序
命令行cmd，切换到存放代码的目录,如：d:\workspace
vue init webpack myvue-01
//webpack是模板 vuefirst是项目名称全部选择no即可
2.3 项目运行
cd myvue-01
npm install
npm run dev
浏览器访问： http://localhost:8080/
2.4 使用IDE打开创建的项目
九、webpack
发展
安装webpack
配置
使用webpack
6.IDEA的左下角的Terminal输入打包命令 webpack
打包完就是一个压缩后的js文件了
这是一个类似热部署的命令
7.创建一个html文件 用script标签引入刚才写好的js文件
8.运行
十、vue-router
1. 导入上边的插件并创建一个router的包，并建一个index.js(主配置)文件
2.编写一个组件rose.vue
3.编写index.js
3.在main.js进行路由配置
4.在App.vue中使用路由
5.运行 npm run dev
十一、vue+elementUI
1.创建vue项目
方拾二：
我用vue-ui可视化界面安装完之后运行出现了
查询之后，是因为新版本运行命令变成了 npm run serve，运行成功
2.安装element依赖
npm i element-ui -S
然后就可以使用element的组件了
十一、 路由嵌套、路由模式、404、路由钩子
在路由里写个 chrildren 来嵌套路由
路由模式
404
1488
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
