vue学习笔记二

最新推荐文章于 2024-06-19 12:13:25 发布

少说废话放码过来

最新推荐文章于 2024-06-19 12:13:25 发布

阅读量187

点赞数

分类专栏： vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_37221709/article/details/79063426

版权

vue学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

v-for 循环遍历渲染数据在页面

   <ol id="list">
      <li v-for="item in arr">{{item.text}}</li>
   </ol>

跟angular的比较大的区别：

数据在date：{}里面
方法在methos：{}里面

eg：

    data:{//需要渲染的数据
        msg:"Hello",
        arr:[{
            text:"幼儿园"
        },{
            text:"学前班"
        },{
            text:"小学"
        }],
        json:{a:"appple",b:"banana"}

    },
    methods:{//定义的方法
        add:function(){
            //document.getElementById("list").innerHTML += "<li>1</li>"
            this.arr.push({text:Math.random()});
            this.change();
        },
        change:function(){
            this.arr[1].text = "改变数据";
        }
    }

在Vue里面，this可以调用data和methods里面所有的对象和方法

一些事件

点击事件 @click

   <button @click="btn()">按钮</button>

双击事件

   <button @dblclick="btn">按钮</button>

右键事件

     <button @contextmenu.prevent="btn()">按钮</button>
    //取消默认行为

   <button @contextmenu="btn($event)">按钮</button>
   ...
    methods:{
        btn:function(ev){
            alert("Btn");
            ev.preventDefault();//取消元素默认行为
        }
    }

键盘按下事件

<body>
    <div id="app">
        <div><input type="text" @keydown="show()"/></div>
        <div><input type="text" @keydown="showCode($event)"/></div>
        <div><input type="text" @keydown.13="showEnter()"/></div>
        <div><input type="text" @keydown.enter="showEnter()"/></div>
    </div>

    <script src="vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
            },
            methods: {
                show: function () {
                   console.log("哈哈");
                },
                showCode:function(ev){
                    if(ev.keyCode==13){
                        console.log("您按回车了");
                    }
                    console.log(ev.keyCode);              
                },
                showEnter:function(){
                    alert("您按回车了");
                }
            }
        });
    </script>
</body>

 <!-- 左右键 -->
        <div><input type="text" @keydown.left="showLeft()"/></div>
        <div><input type="text" @keydown.right="showRight()"/></div>

取消事件冒泡

    <button @click.stop="showBtn">按钮2</button>
    // 直接 事件.stop = "事件"

或者

     <button @click="show($event)">按钮</button>
     ...
     // 取消事件冒泡
      show: function (ev) {
           lert("show");
           ev.cancelBubble = true;
      },

过滤器

<body>
<div id="app">
   <p>{{msg.toUpperCase()}}</p>
   {{msg.toLowerCase()}}
    <p>{{num | demo}}</p>
</div>
<script src="vue.js"></script>
<script>
//注册过滤器的入口
//两个参数：第一个过滤器名字，第二个回调函数
Vue.filter("demo",function(n,a){
    console.log(a);
    return  n <= 10?"小于等于":"大于";
});

new Vue({
    el:"#app",
    data:{
        msg:"Hello World~!",
        num:10
    }
});
</script>
</body>

少说废话放码过来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记二

v-for 循环遍历渲染数据在页面 ol id="list"> li v-for="item in arr">{{item.text}}li> ol>跟angular的比较大的区别：数据在date：{}里面方法在methos：{}里面 eg： data:{//需要渲染的数据 msg:"Hello",
复制链接

扫一扫