浅入Vue

一. ES6的常用语法

　 1.变量提升 :let定义取消变量提升

　 2.模板字符串 :``　及${}引用变量

　 3.数据解构:注意解构的数据类型要一致

　 4.类: class定义类,extends继承,constractor方法相当于py中的init方法

　 5.函数:注意this和普通函数的区别

　 6.函数的单体模式是极为常用的:foo(){return 1}

二.Vue常用指令

　　1.v-text　　:innertext

　　2.v-html　　:innerhtml

　　3.v-for

　　4.v-if v-else-if v-else

　　5.v-show　　:display

　　6.v-on　　:@xxx='处理方法'

　　7.v-bind　　:属性名称=属性值

　　8.v-model -- input -- textarea -- select

　　指令修饰符:.lazy .number .trim

　　计算属性:computed 放入缓存只有数据改变的时候才会重新计算

　　数据的监听: watch 注意可变数据类型跟不可变数据类型的区别

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="static/vue.min.js"></script>
</head>
<body>
<div id="app">
    {{ name }}
    {{ hobby }}
    <button @click="changedata">点我改变数据</button>
</div>

<script>
    let app =new Vue({
        el:'#app',
        data:{
            name:'alex',
            hobby:['抽烟','喝酒']
        },
        methods:{
            changedata:function () {
               // 数组类型的数据只能通过这种方式更改才能体现在前端页面
               app.$set(this.hobby,0,'抽二手烟')
            }
        },
        watch:{
             hobby: {
                handler: function (val, oldVal) {
                    console.log(val);
                    console.log(oldVal);
                }
        }

    }
    })
</script>
</body>
</html>

　　获取Dom: 给标签绑定ref属性 ref = "属性值" 　　this.$refs.属性值

　　自定义指令:Vue.directive("指令名称", function(el, binding){

　　　　　　　　el 绑定指令的标签元素
　　　　　　　　binding 指令的所有信息

<div id="app01">
    <div v-text="vue" v-pos="position" :class="{box:show} "> </div>
</div>


<script src="static/vue.min.js"></script>
<script>
    Vue.directive('pos',function (el,bindding) {
        if (bindding.value){
            el.style['position']='fixed';
            el.style['right']=0;
            el.style['bottom']=0
        }

    })

    let vm =new  Vue({
        el:'#app01',
        data:{
            vue:'hello vue',
            show:true,
            position:true

        }
    })