zoukankan      html  css  js  c++  java

  • vue学习笔记（1）

        写在前面的话

              应工作需求本人开始学习vue这个简洁大方的前端框架，并在此分享与交流一下学习心得，如有不对的地方还望指教，好了废话不多说开始进入正题

    　　vue学习第一步

    　　 学习这门语法之前咱们先来简单的了解一下vue到底是个什么？

    　　　　　　vue是一个前端的mvvm框架和angular类似，但是较angular来说更容易上手，更加小巧的一个mvvm框架

    　　　 那了解到vue是什么了之后，咱们就开始查找vue的官网，以及vue为我们提供的API

    　　　　　  官网：http://cn.vuejs.org/  

    　　　　　API： http://cn.vuejs.org/api/

    　　　了解到这些之后我们免不了就开始跃跃欲试了，好了废话不多说，咱们先来了解一下vue的雏形

    　　vue的基本雏形

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的基本雏形</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',//这里需要注意的是el是一个选择器，这个选择器可以是class、tagName、id....
                data:{
                    msg:'welcome vue'
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        {{msg}}
    </div>
</body>
</html>

     通过以上的大致了解，我们可以知道vue就是通过一串HTML代码加上一串js代码就能编写出来，那么vue里面有哪些内置的指令以及事件呢？那么我们接下来就来了解一下vue的指令和事件

    vue的指令和事件

    vue常用指令：
　　1、v-model：数据双向绑定
　　　　语法： <input type="text" v-model="msg">
　　2、v-for：数据循环
　　　　语法： <li v-for="value in arr">{{value}}</li>
　　　　注：v-for中内置了索引、key 语法：{{$index}}  {{$key}}
　　　　　　　v-for循环json 语法：<li v-for="(k,v) in json">{{k}}{{v}}{{$index}}{{$key}}</li>
　　3、v-show：内容显示或隐藏
　　　　语法：<div v-show="false/true"></div>
    　　4、{{*msg}}：数据只绑定一次
    　　5、{{{msg}}} ：HTML转译输出
    　　6、{{msg}}： 数据更新模板变化
    　　7、v-text：绑定数据
    　　8、v-html：解析html代码    
vue常用事件：
　　1、v-on:click 单击事件 简写:@click
　　　　语法：<input type="button" value="按钮" (v-on:click||@click).prevent="fn">  prevent:阻止浏览器默认行为
　　　　注：fn需要定义在new Vue对象的methods里面
　　　　例：new Vue({
　　　　　　　　el:'#box',
　　　　　　　　data:{ //数据
　　　　　　　　},
　　　　　　　　methods:{
　　　　　　　　　　show:function(ev,id){//$event:事件对象  id：事件传入参数
　　　　　　　　　　　　alert(1);
    　　　　　　　　　　　　ev.cancelBubble=true;//阻止事件冒泡
    　　　　　　　　　　　　ev.preventDefault();//阻止浏览器默认行为
　　　　　　　　　　}
　　　　　　　　}
　　　　　　});
　　　　　　    <input type="button" value="按钮" (v-on:click||@click).stop="show($event,id)">  stop：阻止事件冒泡
　　2、v-on:mouseout 当鼠标指针从元素上移开时触发事件 
　　3、v-on:mouseover 当鼠标指针悬停在元素上触发事件
　　4、v-on：dblclick 鼠标双击事件
　　5、v-on：mousedown 鼠标按下事件
　　6、v-on：keydown 键盘按下事件
　　7、v-on：keyup 键盘弹起事件
　　8、v-on：keyup.13 enter键弹起事件
　　9、v-on：keyup.enter enter键弹起事件
　　...
　由于事件还有很多就不一一列举了，例如keydown.enter,keydown.left.....
　　重点：这里唯一需要提到的是v-on:可以简写为@
到这里vue的事件以及指令咱们就有了一个大致的了解

    了解了vue的指令和事件之后，当然免不了要了解vue的属性

    vue绑定属性

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    a:{
                        color:'red',
                        backgroundColor:'gray'
                    },

    　　　　　　　　　　　　 json:{
    　　　　　　　　　　　　　　　 red:true,
    　　　　　　　　　　　　　　　 blue:true
    　　　　　　　　　　　　 }

    　　　　　　　　　　　　 url:'https://www.baidu.com/img/bd_logo1.png',
    　　　　　　　　　　　　 w:'200px',
    　　　　　　　　　　　　 t:'这是一张美丽的图片'

                    },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <strong (v-bind||:)style="a" (v-bind||:)class="json">文字...</strong> <img :src="url" alt="" :width="w" :title="t">
    </div>
</body>
</html>

    vue数据交互

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue数据交互</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script src="vue-resource.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'body',
                data:{

                },
                methods:{
                    get:function(){
                        this.$http.jsonp('https://sug.so.360.cn/suggest',{
                            word:'a'//传参
                        }).then(function(res){
                            alert(res.data.s);
                        },function(res){
                            alert(res.status);
                        });
                    }
                }
            });
        };

    　　　　　　window.onload=function(){
    　　　　　　　　new Vue({
    　　　　　　　　　　el:'body',
    　　　　　　　　　　data:{

    　　　　　　　　　　},
    　　　　　　　　　　methods:{
    　　　　　　　　　　　　get:function(){
    　　　　　　　　　　　　　　this.$http.(get/post)('get.php',{
    　　　　　　　　　　　　　　　　a:1, //传参
    　　　　　　　　　　　　　　　　b:2  //传参
    　　　　　　　　　　　　　　}).then(function(res){
    　　　　　　　　　　　　　　　　alert(res.data);
    　　　　　　　　　　　　　　},function(res){
    　　　　　　　　　　　　　　　　alert(res.status);
    　　　　　　　　　　　　　　});
    　　　　　　　　　　　　}
    　　　　　　　　　　}
    　　　　　　　});
    　　　　　　};

    </script>
</head>
<body>
    <input type="button" value="按钮" @click="get()">
</body>
</html>

    vue过滤器

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue过滤器</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        {{12|currency '￥'}}
    </div>
</body>
</html>