Vue基础入门笔记

不是面向DOM进行编程，而是面向数据去编程。当数据发生改变，页面就会随着改变。

属性绑定(v-bind)和双向数据绑定(v-model)

模板指令(v-bind:)后面跟的内容不再是字符串而是: js表达式    title指向的是data中的title变量

<div id="root">
    <div :title="title">Hello world</div>
    <input type="text" v-model="content">
    <div>{{content}}</div>
</div>
<script>
    new Vue({
        el:'#root',
        data:{
            content:"this is a text",
            title:'tAhis is a hello world'
        }
    })
</script>

计算属性及侦听器

<div id="root">
    姓:<input type="text" v-model="firstName">
    名:<input type="text" v-model="lastName">
    <div>{{fullName}}</div>
    <div>{{counts}}</div>
</div>
<script>
    new Vue({
        el:'#root',
        data:{
            firstName:'',
            lastName:'',
            counts:0
        },
        computed:{
            fullName:function () {
                return this.firstName + ' ' + this.lastName
            }
        },
        watch:{
            fullName:function () {
                this.counts ++
            }
        }
    })
</script>

v-for\v-if\v-show

        <div id="root">
           <div v-show="show">coming~</div>
            <button @click="handleClick">toggle</button>
            <ul>
                <li v-for="(item,index) of list" :key="index">{{item}}</li>
            </ul>
        </div>
        <script>
            new Vue({
                el:'#root',
                data:{
                    show:true,
                    list:[1,2,3,4,5]
                },
                methods:{
                    handleClick:function () {
                        this.show = !this.show
                    }
                }
            })
        </script>

【vm.$el 、vm.$data】—— $开头指的是vue的实例属性或方法

 动态改变字体颜色：

 <div @click="ClickChange" :class="{actived:isActived}">change color</div>
 <div :style="FontColor" @click="ChangeFontColor">change 2 color</div>
 <div :style="[FontColor,{fontSize:'26px'}]" @click="ChangeFontColor">change 2 color</div>

 data:{
         isActived:false,
         FontColor:{
           color:'red'
         }
      },
methods:{
            ClickChange:function () {
               this.isActived = !this.isActived;
            },
            ChangeFontColor:function () {
                this.FontColor.color= this.FontColor.color === 'red' ? 'black' : 'red'
            }
        },

 //子组件中定义data，data必须是个函数 使用is解决H5上面的小bug 、ref的使用 （4-1）

 

关于ref的使用：

• 组件上:  获取到的是-子组件的一个引用

• div标签上： 获取到的是-标签对应的dom元素

<div ref="hello" @click="onClick">hello world</div>
  methods: {
      onClick:function(){
          console.log(this.$refs.hello); //<div>hello world</div>
          console.log(this.$refs.hello.innerHTML); //hello world
       }
  }

ref的使用元素求和：

    <div id="root">
        <counter ref="change1" @change="handleChange"></counter>
        <counter ref="change2" @change="handleChange"></counter>
        <div>总计：{{total}}</div>
    </div>

    <script>
        Vue.component('counter',{
            data:function(){
              return{
                  number:0
              }
            },
           template:"<div @click='handleClick'>{{number}}</div>",
            methods:{
                handleClick:function () {
                    this.number++;
                    this.$emit('change')
                }
            }
        })
        var app = new Vue({
            el:"#root",
            data:{
                total:0
            },
            methods:{
                handleChange:function () {
                    this.total = this.$refs.change1.number + this.$refs.change2.number
                }
            }
        })
    </script>

父子组件传值

• 父组件向子组件传值 通过属性的方式
• 子组件通过事件触发的形式向父组件传值

单向数据流：子组件不能修改父组件传过来的数据，如果要修改，拷贝一个副本修改副本。

    <div id="root">
        <son :count="2" @change="hanldeChange"></son>
        <son :count="3" @change="hanldeChange"></son>
        <div>总计:{{total}}</div>
    </div>

    <script>
       var son = {
           props:['count'],
           data:function(){  //子组件避免修改父组件传过来的值
             return{
                 number:this.count //克隆一份修改这个克隆的副本
             }
           },
           template:"<div @click='handleClick'>{{number}}</div>",
           methods:{
               handleClick:function () {
                   this.number= this.number + 2; //克隆一份修改这个克隆的副本
                   this.$emit('change',2)
               }
           }
       }
        var app = new Vue({
            el:"#root",
            data:{
                total:5
            },
            components:{
                son:son,
            },
            methods:{
                hanldeChange:function (step) {
                    this.total += step
                }
            }
        })
    </script>

非父子组件传值

总线传值：

注意点：

1，子组件不可以直接修改父级传来的值（selfContent）。

2，点击事件触发传值（$emit）

3, 生命周期钩子mounted【组件被挂载的时候执行的函数】, 监听bus改变（$on）

<chid content="sherlock"></chid>
<chid content="homlee"></chid>

js:
        Vue.prototype.bus = new Vue()
        var chid = {
            data: function () {
                return {
                    selfContent: this.content
                }
            },
            props: {
                content: String
            },
            template: '<div @click="changecontent">{{selfContent}}</div>',
            methods: {
                changecontent: function () {
                    this.bus.$emit('change', this.selfContent)
                }
            },
            mounted: function () {
                console.log(this)
                var this_ = this; //this作用域发生变化
                this.bus.$on('change', function (msg) {
                    console.log(this)
                    console.log(this_)
                    this_.selfContent = msg
                })
            }
        }

ps：this作用域改变

this代表父函数，_this是个人定义的一个变量。如果在子函数还用this，this的指向就变成子函数了，_this就是用来存储指向的。

单页应用：页面跳转--》js渲染

npm install stylus --save

npm install stylus-loader --save

npm install vue-awesome-swiper@2.6.7 --save

Swiper插件报错  Maximum call stack size exceeded  居然是因为一个名字 Swiper改为HomeSwiper恢复正常。

name
递归组件、某页面取消缓存、控制台显示的名字

多个组件的过渡

<style type="text/css">
    .fade-enter,.fade-leave-to{
        opacity: 0
    }
    .fade-enter-active,.fade-leave-active{
        transition: opacity 1s
    }
</style>
<div id="root">
    <transition name="fade" mode='out-in'>
        <component :is="type"></component>
    </transition>
    <button @click="handleClick">切换</button>
</div>

<script type="text/javascript">
    Vue.component('child',{
        template:'<div>child</div>'
    })
    Vue.component('child-one',{
        template: '<div>child-one</div>'
    })

    var vm= new Vue({
        el: '#root',
        data:{
            type: 'child'
        },
        methods:{
            handleClick:function(){
                this.type = this.type === 'child' ? 'child-one' : 'child'
            }
        }
    })
</script>

Vue动画封装

<div id="root">
    <fade :show="show">
        <div>hello world</div>
    </fade>

    <fade :show="show">
        <h1>hello world</h1>
    </fade>
    <button v-on:click="show = !show">切换</button>
</div>

<script type="text/javascript">
    Vue.component('fade',{
        props: ['show'],
        template:'<transition @before-enter="handleBeforeEnter" @enter="handleEnter"><slot v-if="show"></slot></transition>',
        methods:{
            handleBeforeEnter:function(el){
                el.style.color="red"
            },
            handleEnter:function(el,done){
                setTimeout(()=>{
                    el.style.color="green"
                    done()
                },2000)
            }
        }
    })
    var vm= new Vue({
        el: '#root',
        data:{
            show: true
        }
    })
</script>

在脚手架工具里：data不再是一个对象而是一个函数，它的返回值是具体的数据。