Vue笔记

一：环境搭建

    1.安装node.js

    2.cnpm 下载包

      地址：http://npm.taobao.org/

      安装cnpm:

      npm install -g cnpm --registry=https://registry.npm.taobao.org

    3.搭建vue的开发环境：

      https://cn.vuejs.org/v2/guide/installation.html

      1、必须要安装nodejs

      2、搭建vue的开发环境 ，安装vue的脚手架工具  官方命令行工具

        npm install --global vue-cli  /  cnpm install --global vue-cli （此命令只需要执行一次）

      3、创建项目  必须cd到对应的一个项目里面

        vue init webpack vue-demo01

        cd  vue-demo01

        cnpm install  /  npm install          如果创建项目的时候没有报错，这一步可以省略。如果报错了  cd到项目里面运行  cnpm install  /  npm install

        npm run dev

      4、另一种创建项目的方式  （推荐）  安装文件比较简洁

        vue init webpack-simple vuedemo02

        cd  vuedemo02

        cnpm install  /  npm install       

        npm run dev

二：运行说明

    1、cd 到demo里面

    如：cd vuedemo

    2、安装依赖：

    cnpm install 

    3、运行项目

    npm run dev

三：基本代码

    {{msg}}---双大括号是插值表达式，小胡子语法。

    el:'#app'---表示Vue实例控制页面上那个区域。

    data:{ }---存放el中需要用到的数据

    methods:{}---方法，定义当前实例所有可用的方法

四：Vue指令

    1：v-cloak---解决在网络延迟时插值表达式闪烁问题

      用法：

      <p v-cloak>{{msg}}</p>

      <style>[v-cloak]{display: none;}</style>

    2: v-text---默认没有闪烁问题，会覆盖元素中原本的内容

      用法：

      <p v-text="msg">被v-text覆盖的内容</p>

    3: v-html---双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性 

      <p v-html="msg2">1212112</p>

    4: v-bind---绑定属性的指令，简写为 ：要绑定的属性。只能实现单向绑定，从M自动绑定到V

      <input type="button" value="按钮" v-bind:title="mytitle + '123'">

    5：v-on---事件绑定机制，简写为 @

      <input type="button" value="按钮" v-on:click="show">

      <input type="button" value="按钮" @:click="show">

    6：v-model---实现表单元素和Model数据双向绑定，只能运用在表单元素中。input(radio, text, address, email....)  select    checkbox  textarea

      <input type="text" v-model="msg"> 

    7：v-for---循环数组

      循环普通数组

        <p v-for="item in list">{{item}}</p>

        <li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li>

        循环对象数组

        <p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>

        循环遍历对象身上的属性

        <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>

        迭代数字

        <p v-for="count in 10">这是第 {{ count }} 次循环</p>

        Key属性使用---循环时，key属性只能使用number和string,须使用 v-bind 属性绑定的形式，指定 key 的值

        <p v-for="item in list" :key="item.id">

          <input type="checkbox">{{item.id}} --- {{item.name}}

        </p>

    8. v-if---每次都会重新删除或者创建元素,有更高的切换消耗

        <h3 v-if="flag">这是用v-if控制的元素</h3>

    9. v-show---每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式

        <h3 v-show="flag">这是用v-show控制的元素</h3>

        如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show

        如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if

五：事件修饰符

    .stop --停止--阻止冒泡

    .prevent --阻止--阻止默认行为

    .capture --捕获--实现捕获触发事件机制   

    .self--自己--实现只有点击当前元素时候，才会触发事件处理函数

    .once--一次--只触发一次事件函数

六：Vue中样式

    1.普通样式

      <p class="red thin">一</p>

    2.传递一个数组，注意： 这里的 class 需要使用  v-bind 做数据绑定

      <p :class="['thin', 'italic']">传递一个数组</p>

    3.数组中使用三元表达式

      <p :class="['thin','italic',flag?'active':'']">数组中使用三元表达式</p>

    4.数组中嵌套对象

      <p :class="['red', 'thin', {'active': isactive}]">数组中嵌套对象</p>

    5.直接使用对象

      <p :class="classObj">直接使用对象</p>

      <p :class="red:true, italic:true, active:true,thin:true">直接使用对象</p>

    6.使用内联样式

      直接在元素上通过 `:style` 的形式，书写样式对象

      <p :style="{color: 'red', 'font-size': '40px'}">这是一个善良的p</p>

      <p :style="[ styleObj1, styleObj2, styleObj3]">这是一个p</p>

      <script>

        var vm = new Vue({

          el: '#app',

          data: {

            flag: true,

            classObj: { red: true, thin: true, italic: false, active: false }

          },

          methods: {}

        });

        </script>

        <style>

        .red {color: red;  }

        .thin {font-weight: 200;}

        .italic {font-style: italic;  }

        .active {letter-spacing: 0.5em;  }

        </style>

七：键盘修饰符以及自定义键盘修饰符

      通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名：

      Vue.config.keyCodes.f2 = 113;

      <input type="text" v-model="name" @keyup.f2="add">

八：过滤器定义

    Vue.filter('过滤器的名称', function(){})

    过滤器中的 function ，第一个参数，已经被规定死了，永远都是 过滤器 管道符前面 传递过来的数据

    Vue.filter('过滤器的名称', function (data) {

      return data + '123'

      })

    过滤器调用时候的格式    {{ name | 过滤器的名称 }}

    私有过滤器：

      1. HTML元素：

      ```

      <td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>

      ```

      2. 私有 `filters` 定义方式：

      ```

      filters: { // 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用

          dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错

            var dt = new Date(input);

            // 获取年月日

            var y = dt.getFullYear();

            var m = (dt.getMonth() + 1).toString().padStart(2, '0');

            var d = dt.getDate().toString().padStart(2, '0');

            // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日

            // 否则，就返回  年-月-日 时：分：秒

            if (pattern.toLowerCase() === 'yyyy-mm-dd') {

              return `${y}-${m}-${d}`;

            } else {

              // 获取时分秒

              var hh = dt.getHours().toString().padStart(2, '0');

              var mm = dt.getMinutes().toString().padStart(2, '0');

              var ss = dt.getSeconds().toString().padStart(2, '0');

              return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

            }

          }

        }

      ```

      ### 全局过滤器

      ```

      // 定义一个全局过滤器

      Vue.filter('dataFormat', function (input, pattern = '') {

        var dt = new Date(input);

        // 获取年月日

        var y = dt.getFullYear();

        var m = (dt.getMonth() + 1).toString().padStart(2, '0');

        var d = dt.getDate().toString().padStart(2, '0');

        // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日

        // 否则，就返回  年-月-日 时：分：秒

        if (pattern.toLowerCase() === 'yyyy-mm-dd') {

          return `${y}-${m}-${d}`;

        } else {

          // 获取时分秒

          var hh = dt.getHours().toString().padStart(2, '0');

          var mm = dt.getMinutes().toString().padStart(2, '0');

          var ss = dt.getSeconds().toString().padStart(2, '0');

          return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

        }

      });

      ```

      > 注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

九：生命周期函数

    <script>

      // 开始创建 Vue 实例，得到 ViewModel

      var vm = new Vue({

        el: '#app',

        data: {

          msg: 'ok'

        },

        methods: {

          show() {

            console.log('执行了show方法')

          }

        },

        beforeCreate() { 创建前//  这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它

          // console.log(this.msg)

          // this.show()

          //刚初始化一个vue空的实例对象，这时候，这个对象身上，只有默认的一些生命周期函数和默认事件，其他东西都未创建

          // 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化

        },

        created() { 创建// 这是遇到的第二个生命周期函数

          // console.log(this.msg)

          // this.show()

          //  在 created 中，data 和 methods 都已经被初始化好了！

          // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作

        },

        beforeMount() { 即将挂载// 这是遇到的第3个生命周期函数，表示模板已经在内存中编译完成了，但是尚未把模板渲染到页面中，此时，页面还是旧的。

          // console.log(document.getElementById('h3').innerText)

          // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串

        },

        mounted() { 挂载// 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了

          // console.log(document.getElementById('h3').innerText)

          // 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动

          //肉果要通过某些插件操作页面上的DOM节点，最早要在mounted中进行。只要执行力mounted,就表示整个Vue实例已经初始化完毕，

          //此时，组件已经脱离了创建阶段，进入到运行阶段。

        },

        // 接下来的是运行中的两个事件

        beforeUpdate() { 更新前// 这时候，表示 我们的界面还没有被更新【数据被更新了吗？  数据肯定被更新了】

          /* console.log('界面上元素的内容：' + document.getElementById('h3').innerText)

          console.log('data 中的 msg 数据是：' + this.msg) */

          // 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步

        },

        updated() { 更新

          console.log('界面上元素的内容：' + document.getElementById('h3').innerText)

          console.log('data 中的 msg 数据是：' + this.msg)

          // updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的

        },

        beforeDestroy(){  销毁前

        /*  当执行beforeDest钩子函数的时候，Vue实例就已经从运行阶段，进入到销毁阶段;

        当执行beforeDe的时候，实例身上所有data和所有methods,以及过滤器，指令...都处于可用状态，此时，还没有真正执行销毁过程 */

        },

        destroyed(){ 完全销毁

          /* 当执行到destroyed函数的时候，组件已经完全销毁了，此时组件中所有的数据，方法，指令，过滤器，都已经不可用了。 */

        }

      });

    </script>

十：使用vue-resource请求数据的步骤

        1.安装vue-resource模块，加上--save

          npm install vue-resource --save /  cnpm install vue-resource --save

        2.在main.js引入vue-resource 

          import VueResource from 'vue-resource';

        3.在main.js引入Vue.use(VueResource);

          Vue.use(VueResource);

        4.在组件里面直接使用 

          this.$http.get(地址).then(function(){

          })

          <template>

            <!-- 所有的内容要被根节点包含起来 -->

            <div id="home">

                首页组件

                <button @click="getData()">请求数据</button>

                    <hr>

                <br>

                <ul>

                    <li v-for="item in list">

                        {{item.title}}

                    </li>

                </ul>

            </div>

        </template>

          <script>

                export default{

                    data(){

                        return {

                            msg:'我是一个首页组件msg',

                            flag:true,

                            list:[]

                        }

                    },

                    methods:{

                        getData(){

                                //请求数据

                                var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';

                                this.$http.get(api).then((response)=>{

                                    console.log(response);

                                    //注意this指向

                                    this.list=response.body.result;

                                },function(err){

                                        console.log(err);

                                })

                        }

                    },

                    mounted(){  /*生命周期函数*/

                            this.getData();

                    }

                }

            </script>

十一：使用vue-axios请求数据

      1.安装vue-axios       

        cnpm install axios --save 

      2.哪里使用哪里引入

        import Axios from 'axios'

        <script>

            import Axios from 'axios';

            export default{

                data(){

                    return {

                        list:[]

                    }

                },

                methods:{

                    getData(){

                        var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';

                        Axios.get(api).then((response)=>{

                            this.list=response.data.result;

                        }).catch((error)=>{

                            console.log(error);

                        })

                    }

                },

                mounted(){  /*生命周期函数*/

                    this.getData();

                }

            }

        </script>

十二：组件使用

      1.在script标签内引入组件

      2. 在components内挂载组件 

      3.在模板中使用组件

      <template>

          <div id="app">

            <v-home></v-home><!--在模板中使用组件 -->

            <v-news></v-news>

          </div>

        </template>

        <script>

          //引入组件

          import Home from './components/Home.vue';

          import News from './components/News.vue';

          export default {

              data () {

                return {

                msg:'你好vue'

                }

              },

              components:{  /*前面的组件名称不能和html标签一样*/

                'v-home':Home, //挂载组件

                'v-news':News

              }

            }

        </script>

十三：父组件给子组件传值 父组件给子组件传方法

      1. 父组件调用字组件时候，绑定动态属性

        <v-header :title="title"></v-header>

      2.在子组件里面通过props接收父组件传过来的数据

        props:['title']     

      父组件代码： 

                <template>

                    <div id="home">

                        <v-header :title="title" :homemsg='msg'  :run="run"  :home="this"></v-header>

                        <hr>

                        首页组件

                    </div>

                </template>

                <script>

                    import Header from './Header.vue';

                    export default{

                        data(){

                            return {

                              msg:'我是一个home组件',

                              title:'首页111'

                            }

                        },

                        components:{

                            'v-header':Header

                        },

                        methods:{

                            run(data){

                              alert('我是Home组件的run方法'+data);

                            }

                        }

                    }

                </script>

      子组件代码：

                <template>

                    <div>

                        <h2>我是头部组件--{{title}}---{{homemsg}}</h2>

                        <button @click="run('123')">执行父组件的方法</button>

                        <button @click="getParent()">获取父组件的数据和方法</button>

                    </div>

                </template>

                <script>

                export default{

                    data(){

                        return{

                            msg:'子组件的msg'

                        }

                    },

                    methods:{

                        getParent(){

                            this.home.run()

                        }

                    },

                    props:['title','homemsg','run','home']

                }

                </script> 

十四：路由使用

        1.安装

          npm install vue-router  --save  / cnpm install vue-router  --save

        2、引入并 Vue.use(VueRouter)  (main.js)

          import VueRouter from 'vue-router'

          Vue.use(VueRouter)

        3、配置路由  下面四个在main.js里面

          1、创建组件 引入组件

          2、定义路由  （建议复制s）

              const routes = [

              { path: '/home', component: Home },

              { path: '/news', component: News },

              <!-- 属性1 是 path， 表示监听 哪个路由链接地址；

                  属性2 是 component， 表示，如果 路由是前面匹配到的 path ，则展示 component 属性对应的那个组件

                  注意： component 的属性值，必须是一个 组件的模板对象， 不能是 组件的引用名称

              -->

              { path: '*', redirect: '/home' }  <!-- 默认跳转路由 -->

            ]

          3、实例化VueRouter

              const router = new VueRouter({

                routes // （缩写）相当于 routes: routes

              })

          4、挂载

              new Vue({

                el: '#app',

                router，

                render: h => h(App)

              })

          5 、根组件的模板里面放上这句话 

          <!-- vue-router提供的占位符 将来，路由规则，匹配到的组件，就会展示到这个 router-view 中去-->

          <router-view></router-view>     

          <!-- <router-view></router-view> 外层可以包裹 <transition>设置动画-->

          6、路由跳转

            <!--router默认渲染为a标签，使用tag属性可以更改默默认a标签 -->

            <router-link to="/foo" tag="span">Go to Foo</router-link>

            <router-link to="/bar">Go to Bar</router-link>

          7.1.this.$router.go(val) => 在history记录中前进或者后退val步，当val为0时刷新当前页面。

          2.this.$router.push(path) => 在history栈中添加一条新的记录。 

十五：动画

      1.使用transition元素，把需要被动画控制的元素包裹起来

        <transition mode="out-in"> <!-- mode="out-in是动画先出后进" -->

          <p>被控制元素</p>

        </transition>

      2.自定义两组样式，来控制 transition 内部的元素实现动画

        <style>

            /* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */

            /* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */

            .v-enter,

            .v-leave-to {

              opacity: 0;

              transform: translateX(150px);

            }

            /* v-enter-active 【入场动画的时间段】 */

            /* v-leave-active 【离场动画的时间段】 */

            .v-enter-active,

            .v-leave-active{

              transition: all 0.8s ease;

            }

          </style>

        3.修改动画v-前缀    transition加入name属性

          <transition name="my"> 

            <p>被控制元素</p>

          </transition>

          样式里面v-改完自定义名字

          <style>

            .my-enter,.my-leave-to{opacity: 0;}

            .my-enter-active,.my-leave-active{transition: all 0.8s ease;}

          </style>

        4.使用animate库实现动画，用npm安装看api

          <transition enter-active-class="animated bounceIn"

                    leave-active-class="animated bounceOut">

            <h3 v-if="flag">这是一个H3</h3>

          </transition>

        5.动画钩子函数 

          +1：定义 transition 组件以及三个钩子函数：

              <div id="app">

                  <input type="button" value="切换动画" @click="isshow = !isshow">

                  <transition

                  @before-enter="beforeEnter"

                  @enter="enter"

                  @after-enter="afterEnter">

                    <div v-if="isshow" class="show">OK</div>

                  </transition>

                </div>

            +2. 定义三个 methods 钩子方法

                <script>

                methods: {

                  // 注意： 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象

                  // 大家可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象

                  beforeEnter(el){

                    // beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式

                    // 设置小球开始动画之前的，起始位置

                    el.style.transform = "translate(0, 0)"

                  },

                  enter(el, done){

                    // 这句话，没有实际的作用，但是，如果不写，出不来动画效果；

                    // 可以认为 el.offsetWidth 会强制动画刷新

                    el.offsetWidth

                    // enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态

                    el.style.transform = "translate(150px, 450px)"

                    el.style.transition = 'all 1s ease'

                    // 这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用

                    done()

                  },

                  afterEnter(el){

                    // 动画完成之后，会调用 afterEnter

                    // console.log('ok')

                    this.flag = !this.flag

                  }

                }

                </script>

十六：使用ref获取DOM元素和组件

      <h3 id="myh3" ref="myh3">哈哈哈， 今天天气太好了！！！</h3>     

      <script>

      methods:{

        console.log(this.$refs.myh3.innerText

      }

      </script>