vue个人学习小总结【随记】

qingfengvssuibian

已于 2022-07-19 11:07:07 修改

阅读量552

点赞数

分类专栏： java随记文章标签： vue.js

于 2021-11-17 00:29:23 首次发布

本文链接：https://blog.csdn.net/u014104653/article/details/121368827

版权

java随记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

Vue的组成

new Vue({
    el: "#app",
    data: {

    },
    methods: {
        showMsg(){
            alert("老婆，我爱你，就像老鼠爱大米");
        }
    }
})

属性外数据赋值

{{ param }}

属性赋值

<a v-binder:href="url"></a>

事件添加

<a v-on:click="showMsg($event)"></a>

双向绑定

<div>    
    <div>输入框值：{{ inputValue }}</div>
       
    <input v-model.lazy="inputValue"/>
</div>
<!--
v-model 会忽略所有表单元素的 value、checked、selected attribute
的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 
在组件的 data 选项中声明初始值。
-->

<!DOCTYPE H
TML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <!-- 用于设置页面的字符集，使中文不至于乱码-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="application/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!--  使用双大括号包括，里面可以填写vue对象的属性，方法，以及简单的运算加减乘除-->
            {{ (msg+msg)*msg}}
            <!-- 以及三目运算符 -->
            {{ msg>60 ? "old" : "young" }}
            <!-- 还可以使用简单字符串处理 -->
            {{ fullName.split(" ")[0] }}
            <!-- 使用方法-->
            {{ getFullName(firstName,lastName) }}
            <!-- v-是指令，有v-binder,v-on -->
            <!-- 对数据进行绑定，赋值给属性值，vue的属性值都是被解析为字符串，不会被解析为dom元素， -->
            <input v-bind:value="msg"/>
            <!--  不要加上双大括号  v-on:click stop(用于停止冒泡)  prevent(用于阻止默认行为)       -->
            <a v-bind:href="address"  v-on:click.stop.prevent="showMsg(1)">点我跳转到百度</a>
        </div>
        <script >
            <!-- 当引入vue.js之后,我们就直接可以使用Vue这个对象,就像我们引入jquery之后使用$符号一样 -->
            new Vue({
                el: "#app", // el指定了要选择控制哪个dom元素
                data: {     // data指定了vue对象所具有的属性
                    msg: 23,
                    firstName: "Wei",
                    lastName: "tieJi",
                    fullName: "Wei tieJi",
                    address: "http://www.baidu.com"
                },
                methods: {      // 指定了当前的vue对象所有的方法
                    getFullName(first,last,e){
                        return first +" " + last;
                    },
                    showMsg(msg){
                        alert(msg);
                    }
                }
            })


        </script>
    </body>
</html>

@和./区别

@一种别名别名一般会在webpack.base.conf.js文件中定义

 resolve: {
    extensions: ['.js', '.vue', '.json'], //引入时可以省略后缀名的文件
    alias: { // 别名定义
      'vue$': 'vue/dist/vue.esm.js', 
      '@': resolve('src'), 
      '@jsmartDa': resolve('static/jsmartDa'),
      '@static': resolve('static')
    }
  },