vue.js 轻量级的MVVM框架
数据驱动+组件化的开发
一、基本指令
1、
v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：
v-if="expression"
2、
v-show根据表达式的真假来删除和插入元素
v-if="expression"
3、
可以用
v-else指令为v-if或v-show添加一个“else块”。
v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。
v-if和v-else连用时，不执行else时，else里面的HTML不渲染
v-show和v-else连用时，不执行else时，else里面的HTML渲染，只是display：none隐藏了
4、
v-for="item in items" items是一个数组，item是当前被遍历的数组元素。
总是key配合v-for使用<ul> <li v-for="todo in todos" :key="todo.id"> {{ todo.text }} </li> </ul>
5、
v-bind 指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的
特性（attribute--专门用来绑定属性），例如：v-bind:width=""
v-bind:argument="expression"
简写形式如下：
:argument="expression"
另外可以绑定类名
用法1：
:class="[className1,className2,className3]"其中，className1、2、3是数据 放在data中的
用法2：
:class="{className1:true,className2:false}"其中，className1、2是真正的类名
用法3：
:class="json"json是data里面的json
可以绑定style
:style="[c]"c是json形式的数据
:style="[c,d]"c和d都是json形式的数据，多个样式的写法
:style="json"json是data中的数据
6、
v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听<a>元素的点击事件：
<a v-on:click="doSomething">
v-on 有简写形式，如下：
<a @click="doSomething">
<colgroup><col style="width: 614px;"></colgroup>阻止冒泡：
@click="doSomething($event)"
1、ev.cncelBubble=true
2、@click.stop
阻止默认事件：
@contextmenu="doSomething($event)"
1、ev.preventDefault()
2、@contextmenu.prevent
键盘事件：
@keydown
@keyup
1)keydown.left/right/up/down
2)keydown.键值码
7、模板
{{msg}} 数据更新模板变化----->v-text="msg" 后面的方法可以防止闪烁
{{*msg}} 数据只绑定一次
{{{msg}}} 将HTML转译输出----->v-html="msg" 后面的方法可以防止闪烁，前面的方法v2.0已经删掉了
8、过滤器：过滤模板数据 系统提供一些过滤器:
{{msg| filterA}}
{{msg| filterA | filterB}}
9、v-cloak 防止闪烁（ 加载慢的时候出现{{}}标记 ）
用法：在style里面 [v-cloak]{ display:none }
一般当到比较大的盒子属性里面
10、track-by="$index"
当v-for循环添加重复数据添加不上时，可以用这个
<div id="box">
<input type="button" value="添加" @click="add">
<ul><li v-for="val in arr" track-by="$index"> {{val}} </li></ul>
</div>
<script>
var vm=new Vue({
data:{ arr:['apple','pear','orange'] },
methods:{
add:function(){ this.arr.push('tomato'); }
}
}).$mount('#box');
</script>
二、交互
1、get
获取一个普通文本数据:
this.$http.get('a.txt').then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
给服务发送数据:√
this.$http.get('get.php',{
a:1,
b:2
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
2、post
this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
3、jsonp
三、项目实践
1、简介
vue-cli脚手架 搭建基本代码框架，写好基本的代码（包括：目录结构、本地调试、代码部署、热加载、单元测试）
vue-router 官方插件管理路由
vue-resource ajax通信
webpack 构建工具
es6 + eslint eslint：es6代码风格检查工具
2、启动项目
1、node -v检查有没有安装node,没有的话，安装
2、npm install -g vue-cli 安装脚手架
3、vue 查看有哪些指令（可以直接跳到第4步）
4、vue list 查看可用模板
5、vue init webpack my-project 通过模板创建项目(my-project名字随便取)
6、ls 查看当前目录下文件是否创建成功
7、cd xxx（创建的目录名） 进入当前目录
8、npm install 创建依赖的代码库node_modules
9、npm run dev 启动项目
10、本地浏览器会新打开一个窗口，地址是：localhost：8080
3、目录介绍
1、build和config目录 都是webpack配置相关的东西
2、node_modules目录 npm install 安装的依赖代码库
3、src目录 存放项目源码
4、static目录 存放第三方静态资源的
----------------------分割线 上面是目录 下面是文件------------------------
5、.babelrc文件 将es6代码转成es5代码
6、.editorconfig 编辑器的配置
7、.eslintignore 忽略语法检查的目录文件
8、.eslintrc.js eslint的配置
9、.gitignore git会忽略的代码，不会提交到代码库当中
10、index.html 入口html文件
11、package.json 项目的配置文件
4、一些重要函数
i.钩子函数（1.0和2.0有差异） ----相当于回调函数，一个挂东西的地方，可以写自己的代码，执行相应的操作
beforeCreate 组件实例刚刚被创建，属性都没有 created 实例已经创建完成，属性已经绑定 beforeMount 模板编译之前 mounted 模板编译之后，代替之前ready beforeUpdate 组件更新之前 updated 组件更新完毕 beforeDestroy 组件销毁前 destroyed 组件销毁后Image.png
ii.计算属性的使用: 主要是用来缓存，只要依赖的属性没有发生变化，computed里面的计算属性就不会重新计算。
computed:{
b:function(){ //默认调用get
return 值
}
}
--------------------------
computed:{ //完整形式
b:{
get:
set:
}
}
* computed里面可以放置一些业务逻辑代码，一定记得return 注意区别 methods
5、vue实例的简单方法
var vm=new Vue({
el:'#box',
data:{
a:1
},
aa:11
});
i.vm.$el就是dom元素
vm.$el.style.background='red';
ii.vm.$data 就是上面的data对象
iii.手动挂载
vm.$mount('#box');可以替代第一行的代码
var vm=new Vue({
data:{
a:1
},
aa:11
}).$mount('#box');
iv.访问自定义属性————vm.$options
console.log(vm.$options.aa);
v.查看现在数据的状态
vm.$log();
6、vue过渡（动画）
本质：css3的animation和transtion
7、组件
<div id="box">
<aaa></aaa>
</div>
i.全局组件
var Aaa=Bue.extend({
data(){
return{
msg:'这是标题'
}
},
template:'<h3>{{msg}}</h3>'
});
Vue.component('aaa',Aaa);
组件里面放数据：
data必须是函数的形式，函数必须返回一个对象(json)
ii.局部组件
放到某个组件内部
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //局部组件
aaa:Aaa
}
});
8、vue-loader
简单的目录结构:
|-index.html
|-main.js 入口文件
|-App.vue vue文件
|-package.json 工程文件（项目依赖、名称、配置）
|-webpack.config.js webpack的配置文件
8、vue-cli (vue 脚手架)————提供好基本项目结构
基本使用流程：
1、安装npm install vue-cli -g
验证是否已经安装vue --version
2、生成项目模板
vue init <模板名> 本地文件夹名
3、进入到生成的目录里面
执行npm install
4、npm run dev
| 未完待续 |
|---|
