Vue入门

最新推荐文章于 2020-05-13 15:50:58 发布

duck不必√

最新推荐文章于 2020-05-13 15:50:58 发布

阅读量173

点赞数

分类专栏：【笔记】前端

本文链接：https://blog.csdn.net/weixin_45097731/article/details/105992440

版权

这篇博客详细介绍了Vue.js的基本概念和常用指令，包括MVVM模式、快速入门、插值表达式、事件处理（v-on）、数据绑定（v-bind、v-model）、循环指令（v-for）以及条件渲染（v-if/v-show）。还涵盖了Vue的生命周期、Ajax使用和实战案例，是Vue初学者的全面指南。

摘要由CSDN通过智能技术生成

官网 : 点击进入

一、概述与入门

1、MVVM模式

在这里插入图片描述
具体是怎么样的呢？

2、快速入门

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    {
  {msg}}         <!--Vue插值表达式，把data中定义的数据显示在此-->
</div>

<script>
<!--json格式-->
    new Vue({
    
        el: "#app",             //由vue接管id为app的区域
        data:{
    
            msg: "Lizhixi"      //后面没有分号
        }
    })
</script>

3、插值表达式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--插值表达式：不支持
    {
   {if(true)rerurn "1"}}
    {
   {var a = 1}}
    -->

    <!--支持：-->

    <!--三元运算符-->
    {
  {true?"30":"20"}}
    <!--数学运算-->
    {
  {number*30}}

</div>

<script>
    new Vue({
    
        el: "#app",
        data:{
    
            number: 2
        }
    })
</script>
</body>
</html>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效

二、vue常用系统指令

1、v-on

①v-on:click：点击事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    {
   {
   msg}}
    <button v-on:click="fun1('你好！')">点我</button>
</div>

<script>
    new Vue({
   
        el: "#app", //接管id为app的区域
        data:{
   
            msg: "Lizhixi"
        },
        methods:{
   
            fun1:function (msg) {
   
                this.msg = msg
            }
        }
    })
</script>
</body>
</html>

②v-on:keydown：阻止事件默认行为

阻止事件默认行为：是什么意思？

案例中，它规定按下0-9的数字没有event方法(阻止默认行为)，即，可以显示在输入框上；如果不是，那么你所输入的键将会被阻止。

preventDefault() 通知浏览器不要执行与事件关联的默认动作。
keyCode：返回Unicode字符码

代码：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<div id="app">
    VUE：<input type="text" v-on:keydown="fun1($event)">
    传统js：<input type="text" onkeydown="showKeyCode()">
</div>

<script>
    /*Vue*/
    new Vue({
    
        el: "#app", //接管id为app的区域
        methods: {
    
            fun1: function (event) {
    
                /* $event 它是vue中的事件对象  和我们传统js的event对象是一样的  */
                var keycode = event.keyCode;
                if (keycode < 48 || keycode > 57) {
    //48代表键盘0,75代表键盘9
                    event.preventDefault();//阻止默认行为
                }
            }
        }
    })


    /*JS*/
    function showKeyCode() {
    
        //event对象和我们的document对象以及window对象是一样的，可以不用定义直接使用
        var keycode = event.keyCode;
        if (keycode < 48 || keycode > 57) {
    //48代表键盘0,75代表键盘9
            event.preventDefault();//阻止默认行为
        }
    }
</script>
</body>
</html>

③v-on:mouseover：阻止事件传播

什么是事件传播？

案例中，div内包含textarea，而且它们都绑定了鼠标移动事件。在没有阻止之前是这样的：当我将鼠标移到div上，它弹出属于div事件的窗口；然而，当我移到textarea时，

最低0.47元/天解锁文章

duck不必√

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门

官网 : 点击进入一、概述与入门1、MVVM模式具体是怎么样的呢？2、快速入门<head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.js"></script></head><...
复制链接

扫一扫