Vue - 基本属性和事件

Vue的基本指令

Vue和Angular的用法差不多,语法和属性也差不多,Vue更像是国人的框架,所有的用法和习惯也都符号国人程序员的习惯,所以这也是Vue越来越热的原因,Vue就是简化了Angular一些复杂操作,用起来更加简单,便捷
Angular是用ng开头的指令,而Vue是用v开头的指令
下面是一段代码,看完之后你就瞬间明白是什么意思了!如果你已经学过Angualr的话,Vue可以说是鼻涕往嘴里流呢! So easy too happy!
示例代码 :

<!--
    指令:是特殊的带有前缀v-的特征.
        扩展了html原有标签属性功能.
        v-text:把模型当中的内容当做文件展示到页面当中.
        v-html:把模型当中的内容当做普通 HTML 插入
        v-show:根据表达式的值来显示或隐藏HTML元素  display:none
        v-if:根据表达式的值在DOM中生成或移除一个元素
        v-else:就是javaScript中else的意思,必须跟着v-if或v-show.充当else的功能.
        v-for:基于源数据重复渲染元素.
        v-model:数据双向绑定
        v-pre:跳转编译.不去解析里面的内容.
        v-cloak:防止闪烁
-->
<p v-cloak>{{test}}</p>
<p v-text="msg"></p>
<p v-html="msg"></p>
<p v-show="isShow">是否显示</p>
<p v-if="isShow">是否存在该标签</p>
<h1 v-else>No</h1>
<span v-pre>{{ msg }}</span>
<hr>
<!--可以通过template指定一个代码片段-->
<template v-if="true">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</template>
<!--数据的双向绑定-->
<input value="text" v-model="msg">
<hr>
遍历数组第一种:
<!--遍历数据  在遍历时,内置了一个$index 就是下标 第一种方式-->
<p v-for="value in course">{{value}}----{{$index}}</p>
<hr>
遍历数组第二种:
<p v-for="(key,value) in course">{{value}}----{{key}}</p>
<hr>
遍历对象第一种:
<p v-for="(key,value) in students">{{key}}--- {{value.name}}----{{value.age}}</p>
<hr>
遍历对象第二种:
<p v-for="stu in students">{{$index}}--- {{stu.name}}----{{stu.age}}</p>
<script src="./vue.js"></script>
<script>
    new Vue({
        el:'body',
        data:{
            test:'cloak',
            msg:'xmg<h1>大标题</h1>',
            isShow:true,
            course:['html','css','js'],
            students:[
                {name:'zs',age:10},
                {name:'li',age:20}
            ]
        }
    })
</script>

Vue的基本写法

示例代码 :

<body>
// 这种绑定的方式 是不是看起来更加熟悉呢
<p id="app1">{{msg}}</p>
<p class="app2">{{msg}}</p>
<div class="app3">
    <p>{{name}}</p>
    <!--跟angular一样 这里可以写运算 也可以写判断{{age?'value':'value'}}
    -->
    <p>{{age + 10}}</p>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
    window.onload = function () {
        /*创建一个vue对象,它就相当于我们之前学习angular的控制器,
         * 其中el: 可以是标签,id选择器,类选择器
         * data:就是模型.
         * 可以使用插值语法把模型的内容绑定到标签所在的作用域当中.
         * */
        new Vue({
            el: '#app1',
            data: {
                msg: 'xiba1',
            }
        });
        new Vue({
            el: '.app2',
            data: {
                msg: 'xiba2',
            }
        });
        new Vue({
            el: '.app3',
            data: {
                name: 'xiba3',
                age: 10
            }
        });
    }
</script>

Vue事件处理

示例代码 :

<body id="app">
<p>{{name}}</p>
<!-- 注册事件 -->
<button v-on:click="click()">点击</button>
<!-- 注册事件简写 -->
<button @dblclick="dbclick()">双击</button>
</body>
<script src="../js/vue.js"></script>
<script>
    window.onload = function () {
        new Vue({
            el: '#app',
            data:{
                name:'xiba',
                age:'20'
            },
            methods:{
                click(){
                    console.log('点了一下');
                },
                dbclick(){
                    console.log('双击了');
                }
            }
        });
    }
</script>

Vue事件绑定

示例代码 : 这种代码应该是看一遍就懂的如果是小白的话建议先去看文档

<body id="app">
<!-- input里面的内容修改 下面的内容也会修改 -->
<input type="text" v-model="msg">
<p>{{msg}}</p>
<!-- 加上*好之后只解析一次 内容就不会被一直修改掉 -->
<p>{{*msg}}</p>
</body>
<script src="../js/vue.js"></script>
<script>
    window.onload = function () {
        new Vue({
            data:{
                msg:'xiba'
            }
        }).$mount(app);   // 这里的$mount等价与把el:'#app'写里面
    }
</script>

Vue基本属性

示例代码 :

.red{
     color: darkgreen;
}
.fs20{
     font-size:20px;
}
<body id="app">
<!--red为模型当中定义的属性名称 多个属性使用逗号隔开-->
<p :class="[red,fs]">这是一段文字</p>
<!--使用对象的形式 和angular相似 同样, 值也可能在模型定义-->
<p :class="{red:true,fs20:true}">这是一段文字</p>
<!--第三种使用使用模型对象形式-->
<p :class="class">这是一段文字</p>
<!--style第1种直接写属性-->
<h1 :style="{color:'gray'}">大标签</h1>
<!--通过定义模型属性[属性名] 如果有多个, 使用逗号隔开-->
<h1 :style="[style]">大标签</h1>
<!--第三种,通过属性对象形式-->
<h1 :style="style">大标签</h1>
![]({{url}})
<!--
    可以在原标签属性上添加一个v-bind 或简写成 ":属性"
    后面就可以直接跟上模型当中的属性.
-->
![](url)
</body>
<script src="../js/vue.js"></script>
<script>
    window.onload = function () {
        new Vue({
            data:{
                url:'images/post_3.png',
                width:'100px',
                red:'red',
                fs:'fs20',
                class:{
                    red:true,
                    fs20:false
                },
                style:{
                    color:'blue',
                    'font-size':'50px'
                }
            }
        }).$mount(app);
    }
</script>

Vue事件绑定

示例代码 :

<body id="app">
<!-- 事件绑定 v-on指令 -->
<button v-on:click="show()">点击弹出</button>
<button v-on:click="hide('xibalu')">点击</button>
<!-- 事件绑定简写 -->
<button @click="show">再次点我</button>
</body>
<script src="../js/vue.js"></script>
<script>
    window.onload = function () {
        new Vue({
            // data里面写属性
            data:{
                msg:'xiba'
            },
            // methods里面写方法
            methods:{
                show(){
                    console.log(this.msg);
                },
                hide(arg){
                    console.log(arg);
                }
            }
        }).$mount(app);
    }
</script>

Vue内置过滤器

示例代码 :

<body id="app">
<!--在vue当中使用过滤器和angular当中非常一样.通过管道符的写法-->
<p>{{name | uppercase}}</p>
<!--同样它也支持连写的形式-->
<p>{{name | uppercase | lowercase}}</p>
<!--转成货币 注意它的传形式与angular有些区别, 它不要: 直接在后面空格写上参数-->
<p>{{price | currency '&'}}</p>
<!--过滤数组 filterBy '过滤条件' -->
<input type="text" v-model="search">
<ul>
    <li v-for="value in dataList | filterBy search">{{value}}</li>
</ul>
<!--过滤数组 limitBy '取得数量 偏移量' -->
<ul>
    <li v-for="value in numList | limitBy 5 3">{{value}}</li>
</ul>
<!--排序 大于等于0为升序 小于为降序-->
<ul>
    <li v-for="value in numList | orderBy -1">{{value}}</li>
</ul>
<!-- 键盘弹起时 延时1秒后再去执行对应的方法 -->
<input type="text" @keyup="show | debounce 1000">
</body>
<script src="../js/vue.js"></script>
<script>
    window.onload = function () {
        new Vue({
            data:{
                name:'xibalu',
                price:20.2,
                dataList:['css','html','java'],
                numList:[1,3,4,5,6,34,45,7,8]
            },
            methods:{
                show(){
                    console.log('延时执行了');
                }
            }
        }).$mount(app);
    }
</script>

Vue自定义指令和标签

示例代码 :

<body id="app">
<!-- 在使用指令时,前面加上v- -->
<p v-order>自定义指令1</p>
<!-- 在传递参数时要用''包裹 -->
<p v-color="'red'">自定义指令2</p>
<!-- 自定义出来的元素都是行内元素 -->
<kin>自定义元素</kin>
</body>
<script src="../js/vue.js"></script>
<script>
    window.onload = function () {
        /*自定义指令
         * 在使用指令时,前面加上v-
         * v-指令名称
         * */
        Vue.directive('order', function () {
            // 在自定义指令当中可以拿到指令所在的标签
            this.el.style.background = 'green';
            this.el.style.fontSize = '30px';
        });
        // 自定义指令可以传参数
        Vue.directive('color', function (color) {
            this.el.style.background = color;
        });
        // 自定义元素指令
        Vue.elementDirective('kin',{
            bind:function () {
                this.el.style.background = '#ccc';
            }
        });
        new Vue({}).$mount(app);
    }
</script>

Vue自定义过滤器

示例代码 :

<body id="app">
<p>{{e | defined 11 12}}</p>
<p>{{e | defined2 11 12}}</p>
<p>{{nowDate | dateTime}}</p>
</body>
<script src="../js/vue.js"></script>
<script>
    window.onload = function () {
        // 自定义过滤器
        Vue.filter('defined', function (input) {
            return input < 10 ? '0' + input : '' + input;
        });
        // 可以传递参数
        Vue.filter('defined2', function (input, a, b) {
            // alert(a + '' + b);
            return input < 10 ? '0' + input : '' + input;
        });
        // 获取年月日的过滤器
        Vue.filter('dateTime', function () {
            var date = new Date();
            return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
        });
        new Vue({
            data: {
                e: 9,
                nowDate: new Date()
            }
        }).$mount(app);3
    }
</script>

计算属性

这里要特别注意get()和set()方法, 下面请看代码详解
示例代码 :

<body>
<div>{{price}}</div>
<button @click="totalPrice">总价</button>
</body>
<script src="../js/vue.js"></script>
<script>
    window.onload = function () {
        var vm = new Vue({
            data: {
                price: 10,
                num: 3
            },
            computed: {
                total: {
                    /*
                     * 计算属性get方法
                     * this.属性名称，（this.total）如果该属性是计算属性，那么就会自动调用该属性的get方法
                     * this.属性名称 值就是get方法的返回、
                     * get方法，必须得要有返回值
                     * */
                    get(){
                        return this.price * 3;
                    },
                    /*
                     * 计算属性的set方法
                     * 当执行this.属性名称 = 值 (this.total = 10) 就会自动调用该属性的set方法。
                     * 并且把.=后面的执行，传递给set方法当作参数
                     * 不能在set方法内部执行该属性的 点等于
                     *   set(val){  不能这种形式出现， 会发生死循环。
                     this.total = 10;
                     }
                     * */
                    set(val){
                        this.price += val;
                        // this.val = 10;  死循环
                    }
                }
            },
            methods: {
                totalPrice(){
                    alert(this.total);
                }
            }
        }).$mount('body');
        vm.total = 10;
    }
</script>