vue基础入门的那些事

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

未完待续