码迷,mamicode.com
首页 > 其他好文 > 详细

浅入Vue

时间:2018-11-15 21:11:29      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:str   handle   常用语法   inner   foo   取消   自定义   type   修饰符   

一. 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

        }
    })

 

浅入Vue

标签:str   handle   常用语法   inner   foo   取消   自定义   type   修饰符   

原文地址:https://www.cnblogs.com/wszxdzd/p/9965911.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!