Vue 总结

一直从事与于原生开发，前段时间接到需求，根据h5的一个Vue项目编写移动端代码，这就要求能看到Vue的代码，
现在移动端的编写已经接近尾声了，总结一下最近学到的Vue知识点。

系统学习可参考Vue.js官网 https://cn.vuejs.org/v2/guide/

以下是我自己总结学到的内容:

1.首先要引入vue.js才可以用Vue

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">            </script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2. 解析

<!-- 通过插值表达式赋值 -->
<div id="app">{{content}}</div>

<script>
<!-- 
在这里控制div上的展示，通过el:'#app' 将id 为app的控件挂载在这个全局vue上，由data控制控件上内容的展示。
通过 app.$xxx 这种格式可以拿到vue的实例
-->
    let app = new Vue({
        el: '#app',
        data: {
            content: 'hello Anya'
        }
    })

    setTimeout(function () {
        app.$data.content = 'hello Peter'
    },2000);

</script>

<!-- 
v-model="" 数据双向绑定 
v-on:click='xxx'  可以简写为 @click   方法绑定 有 : 表示后面的就不是普通的字符串而是一段js表达式
v-for='item of list' 循环list 
 -->
<div id="app">
    <input type="text" v-model="inputValue"/>
    <button v-on:click="submitClick">提交</button>
    <ul>
        <li v-for="item in list">{{item}}</li>
    </ul>
</div>

<!-- 
el:'#app' 拿到id为app的div 
全局vue中data是一个对象 , 子组件中data是一个函数，是因为子组件有可能会被调用多次，为了保证data数据不被污染，date得是一个函数。
ES5写法 
data: function() {
  reture {
     list : []
  }
}
ES6写法
data () {
   return {
    list : []
  }
}
-->

<script>

    let app = new Vue({
        el: '#app',
        data: {
            list: [],
            inputValue: ''
        },
        methods: {
            submitClick: function () {
                this.list.push(this.inputValue);
                this.inputValue = ''
            }
        }
    })
</script>

4.对于3的改进 ，将li标签做成一个子组件

<div id="app">
    <input type="text" v-model="inputValue"/>
    <button v-on:click="submitClick">提交</button>
    <ul>
<!-- 
v-bind:content='item' 简写为 :content='item' 作用是向子组件传递数据，子组件通过props接受父组件传来的数据
-->
<!--        <li v-for="item in list">{{item}}</li>-->
<!--        <todo-item v-bind:content="item" v-for="item in list"></todo-item>-->
        <todo-item :content="item" v-for="item in list"></todo-item>
    </ul>
</div>


<!-- 
TodoItem 是子组件写法有以下两种形式,第二种更像是一个字典 ,里面放着key value
props: ['content','content2'] 用于接受父组件传来的数据
template: '' 模板 如果没有改字段则按照#app控件的样式展示
components：子组件必须在父组件中注册才可以使用
methods: 方法

-->
<script>
    // Vue.component(TodoList,{
    //     props: ['content'],
    //     template: '<li>{{content}}</li>'
    // })

    var TodoItem = {
        props: ['content'],
        template: '<li>{{content}}</li>'
    }

    let app = new Vue({
        el: '#app',
        data: {
            list: [],
            inputValue: ''
        },
        components: {
            TodoItem
        },
        methods: {
            submitClick: function () {
                this.list.push(this.inputValue);
                this.inputValue = ''
            }
        }
    })
</script>

5.计算属性 方法 侦听器

<div id="app">
    {{fullName + age}}
</div>

<script>
var vm = new Vue({
        el:"#app", // el 表示接管了app这个dom元素
        data:{
            // 对外暴露的属性
            firstName:"xiang",
            lastName:"Deng",
            age:28
        }
})
</script>

计算属性：内置缓存，当计算属性依赖的数据没有发生变化时，会使用之前的数据，当依赖的数据发生变化时会走get方法

computed: {
      // 形式一
      fullName: function() {
           return this.firstName + this.lastName
     },
    // 形式二
      fullName: {
            get () {
                return this.firstName + ' ' +  this.lastName
            }
            set (value) {
                 var arr = value.split(' ')
                 this.firstName = arr.firstChild;
                 this.lastName = arr.lastChild;
            }
      }
}

方法：没有缓存

methods: {
   fullName: function() {
      return this.firstName + this.lastName
  }
}

侦听器:有缓存功能 就是书写繁琐

watch: {
    firstName: function () {
        this.fullName = this.firstName + this.lastName;
    },
    lastName: function () {
        this.fullName = this.firstName + this.lastName;
    }
}

6.Vue样式绑定

<!-- class绑定对象 :class="{key:value,key:value}"-->
<div id="app">
    <div v-on:click="handleDivClick"
         :class="{activate :isActivate,fontSet: isFontSet}"
    >
        {{content}}
    </div>

</div>

<script>
    var vm = new Vue({
        el:"#app",
        data: {
            content: 'helloworld',
            isActivate: false,
            isFontSet: true
        },
        methods: {
            handleDivClick: function () {
                this.isActivate = !this.isActivate;
                this.isFontSet = !this.isFontSet;
            }
        }
    })
</script>

<!-- 
class 绑定数组 :class="[obj,obj]" 
-->
<div id="app">
    <div @click="handleDivClick" :class="[activate,fontSet]">
        helloworld
    </div>
</div>

<script>
    var rm = new Vue({
        el: "#app",
        data: {
            activate:"",
            fontSet:"fontSet"
        },
        methods: {
            handleDivClick: function () {
                this.activate = this.activate === "activate" ? "" : "activate"
                this.fontSet = this.fontSet === "fontSet" ? "" : "fontSet"
            }
        }
    })
</script>

style 绑定对象
<div id="app">
   <div @click="handleDivClick" :style="objStyle">
       helloworld
   </div>
</div>

<script>
   var vm = new Vue({
       el: "#app",
       data: {
           objStyle:{
              color : "red"
           }
       },
       methods: {
           handleDivClick: function () {
               this.objStyle.color = this.objStyle.color === "red" ? "black" : "red"
           }
       }

   })
</script>

style绑定数组
<div id="app">
    <div @click="handleDivClick" :style="[objOne,objTwo]">
        helloworld
    </div>

</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            objOne:{
              color:"red"
            },
            objTwo:{
               fontSize:"30px"
            }
        },
        methods: {
            handleDivClick:function () {
                this.objOne.color = this.objOne.color === "red" ? "black" : "red";
                this.objTwo.fontSize = this.objTwo.fontSize === "30px" ? "20px" : "30px";
            }
        }
    })
</script>

7.Vue条件渲染

<!--
v-if
v-show
相同点 ： 显示的时候都是一样的
区别 ： v-if 元素会从页面上移除 删除 增加
       v-show 元素会隐藏 但是不会移除  隐藏 显示
-->

<div id="app">
    <div @click="handleDivClick" v-if="isShow">{{message}}</div>
    <div @click="handleDivClick" v-show="isShow">{{message}}</div>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            isShow: true,
            message: "helloworld"
        },
        methods:{
            handleDivClick:function () {
                this.isShow = !this.isShow;
            }
        }
    })
</script>

7. 数组常用的语法

<!--
 数组常用的7个变异方法
 push:往最后新增一个    unshift:往第一个中插入一个
 pop:移除最后一个      shift:删除第一个元素
 splice(1,1,'b')  截取 splice(index,length,varibale)
 sort  排序
 reverse  反序
 -->

8. 通过ref引用子组件，从而拿到子组件的属性

<div id="app">
    <counter @change="handleChange" ref="one"></counter>
    <counter @change="handleChange" ref="two"></counter>
    <div>{{total}}</div>
</div>

<script>
    let counter = {
        data () {
            return {
                number : 0
            }
        },
        template: '<div @click="handleClick">{{number}}</div>',
        methods: {
            handleClick () {
                this.number = this.number + 1;
                // 向父组件发消息
                this.$emit('change')
            }
        }
    }
    let vm = new Vue({
            el:'#app',
            data: {
                total: 0
            },
            components: {
                counter
            },
            methods: {
                handleChange () {
                    this.total = this.$refs.one.number + this.$refs.two.number
                }
            }
        }
    )
</script>

9.Vue子组件向父组件传值

<!--
父组件向子组件传值 ：
通过属性的方式子组件props中接受父组件传来的值，但不可以改变其中的值，可以创建出一个副本做更改。
子组件通过data对外暴露属性

子组件向父组件传值 ：
通过方法的形式
this.$emit('funName','agr','arg')

-->
<div id="app">
    <counter :count="0" @change="handleChange"></counter>
    <counter :count="0" @change="handleChange"></counter>
    <div>{{total}}</div>
</div>

<script>
    var counter = {
        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 vm = new Vue({
        el: "#app",
        data:{
            total:0
        },
        components:{
            counter : counter
        },
        methods: {
            handleChange:function (num) {
                this.total = this.total + num;
            }
        }
    })
</script>

10.组件参数校验

<div id="app">
    <Child content="hello"></Child>
</div>
<script>
    Vue.component('Child',{
        props:{
            content:{
                type:String,
                required:true
            }
        },
        template:'<div>{{content}}</div>'
    })

    var vm = new Vue({
        el:"#app"
    })
</script>

11.子组件绑定原生事

<div id="app">
    <child @click.native="handleClick"></child>
</div>

<script>
    Vue.component('child',{
        template:"<div>hello</div>"
    })

    var vm = new Vue({
        el: "#app",
        methods:{
            handleClick:function () {
                alert('click')
            }
        }
    })
</script>

12. 非父子组件间的传值(总线/bus/发布订阅模式/观察者模式)

<div id="app">
    <child content="Deng"></child>
    <child content="Xiangjiu"></child>
</div>

<script>
    Vue.prototype.bus = new Vue();

    Vue.component('child',{
        data:function () {
            return {
                selfContent:this.content
            }
        },
        props:{
            content:{
                type:String
            }
        },
        template:'<div @click="handleClick">{{selfContent}}</div>',
        methods:{
            handleClick:function () {
                // alert(this.content);
                this.bus.$emit('change',this.selfContent);
            }
        },
        mounted() {
            var this_ = this;
            this.bus.$on('change',function (msg) {
                console.log(msg);
                this_.selfContent = msg;
            })
        }

    })

    var vm = new Vue({
        el:"#app"
    })
</script>