Vue学习笔记

一：安装

方式1：

脚手架安装

#全局安装 vue-cli

npm install vue-cli --global

# 创建一个基于 webpack 模板的新项目

vue init webpack first-vue

# 进入项目，安装依赖，启动项目

cd my-project

npm install

npm run dev

方式2：

直接引入对应的js文件

二：vue基础知识

1、插值表达式
语法：
　　{{值}}
作用：
　　将表达式执行的结果 输出当调用元素的innerhtml中；还可以将数据绑定到视图

2、指令-循环指令
基本语法1：
　　<any v-for="tmp in array"></any>
基本语法2：
　　<any v-for="(value,index) in array"></any>
作用：
　　在遍历array这个集合时，将临时变量保存在tmp中，创建多个any标签

3、指令-选择指令
语法：
　　<any v-if="表达式"></any>
　　<any v-else-if="表达式"></any>
　　<any v-else="表达式"></any>
作用：
　　根据表达式执行结果的真假，来决定是否要将当前的这个元素 挂载到dom树

4、指令-事件绑定
    语法：
        <any v-on:eventname="handleevent"></any>
    作用：
        给指定的元素 将handleevent的方法绑定给指定eventname事件

5、指令-属性绑定
  基本语法：
    <any v-bind:myprop="表达式"></any>
    补充，支持简写：
    <any :myprop="表达式"></any>
  作用：
    将表达式执行的结果 绑定 到当前元素的myprop属性

    <img v-bind:src="'img/'+myimg" alt="">
   动态样式绑定
    <p :style="{backgroundcolor:mybgcolor}">动态样式绑定</p>

   动态样式类绑定
      <h1 :class="{myred:false}">动态样式类的绑定</h1>

6、指令-双向数据绑定
    方向1：数据绑定到视图
    方向2：将视图中（表单元素）用户操作的结果绑定到数据

    基本语法:
      <表单元素 v-model="变量">
      </表单元素>

 

三：组件化

所谓的组件化，就像玩积木一样，把封装的组件进行复用,把积木（组件）拼接在一起，构成一个复杂的页面应用程序。

组件树就是由各个组件构成的一种数据结构，它存在的意义是为了帮梳理应用程序

1、组件的创建
  全局组件
    vue.component('my-com',{
      template:`
        <h2>it is a header</h2>
      `
    })
      局部组件
    new vue({
        components:{
            'my-footer':{
           template:''
         }
        }
    })
2、组件使用
    作为普通的标签去使用
    <my-com></my-com>


3、注意事项
    1.组件的id和使用方式 遵循烤串式命名方式：a-b-c 
    2.如果一个组件 要渲染多个元素，将多个元素放在一个顶层标签中，比如div、form
    3.全局组件可以用在id为example的范围内的任何一个组件内部，直接调用可以；但是局部组件只能在父模板中直接调用

 

 四、自定义指令

1、创建和使用
 vue.directive('change',{
    bind:function(el,bindings){
    //首次调用
    },
    update:function(el,bindings){
    //只要是有数据变化，都会调用
    },
    unbind:function(){
    //解绑
    }
 })
 <any v-change="count"></any>