vue第一节课
什么是MVVM？
M model 模型 当前视图中可用的数据
V view 视图 页面DOM html
C controller 控制器 处理/加工model
viewModel 监控者
Vuejs的核心
Vue官网对它的描述：通过尽可能简单的API实现响应的数据绑定和组合视图组件。
1、Vue的数据驱动：数据改变驱动了视图的自动更新，传统的做法你得手动改变DOM来改变视图，vuejs只需要改变数据，就会自动改变视图，一个字：爽。再也不用你去操心DOM的更新了，这就是MVVM思想的实现。
2、视图组件化：把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。
Webpack是什么？
Webpack是一个前端打包和构建工具。如果你之前一直是手写HTML，CSS，JavaScript，并且通过link标签将CSS引入你的HTML文件，以及通过Script标签的src属性引入外部的JS脚本，那么你肯定会对这个工具感到陌生。 WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
1、热加载 Webpack不止这点功能，它还可以通过安装各种插件来扩展，比如说热加载技术，就是解放键盘的F5键。让我们修改代码，并且按Ctrl+S保存之后，浏览器页面自动刷新变化，不需要我们去手动刷新 ；
2、模块化，让我们可以把复杂的程序细化为小的文件;
3、scss，less等CSS预处理器。
Vue-CLi是啥
它是一个vue.js的脚手架工具。说白了就是一个自动帮你生成好项目目录，配置好Webpack，以及各种依赖包的工具。
简单demo
tab切换
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script type="text/javascript" src='js/vue.js'></script>
<script type="text/javascript" src='js/axios.js'></script>
</head>
<body>
<div id="my">
<!--默认写法-->
<ul class="tab-tit">
<li v-bind:class="n==1?'active':''" v-on:click="action(1)">{{n}}标题一</li>
<li :class="n==2?'active':''" @click="n=2">标题二</li>
<li :class="n==3?'active':''" @click="n=3">标题三</li>
<li :class="n==4?'active':''" @click="n=4">标题四</li>
</ul>
<div class="tab-con">
<div v-if="n==1">
内容一
</div>
<div v-show="n==2">
内容二
</div>
<div v-show="n==3">
内容三
</div>
<div v-show="n==4">
内容四
</div>
</div>
<!--数组写法-->
<ul class="tab-tit">
<li v-for="(v,index) in title" :class="n==index?'active':''" @click="n=index">{{v}}</li>
</ul>
<div class="tab-con">
<div v-for="(c,i) in content" v-if="n==i">
{{c}}
</div>
</div>
<!--数组对象写法-->
<ul class="tab-tit">
<li v-for="(v,index) in lists" :class="n==index?'active':''" @click="n=index">{{v.title}}</li>
</ul>
<div class="tab-con">
<div v-for="(c,i) in lists" v-if="n==i">
{{c.content}}
</div>
</div>
<!--动态数据写法-->
<ul class="tab-tit">
<li v-for="(v,index) in items" :class="n==index?'active':''"
@click="n=index">{{v.name}}</li>
</ul>
<div class="tab-con">
<div v-for="(c,i) in items" v-if="n==i">
{{c.con}}
</div>
</div>
</div>
<script>
window.onload = function(){
var vm = new Vue({
el:"#my", //element元素
data:{ //数据 响应式数据
n:1, //数据驱动 设置一个变量来控制
title:['标题1','标题2','标题3','标题4'],
content:['内容1','内容2','内容3','内容4'],
lists:[
{title:'a',content:'a1'},
{title:'b',content:'b1'},
{title:'c',content:'c1'},
{title:'d',content:'d1'},
{title:'e',content:'e1'},
],
items:[]
},
methods:{ //方法
action:function(i){
this.n = i;
},
getItems(){
var that = this; //局部定义
axios({
method:'get', //类型
url:'http://localhost:3333/get_tablist'
}).then(res=>{
console.log(res);
console.log(this); //window
this.items = res.data.result; //赋 值渲染
}).catch(function(error){
})
}
},
mounted(){ //生命周期钩子函数 表示挂载完成
this.getItems();
}
})
}
</script>
</body>
</html>
上一篇： 如何删除网址 如何删除地址栏中的网址 如何删除网址
下一篇： Java day_03