初识vue.js (一)

最新推荐文章于 2021-03-05 12:58:53 发布

孤鸿君

最新推荐文章于 2021-03-05 12:58:53 发布

阅读量114

点赞数

本文链接：https://blog.csdn.net/weixin_42345223/article/details/108547462

版权

1、Vue.js：渐进式javaScript框架

官网的说明还是有点让人摸不着头脑，我理解的所谓的渐进式就是：你想怎么用就怎么用，vue提供了一整套开发方案，供设计者选择，你可以只用一部分，（表单验证），或者整个项目都用vue,采用webpack vue-router方案，对于更大型的项目，采用vuex 处理数据在组件之间的流动，不同的需求，对应不同的方案，一层一层，供不同阶层的用户选择

Vue采用的是数据的响应式，也就是数据绑定，

2、指令

v-cloak:

用于解决插值表达式中存在闪动的问题，比如说请求比较慢，用户会先看到{{}}这样的表达式，最后才看到数据
原理：先隐藏，替换好值后再显示最终的值

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<dev id="aps" v-cloak>{{massage}}</dev>

<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    var Vue = new Vue({
        el:"#aps",
        data:{
            massage:"这是一个信息"
        }
    })

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

v-model:双向数据绑定

数据的响应式：数据的变化导致内容的变化，而数据的绑定，指将数据填充到标签中
v-once:指显示一次内容后，将不具备响应式的功能，提升性能，
双向绑定：就是在数据响应式的基础上，页面内容的变化，同时会改变数据
MVVM设计思想：M(model),v(view),vm(view-mo)

v-model:就是viewModel,它内部其实采用两种指令：用于listenner(事件监听)的 @click(v-on可以简写未@)和用于Data Binding（数据绑定）的v-bind,等价于

<input v-bind:value="msg" v-on:input="msg=$event.target.value">

v-bind:属性绑定&样式绑定

属性绑定的用法：<submit v-bind.href="url"></submit>,可以缩写为<submit :href="url"></submit>
- 样式绑定的用法：<div v-bind:class="{active:isActive}"></div>，isActive在vue对象中定义，值为true或false
- <div v-bind:style="{color:active,fontSize:fontSize}"></div>,active和fontSize都是在vue对象中定义的

3、事件

也就是方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<dev id="aps">
    <div>
        {{num}}
    </div>
    <button @click="handle1">button1</button>
    <button @click="handle2('信息',$event)">button2</button>
</dev>

<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    // 自定义键值
    Vue.config.keyCodes.a = 65
    var Vue = new Vue({
        el:"#aps",
        data:{
            massage:"这是一个信息",
            num:0
        },
        methods:{
            // 对于上面 <button @click="handle1">button1</button>这种方式调用的，默认会传入$event
            handle1:function (event) {
                
            },
            // 事件event要放在参数的最后一位
            handle2:function (p,event) {
                console.log(event.target.tagLength)
            }
        }
    })

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

事件修饰符：@click.stop 阻住冒泡。所谓的冒泡是指，当前元素的事件不会影响他的父类元素

@click.prevent:阻止默认行为，像href这种，将不会发生跳转行为

@keyup.enter:enter回车键

@keyup.delete：delete删除键

如果像定义属于自己的按键修饰符，可以在开头定义 Vue.config.keyCodes.自定义名称=键值